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

Hex、Hex8、RGB、HSL、HSV、CMYK の色コードを相互に確認できるツールです。カラーコードを直接入力する方法と、カラーピッカーで選ぶ方法の両方に対応しており、同じ色を複数の形式で見比べられます。

CSS 用の色指定を変えたいとき、デザインツールの色をコードに合わせたいとき、印刷向けに CMYK の値も確認したいときに便利です。

使い方

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

入力欄では #RRGGBB のような Hex だけでなく、Hex8、rgb(...)、rgba(...)、hsla(...) 形式も扱えます。末尾のセミコロンや前後の空白が入っていても、その場で整形されます。

確認できる形式

• Hex
• Hex8
• RGB
• HSL
• HSV
• CMYK

背景プレビューも同時に更新されるため、文字列としての色コードと実際の色味を行き来しながら確認できます。

形式ごとの使い分け

Hex / Hex8

CSS やフロントエンド実装で扱いやすい形式です。透明度が不要なら Hex、アルファ値も含めたいなら Hex8 が向いています。

RGB

色の三原色で直接指定したいときに使います。JavaScript で値を扱う場面や、デザインツールの RGB 表記と合わせたいときに便利です。

HSL / HSV

色相や明るさの感覚で調整したいときに使いやすい形式です。同じ色相のまま少し明るくしたい、彩度だけ変えたい、といった調整を考えるときに役立ちます。

CMYK

印刷物向けの確認に使う形式です。Web 用の RGB ベースの色を、印刷時にどの程度の値になるか見たいときに役立ちます。

入出力例

たとえば #8683D5 を入力すると、ツールでは次のように複数形式へ展開して表示できます。

Hex: #8683D5
Hex8: #8683D5FF
RGB: rgb(134, 131, 213)
HSL: hsl(242, 49%, 67%)
HSV: hsv(242, 38%, 84%)
CMYK: cmyk(37, 38, 0, 16)

実際の数値は四捨五入の仕方で多少変わることがありますが、同じ色を各形式でどう表すかをすぐ確認できます。

活用シーン

• Figma や Photoshop の色を CSS に持っていきたいとき
• rgba(...) や hsla(...) から Hex 系の値に変えたいとき
• 配色表やデザインガイド用に複数形式を併記したいとき
• Web 用の色を印刷向けの CMYK でも確認したいとき

使うときの注意点

• CMYK は印刷工程やプロファイルによって見え方が変わるため、最終的な印刷色の保証にはなりません
• 色コードとして解釈できない文字列は変換できません
• このツールは同じ色を別形式で表現するためのもので、配色の自動生成やコントラスト判定は行いません