カラーコード変換ツール

HEX / RGB / HSL / HSV の相互変換に対応したカラーツール。カラーピッカーから選ぶだけで、各形式の CSS コードを同時に生成します。コントラスト比も自動計算。

完全無料登録不要ブラウザ完結 5 言語対応ダークモード

HEX

RGB

HSL

HSV

CSS 形式

コントラスト比

白背景 (#FFF)

黒背景 (#000)

WCAG AA: 通常文字 4.5 以上・大文字 3.0 以上 / AAA: 通常文字 7.0 以上

トーンバリエーション

うまく動かない・表示がおかしい場合はお問い合わせフォームからご報告ください。

📖 つまずきやすいポイント

HEX / RGB / HSL / HSV / CMYK を相互変換し、WCAG のコントラスト比とトーンバリエーション、近い Tailwind の色も同時に出します。処理はブラウザ内で完結します。コントラスト比は WCAG 2.x の計算式そのままの値であって、「読みやすさ」の指標ではありません — この式は色相も彩度もフォントの太さも見ていないので、基準を満たしていても読めない組み合わせは普通に作れます。

ケース	何が起きるか	どうする
コントラスト比を満たしているのに読みにくい	WCAG 2.x のコントラスト比は相対輝度だけから計算します。したがって細い線のフォントも、太いフォントも、まったく同じ数字になります。`font-weight: 300` の 14px と `font-weight: 700` の 14px では実際の読みやすさが大きく違うのに、式はそれを区別しません。もう 1 つの落とし穴が彩度の高い色で、鮮やかな青やマゼンタの文字は比の数字が十分でも、目の焦点が合いにくく (色収差)、長文では疲れます。基準を満たすことと、読者が実際に読み通せることは別の話です。	4.5 は「最低ライン」であって目標ではありません。本文には 7 以上 (AAA) を目指してください — とくにグレーの本文 (`#666` 前後) は白背景で 5.7 程度しかなく、高齢の読者や屋外の画面では実際に読めません。細いウェイトを使うなら比を 1 段上げて補ってください。より知覚に近い指標が必要なら APCA (WCAG 3 の候補) を見ると、暗背景と明背景で必要なコントラストが違うことが数値に反映されます — WCAG 2.x はここを対称に扱ってしまうため、ダークモードのデザインでは特に実感とずれます。
デザインツールの色と実際の表示が違う	同じ `#4A90D9` でも、どの色空間で解釈するかによって実際に光る色が違います。Figma や Photoshop で Display P3 や Adobe RGB を作業色空間にしていると、数値は同じでもブラウザ (sRGB) で見たときより鮮やかに見えます — デザイナーの画面では鮮烈な青が、実装したら少しくすんで見える、という食い違いはほぼこれです。さらに、最近の端末は P3 対応のディスプレイを積んでいるので、「同じブラウザ・同じ CSS でも端末によって見え方が違う」という段階に入っています。	Web 向けの制作は sRGB を作業色空間にしてください — デザインツール側で明示的に設定できます。ブランドカラーを決めるときは、必ず実際のブラウザで実機を並べて確認してください。より鮮やかな色を意図的に使いたい場合は `color(display-p3 0.2 0.6 0.9)` という書き方があり、対応端末でだけ鮮やかに、非対応では自動的に近い sRGB に落ちます — ただし `@supports` で分けるか、先に sRGB 版を書いて上書きする形にしてください。印刷が絡む場合の CMYK は目安の値です — 実際の色は用紙とインクで変わるので、印刷物の色は必ず色見本で決めてください。
HSL で明度を揃えたのに明るさがバラバラ	HSL の L は「知覚的な明るさ」ではありません。単に RGB の最大値と最小値の平均で、人間の目が緑に敏感で青に鈍いことをまったく考慮していません。実例として、`hsl(60 100% 50%)` (黄) と `hsl(240 100% 50%)` (青) は L がどちらも 50% ですが、相対輝度はおよそ 9 倍違います — 並べると黄色だけが浮き上がって見えます。デザインシステムのカラーパレットを HSL で機械的に作ると、色相ごとに重さがバラつくのはこれが理由です。	パレットを体系的に作るなら OKLCH を使ってください — `oklch(70% 0.15 250)` のように書き、色相 (最後の値) だけを変えても明るさが揃います。これが OKLCH の設計目的そのものです。CSS では 2023 年以降の主要ブラウザで使えます。既存の HSL パレットを直すときは、色相ごとに L を手で調整するしかありません — 黄や水色は L を下げ、青や紫は上げる、という方向です。調整できたかどうかは、パレットをグレースケールにして確認するのが最も確実です — 明るさが揃っていれば、グレーにしたとき同じ濃さに見えます。

色だけで情報を伝えないでください (WCAG 1.4.1)。エラーを赤・成功を緑にするだけの UI は、日本人男性のおよそ 5% (20 人に 1 人) には区別が付きません — 世界では男性の約 8% です。アイコン・記号・文言のいずれかを必ず併用してください (「✕ エラー」「✓ 完了」のように)。グラフの凡例を色だけで区別するのも同じ理由で避け、線種やラベルの直接配置を使います。もう 1 点、ダークモードで色を反転するとき、彩度をそのままにすると眩しくなります — 暗い背景の上では同じ彩度でもコントラストが強く出るため、アクセント色は彩度を 10〜20% 下げ、明度を上げるのが定石です。純白 (#FFF) の文字を純黒 (#000) の背景に置くのも目が疲れるので避けてください — #E8E8E8 と #121212 程度に寄せると読みやすくなります。

📖 使い方

1

色を選択

カラーピッカーで選ぶか、HEX / RGB / HSL のいずれかの表記で直接入力します。
2

全形式で確認

HEX / RGB / RGBA / HSL / HSV / CMYK などすべての形式が即座に計算されます。
3

コントラスト比を確認

背景色と組み合わせた WCAG コントラスト比 (AA / AAA) が表示されます。アクセシビリティ対応に必須。

❓ よくある質問

WCAG のコントラスト比の基準は?

通常テキスト (18pt 未満) は AA で 4.5:1 以上、AAA で 7:1 以上。大きなテキスト (18pt 以上) は AA で 3:1、AAA で 4.5:1 が必要です。

HEX と RGB の違いは?

HEX (#FF5733) は 16 進数で 3 バイトを表現、RGB は 10 進数で同じ情報を示します。HEX は CSS / HTML で最短、RGB は透明度 (alpha) を扱いやすいのが特徴です。

HSL と HSV の使い分けは?

HSL は「色相・彩度・輝度」で、デザインシステムで色のトーンを作るのに便利。HSV は「色相・彩度・明度」で、カラーピッカー UI で直感的。どちらも可逆変換できます。

Tailwind の色パレットは対応していますか?

選択した色に近い Tailwind の色 (gray-500 / blue-600 など) を自動で提案します。Tailwind プロジェクトでそのまま使える色を選べます。

🐛 このツールで問題が発生しましたか？

完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。