カラーピッカー・コントラストチェッカー
カラーホイール、画面、画像から色を選び、HEX・RGB・HSL・CMYK・OKLCHのカラーコードをコピーできます。その色の文字が読みやすいかも確認でき、明るい色・暗い色や相性のよい配色も表示します。
無料・登録不要
使い方
- カラーピッカーで色を選ぶか、コードを入力・貼り付けるか、画像を開いて目的の色をタップします。
- 色相・彩度・明度・不透明度のスライダーで微調整します。
- 必要なコード（HEX、RGB、HSL、HSV、CMYK、OKLCH）をコピーします。
- 背景色を選んでWCAGのコントラスト比を確認し、読みにくい場合は提案された色を使います。
このツールの特長
画面や画像から色を取得
対応ブラウザではスポイト機能を利用できます。写真やスクリーンショットを開いてピクセルをタップすることもできます。
主要な形式にすべて対応
HEX、RGB、HSL、HSV、CMYK、OKLCHをそれぞれコピーでき、最も近いCSSの色名も表示します。
WCAGコントラストチェック
コントラスト比と、通常の文字・大きな文字・アイコン・枠線のAA／AAA判定を表示します。
修正案を提案
基準を満たさない場合、色相を保ったまま基準を満たす最も近い明るさの色を探します。
明るい色・暗い色と配色
9段階の明るい色と暗い色に加え、補色・類似色・トライアド・テトラードの配色を表示します。
無料・プライバシー保護
画像はブラウザ内で読み込まれ、アップロードされません。登録不要・回数制限なし。
カラーコードの種類
同じ色でも、いくつもの書き方があります。このページの例の青 #3366CC を、ツールが表示するすべての形式で書くと次のとおりです。
| 形式 | 例 | 主な用途 |
|---|---|---|
| HEX | #3366CC | Webデザイン、CSS、ブランドガイドライン |
| RGB | rgb(51 102 204) | 画面表示、CSS、多くのデザインアプリ |
| HSL | hsl(220 60% 50%) | CSSで明るさや鮮やかさを手で調整するとき |
| HSV（HSB） | hsv(220, 75%, 80%) | Photoshop、Figmaなどのカラーピッカー |
| CMYK | cmyk(75%, 50%, 0%, 20%) | 印刷用の大まかな目安 |
| OKLCH | oklch(53.2% 0.168 262.3) | 最新のCSS、明るさの段階がそろった配色 |
HEXをRGBに変換する方法
HEXコードは、赤・緑・青を表す16進数2桁の組を3つ並べたものです。各組は00〜FFで、10進数の0〜255にあたります。1組を変換するには、1桁目に16を掛けて2桁目を足します。A〜Fは10〜15を表します。
- 赤：33は 3 × 16 + 3 = 51
- 緑：66は 6 × 16 + 6 = 102
- 青：CCは 12 × 16 + 12 = 204
- つまり #3366CC は rgb(51 102 204) です。#36C のような3桁の短縮形は各桁を2回繰り返したもので、同じ色になります。#3366CC80 のような8桁のコードは不透明度を含みます：rgb(51 102 204 / 0.5)。
WCAGのコントラスト基準
Webコンテンツ・アクセシビリティ・ガイドライン（WCAG）では、コントラストを1:1（差なし）から21:1（白地に黒）までの比で表します。計算式は (L1 + 0.05) ÷ (L2 + 0.05) で、L1とL2は明るい色と暗い色の相対輝度です。最低基準は次のとおりです。
| レベル | 通常の文字 | 大きな文字 | アイコン・入力欄の枠線 |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | – |
よく使う色の白背景・黒背景でのコントラスト
人気のある色でも、見た目ほど読みやすくないことがよくあります。白い背景と黒い背景に文字として置いた場合の結果です。
| 色 | 白背景 | 黒背景 |
|---|---|---|
| 赤 #FF0000 | 3.99:1（AA不適合） | 5.25:1（AA適合） |
| オレンジ #FFA500 | 1.97:1（AA不適合） | 10.63:1（AA適合） |
| 緑 #008000 | 5.13:1（AA適合） | 4.08:1（AA不適合） |
| 青 #0000FF | 8.59:1（AA適合） | 2.44:1（AA不適合） |
| グレー #767676 | 4.54:1（AA適合） | 4.62:1（AA適合） |
| グレー #777777 | 4.47:1（AA不適合） | 4.68:1（AA適合） |
| 青（例） #3366CC | 5.36:1（AA適合） | 3.91:1（AA不適合） |
画像や画面から色を取得する
ロゴ、写真、スクリーンショットの色のコードを知りたいときは、「画像から取得」を選び、目的の場所をタップします。画像はブラウザ内で描画され、アップロードされません。
- 小さな部分は先に拡大してください。文字の縁のピクセルは、2つの色が混ざっていることがよくあります。
- 写真にはノイズや陰影があるので、近くの何か所かをタップしてコードを比べましょう。
- 「画面から取得」はブラウザのスポイト機能を使います。多くのスマートフォンのブラウザなど、この機能がないブラウザもあります。ボタンが表示されない場合は、スクリーンショットを撮って「画像から取得」で開いてください。
よくある質問
画像の色のHEXコードを調べるには？
「画像から取得」を選び、写真やスクリーンショットを開いて色をタップします。HEX、RGBなどのコードがすぐに表示され、それぞれコピーできます。画像は端末の外に送られません。
文字に必要なコントラスト比は？
WCAGのレベルAAでは、通常の文字で4.5:1以上、大きな文字（約24 px、太字なら約18.7 px）で3:1以上が必要です。アイコンや入力欄の枠線は3:1以上です。レベルAAAでは文字の基準が7:1と4.5:1に上がります。
HEXとRGBは同じ色ですか？
はい。どちらも赤・緑・青の同じ値を別の書き方で表したものです。#3366CC と rgb(51 102 204) はまったく同じ色なので、アプリやコードに合わせて使い分けてください。
日本のJIS X 8341-3とWCAGの関係は？
JIS X 8341-3:2016は、WCAG 2.0を国際規格化したISO/IEC 40500:2012と内容を一致させる形で2016年3月に改正された規格です。そのため達成基準1.4.3「コントラスト（最低限）」も同じで、通常の文字は4.5:1以上、大きな文字は3:1以上が基準です。官公庁や自治体のサイトでは、この規格に沿った対応が広く行われています。
CMYKの色が印刷すると違って見えるのはなぜ？
画面は光（RGB）、印刷はインク（CMYK）で色を作るため、画面の鮮やかな色をすべて印刷で再現できるわけではありません。このツールはカラープロファイルを使わない単純な計算式で変換しているので、正確な値は印刷会社に確認してください。
OKLCHとは何ですか？
OKLCHは、色を明度・彩度（クロマ）・色相で表す形式で、人の見え方に近い尺度になっています。OKLCHの明度が同じ色はほぼ同じ明るさに見えるため、均一な配色を作りやすくなります。現在の主要ブラウザはCSSのoklch()に対応しています。
画像や色はアップロードされますか？
いいえ。すべてブラウザ内で処理されます。この端末に保存されるのは最近使った色と背景色だけで、いつでも消去できます。
関連ツール
作りたいものがありますか？
作りたい内容を教えてください。
シンプルなWebサイトから本格的なアプリ、AIソリューション、自動化、カスタムシステムまで、作りたいものをお聞かせください。