🎨 概要
RGB、RGBA、CMYK、HSL、HSV、CIE LAB、XYZ、CIE LCHなどの色空間間で変換 — 開発者とデザイナー向け。
📖 仕組み
色空間は色の数学的モデルです。RGBは画面向け、CMYKは印刷向け、HSLは調整向け、CIE LABはマッチング向け。数式で空間間を変換します。
✨ 機能
- 多形式対応： RGB、RGBA、HEX、CMYK、HSL、HSV、CIE LAB、XYZ、CIE LCH、ANSI256など。
- 即時結果： 色を入力するとすべての空間が更新されます。
- プレビュー： スウォッチで変換後の色を表示。
- 色名： 可能な場合、最も近い標準色名を表示。
- 正確な計算： プロフェッショナルな変換アルゴリズム。
- ローカル処理： ブラウザ内で実行。
💡 手順
- 色の値を入力します（多くの形式に対応）。
- Enterキーを押すか「変換」をクリックします。
- すべての対応色空間で結果を確認します。
- スウォッチと値を確認します。
- プロジェクトに必要な形式をコピーします。
📋 対応フォーマット
- 入力： RGB、RGBA、HEX、HSL、HSV、色名など。
- 出力： RGB、RGBA、HEX、CMYK、HSL、HSV、CIE LAB、XYZ、CIE LCH、ANSI256、色名。
- 例： rgb(255, 0, 0)、#ff0000、red、hsl(0, 100%, 50%) など。
🎯 活用例
- Web開発の色変換。
- デザインからコードへの引き渡し。
- 印刷ワークフロー向けCMYK。
- クロスプラットフォームのカラーテーマ。
- アクセシビリティチェック。
- ブランドカラー基準。
🔧 色空間
- RGB： 赤、緑、青 — 画面、0–255。
- RGBA： RGBにアルファ0–1を追加。
- HEX： 16進数、例：#ff0000。
- CMYK： シアン、マゼンタ、イエロー、黒 — 印刷、0–100。
- HSL： 色相、彩度、明度 — 調整しやすい。
- HSV/HSB： 色相、彩度、明度/輝度 — ピッカーで一般的。
- CIE LAB： 知覚的に均一 — マッチングに最適。
- XYZ： デバイス非依存の標準空間。
- CIE LCH： 明度、彩度、色相 — 分析用。
⚠️ 注意事項
- 色はデバイス間で見え方が異なる場合があります。
- CMYKは印刷用。画面上のプレビューは異なる場合があります。
- 名前付き色は近似マッチです。
- ANSI256は主にターミナル用です。
- すべてローカル変換。
💻 使用例
CSSでの使用：
/* RGB */
color: rgb(255, 0, 0);
/* HEX */
color: #ff0000;
/* HSL */
color: hsl(0, 100%, 50%);
/* RGBA */
color: rgba(255, 0, 0, 0.8);
JavaScriptでの使用：
// Set element color
element.style.color = 'rgb(255, 0, 0)';
// Get computed color
const computedColor = getComputedStyle(element).color;
デザインツールでの使用：
/* Figma/Sketch color values */
fill: #ff0000
stroke: rgb(255, 0, 0)
opacity: 0.8
❓ よくある質問
- 同じ色がデバイス間で異なって見えるのはなぜですか？
ディスプレイ、キャリブレーション、カラーマネジメントが異なります。一貫性が重要な場合は標準化された空間を使用してください。 - CMYKとRGBの違いは？
RGBは加算混色（画面）、CMYKは減算混色（印刷）。色域が異なります。 - HSLとHSVの違いは？
HSLは明度、HSVは明度/輝度を使用 — 色調整時の挙動がやや異なります。 - CIE LABはいつ使うべきですか？
知覚的に均一なマッチング、色差、カラーマネジメント向け。 - 色名はどのように選ばれますか？
標準パレットと照合し、最も近い名前を選択 — 常に正確とは限りません。