使い方
- 色を入力します（#0f766e、rgb(15 118 110)、hsl(175 77% 26%)、oklch(…) など）。カラーピッカーで選ぶこともできます。
- 一覧から必要な形式をコピーします。
- 背景色を設定すると、コントラスト比と WCAG AA/AAA の判定を確認できます。
- スケール内の濃淡をクリックすると、その色を使えます。
オプションの説明
- HEX / RGB
- 画面の色を、赤・緑・青それぞれ 0〜255 の値で表します。#rrggbbaa や rgb(… / 50%) で透明度を加えられます。
- HSL / HSV
- 色相、彩度、輝度（HSL）または明度（HSV）です。色を手作業で明るくしたり暗くしたりするのに便利です。
- OKLCH
- CSS Color 4 で導入された知覚的な色空間です。明度を変えても色相と見た目の鮮やかさが保たれるため、カラーパレットやダークテーマの作成に最適です。
- CMYK
- 参考用の簡易的な変換です。実際の印刷色はプリンターのカラープロファイルによって変わるため、正確な値は印刷会社に確認してください。
- コントラスト比
- WCAG 2.2 のレベル AA では、通常のテキストに 4.5:1、大きいテキスト（18pt、または太字の 14pt）に 3:1 が必要です。AAA ではそれぞれ 7:1 と 4.5:1 です。
例
#0f766e は rgb(15 118 110)、hsl(175 77% 26%)、oklch(51.1% 0.086 186.4) と同じ色です。白い背景に対するコントラスト比は約 5.5:1 で、すべての文字サイズで WCAG AA に合格します。
よく使う色を各形式で
CSS の色名とその値です。ここでの CMYK は単純な数式による変換です。プロの印刷では、プリンターのカラープロファイルにある CMYK 値を使ってください。
| CSS の色名 | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
どの形式を使うか
HEX は、CSS やデザインツールで色を最も短く書ける形式です。赤、緑、青をそれぞれ 2 桁の 16 進数で表します。
RGB は同じ情報を 10 進数で表したもので、rgb(255 0 0 / 50%) のように書くと透明度を加えられます。
HSL は色相、彩度、輝度で色を表すため、最後の数値だけを変えて同じ色の明るい色合いや暗い色合いを簡単に作れます。
OKLCH は新しい CSS の形式で、明度の差が同じなら目にも同じだけ違って見えます。アクセシブルなカラーパレットを作るのに便利です。
よくある質問
テキストに適したコントラスト比はどのくらいですか？
本文のテキストには少なくとも 4.5:1（WCAG AA）が必要です。白地に純粋な黒は 21:1、よく使われる #767676 のグレーは白地で 4.54:1 と、ぎりぎり合格です。
CMYK の値が Photoshop と異なるのはなぜですか？
Photoshop は、特定の印刷機と用紙向けの ICC カラープロファイルを通して変換します。このツールは単純な数式を使っているため、目安には十分ですが、印刷の色校正には向きません。
HSL と OKLCH の違いは何ですか？
HSL は RGB を単純に並べ替えたものなので、同じ輝度の黄色と青でも見た目の明るさが大きく異なります。OKLCH は、同じ明度なら目に同じ明るさに見えるように設計されています。
今すぐ CSS で OKLCH を使えますか？
はい。oklch() は現在の主要ブラウザすべてで動作します。
プライバシー
このツールはすべてブラウザ内で動作します。ファイルやテキストはお使いの端末上で処理され、当サイトのサーバーにアップロードされることはありません。