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

Hex、Hex8、RGB、HSL、HSV、CMYK、OKLCH のカラーコードを相互に確認できるツールです。カラーコードを直接入力する方法と、カラーピッカーで色を選ぶ方法の両方に対応しています。入力中は結果がリアルタイムで更新されるため、書きながら各形式の表記を確認できます。

CSS の色指定を揃えたいとき、デザインツールから持ってきた値を CSS やスクリプトに合わせるとき、印刷向けの CMYK 値を参考確認したいとき、CSS Color 4 の oklch() 表記を取得したいときに使えます。

使い方

1. カラーコードを入力するか、カラーピッカーで色を選びます。
2. 入力した値が即時に解析され、Hex / Hex8 / RGB / HSL / HSV / CMYK / OKLCH が一覧で表示されます。
3. 必要な形式の値をコピーして使います。

入力欄では #RRGGBB のような Hex だけでなく、Hex8、rgb(...)、rgba(...)、hsl(...)、hsla(...)、oklch(...) 形式を受け付けます。前後の空白や末尾のセミコロンは自動で除去されます。3桁の Hex（例: #FFF）を入力した場合は 6桁に展開されます。

形式ごとの使い分け

確認できる形式は次の 7 種類です。形式によって書きどころと読みやすさが変わります。

Hex / Hex8

CSS やフロントエンド実装で最も無難に使える表記です。透明度を含まない通常の色は Hex、アルファ値を残したい色は Hex8 を選びます。スタイルガイドやコンポーネントのトークン定義でも扱いやすい形式です。

RGB

rgb(R G B) のように三原色の数値で直接色を扱いたいときに使います。JavaScript で色の値を組み立てる処理や、デザインツール側の RGB 表記と 1:1 で突き合わせたいときに向いています。

HSL / HSV

色相・彩度・明るさの単位で色を調整したいときに選びます。色相はそのままで明るさだけ変えたい、彩度を抑えてグレーに寄せたい、といった調整を感覚的に記述できる形式です。テーマカラーからバリエーションを作る場面で扱いやすくなります。

CMYK

印刷物を念頭に置く確認用の表記です。Web 上で扱う RGB ベースの色を、印刷時にどの程度の値になるかの参考値として確認できます。最終的な印刷色そのものを決めるものではない点に注意してください。

OKLCH

CSS Color 4 で導入された、知覚的に均等な色空間の表記です。oklch(L C H) の形で CSS に直接書けるため、デザインシステムやカラーパレットで lightness と chroma を扱いたいときに使えます。sRGB の範囲外を含む色も表せますが、Hex / RGB に変換する際は表示可能な範囲に収められます。

入出力例

たとえば #8683D5 を入力すると、各形式は次のように展開されます。

Hex: #8683D5
Hex8: #8683D5FF
RGB: rgb(134 131 213)
HSL: hsl(242 49% 67%)
HSV: hsv(242 38% 84%)
CMYK: device-cmyk(37% 38% 0% 16%)
OKLCH: oklch(0.65 0.12 284.15)

数値は内部の丸め処理によって微妙に変わることがありますが、1つの色が各形式でどう表されるかを確認できます。

活用シーン

• デザインツールのカラーコードを CSS やスタイル定義にそのまま移したいとき
• rgba(...) や hsla(...) を Hex / Hex8 に揃えてトークン化したいとき
• 配色表やスタイルガイドに複数形式の表記を併記したいとき
• Web の色を、印刷入稿前の CMYK 参考値として確認したいとき
• CSS Color 4 ベースの oklch() 表記を既存の色から取得したいとき

使うときの注意点

• CMYK は印刷工程やプロファイルによって最終的な見え方が変わります。色校正の結果とは必ずしも一致しません。
• OKLCH は sRGB の範囲を超える色を表現できますが、Hex / RGB へ変換した時点で表示可能範囲にクリップされます。
• カラーコードとして解釈できない文字列は変換できず、結果欄は更新されません。
• このツールは 1 つの色を別形式へ書き換えるだけです。配色の提案や、選んだ色のコントラスト比まで示すことはありません。コントラスト比の判定は カラーコントラストチェッカー が向いています。