カラーコードコンバーターとは？

1つの色を、HEX、RGB、HSL、OKLCH、OKLab、HSV、CMYKの各形式と、SwiftUI・Composeのコードで確認できるツールです。カラーコードを入力するかピッカーで色を選ぶと、各形式の値がすぐに表示されます。CSSの色指定を揃えたいときや、デザインツールの値をコードに移すとき、印刷向けのCMYK参考値を確認したいときに使えます。

使い方

1. カラーコードを入力するか、ピッカーで色を選びます。
2. 変換結果に各形式の値と、SwiftUI・Composeのコードが表示されます。
3. 必要な形式の値をコピーします。すべての値をまとめてコピーすることもできます。

入力欄は、HEX（#RGB、#RGBA、#RRGGBB、#RRGGBBAA）、rgb()、rgba()、hsl()、hsla()、oklch()、oklab()を受け付けます。先頭の#は省略でき、前後の空白と末尾のセミコロンは無視されます。3桁・4桁のHEXは、結果では6桁・8桁に展開されます。

透明度を含む色を入力したときは、HEXが8桁になり、ほかの形式にもalphaが含まれます。

形式ごとの使い分け

HEX

不透明な色は6桁、透明度を含む色は8桁で表示されます。CSSやフロントエンド実装で最も広く使われる表記です。スタイルガイドやコンポーネントのトークン定義にも向いています。

RGB

rgb(R G B)の形で、三原色の数値から色を指定します。JavaScriptで色の値を組み立てるときや、デザインツールのRGB値と突き合わせたいときに使います。

HSL / HSV

色相・彩度・明るさで色を表します。色相を保ったまま明るさだけ変えたいときや、彩度を下げてグレーに寄せたいときに扱いやすい形式です。HSVはCSSの関数ではないため、デザインツールの表記を確認する用途で使います。CSSに貼り付ける場合は、RGBやHSL、OKLCHなどを使います。

OKLCH / OKLab

CSS Color 4で導入された、知覚的に均等な色空間の表記です。oklch(L C H)は明度・彩度・色相、oklab(L a b)は直交座標で色を表します。デザインシステムで明度と彩度を扱うときや、oklch()をCSSに直接書きたいときに使います。sRGBの範囲外の色も表せますが、HEXやRGBへ変換すると表示できる範囲に収められます。

CMYK

印刷物を念頭に置いた参考値です。Webの色が印刷でどの程度の値になるかを確認できます。印刷工程やプロファイルによって見え方が変わるため、色校正の代わりにはなりません。

SwiftUI / Compose

iOSとAndroidのコードで使える表記です。SwiftUIはColor(red:green:blue:)のsRGB値、ComposeはColor(0xAARRGGBB)のARGB値で表示します。透明度があるときは、SwiftUIにopacityが付き、Composeのalphaバイトにも透明度が入ります。

活用シーン

• デザインツールのカラーコードをCSSやスタイル定義に移すとき
• rgba()やhsla()をHEXや8桁HEXに揃えてトークン化するとき
• 配色表やスタイルガイドに複数形式の表記を併記するとき
• Webの色を、印刷入稿前のCMYK参考値として確認するとき
• 既存の色からoklch()やoklab()の表記を取得するとき