カラーコンバーターとは何ですか？
カラーコンバーターは、Web デザイン、CSS、デザインシステム、引き渡しノートで一般的に使われる形式に 1 つの色の値を変換します。単一のブランド色がスタイルガイドでは HEX、デザイントークンでは RGB、テーマエディタでは HSL、印刷用のメモでは CMYK として保存されることがあります。このツールはそれらの表現をまとめて表示し、手作業で再計算せずに正しいバージョンをコピーできるようにします。
コンバーターは意図的にコンパクトに設計されています。実用的な sRGB Web カラー（HEX、RGB、HSL、HSV、および簡易的な CMYK 近似）に焦点を当てています。プロフェッショナルなカラーマネジメントソフトや ICC プロファイルのワークフローを置き換えることは目的としていません。
サポートされているカラーフォーマット
| Format | Example | 主な利用目的 |
|---|---|---|
| HEX | #3366FF | CSS、デザイントークン、迅速なビジュアル引き渡し |
| RGB | rgb(51, 102, 255) | CSS 値、canvas 作業、プログラムによるカラーチャンネル |
| HSL | hsl(225, 100%, 60%) | 色相、彩度、明度によるテーマ調整 |
| HSV | hsv(225, 80%, 100%) | カラーピッカー風のワークフローや視覚的な調整 |
| CMYK | cmyk(80%, 60%, 0%, 0%) | 概算の印刷用メモであり、最終的なプレスの色管理ではありません |
重要な制限事項
- CMYK 出力は sRGB 値から計算された概算です。
- CSS の名前付きカラー、グラデーション、Lab、LCH、OKLCH、Display-P3 はこのコンパクトな v1 の範囲外です。
- アルファ値は一般的な HEX/RGB/HSL 形式で解析できますが、ネイティブのスウォッチプレビューは不透明なベースカラーを表示します。
- 異なるデザインツールでは HSL、HSV、または CMYK の値をわずかに丸める場合があり、差異が生じることがあります。
よくあるワークフロー
CSS のクリーンアップ
スタイルガイドから HEX カラーを貼り付け、コンポーネントの状態、チャートパレット、またはテーマ変数用に RGB や HSL をコピーします。
デザイン引き渡し
開発者、デザイナー、コンテンツ編集者が異なるツールを使う場合に備えて、複数のカラーノーテーションを一緒に保持します。
トークン確認
カラートークンが公開 UI で使用する前に、期待される色相と彩度にマップされているかを確認します。
印刷メモ
最終的な印刷出力はプロファイルに対応したツールに任せつつ、議論用に概算の CMYK 値を生成します。
よくある質問
CMYK の出力は正確ですか？
いいえ。CMYK 値は sRGB からの簡易変換で、概算に有用です。最終的な印刷作業は用紙、インク、プレス設定、ICC プロファイルに依存します。
CSS のカラーファンクションを貼り付けられますか？
はい。一般的な RGB、HSL、HSV、CMYK 形式の関数構文は対応します。Lab、LCH、OKLCH、Display-P3 のような新しいカラースペースは、このコンパクトツールの範囲外です。
ツールはアルファ透明度に対応していますか？
RGBA、HSLA、8 桁 HEX といった一般的なアルファ形式を解析できますが、主要なスウォッチとコピー出力は実用的な不透明の Web カラーに重点を置いています。
なぜ別のデザインツールと値が異なることがあるのですか？
小さな違いは通常、丸めルールやカラーマネジメントの前提の違いによるものです。Web の sRGB カラーではそれらの差は一般的にごくわずかです。
代わりにコントラストチェッカーを使用すべきなのはいつですか？
テキストの可読性のために 2 色を比較する必要がある場合は、コントラストチェッカーを使用してください。このコンバーターは 1 色を別の形式に変換するだけです。