カラーコードを1つ確認するためだけに重いデザインツールを立ち上げる必要はありません — 無料のカラーピッカー・カラーコード変換

カラーコード変換 — HEX · RGB · HSL

HEX	`#C8FF3E` — Web・CSS・デザインツール共通の書き方。3桁（`#ff0`）は6桁の省略形
RGB	`rgb(200, 255, 62)` — 赤・緑・青をそれぞれ0~255で表現。コードで色を計算するときに便利
HSL	`hsl(79, 100%, 62%)` — 色相・彩度・明度。「もう少し明るく」「トーンを揃える」はこれで調整するのが一番楽です

HEX欄にどの形式を貼り付けても、残りの2形式に自動で変換されます。値を押せばそのままコピーできるので、CSSやFigmaへ貼り付けるだけ。

3桁のHEXは各桁を2つに増やして(#ff0 → #FFFF00)6桁にし、RGBとHSLの相互変換は標準の計算式で行い、表示は整数に丸めます。

使い方

色を選ぶ — 大きな色チップを押すと端末のカラーピッカーが開きます。HEX欄には#ff0・rgb(255,0,0)・hsl(200,50%,50%)のどの形式でも貼り付けられ、下のH(0〜360)・S(0〜100)・L(0〜100)のスライダーで微調整できます。決めた色は最近の色の列に12個まで残り、押せば呼び出せます。
画像から — 写真を選ぶと代表色8つがHEXの表示付きでチップとして並びます。チップを押すとその色が現在の色になりコピーされ、写真の上を直接タップするとその位置のピクセルの色を正確に取得します(スポイト)。
配色 — 現在の色を基準に6種類の配色が自動で作られます。チップを押すとHEXがコピーされます。
コントラスト — 文字色と背景色を入れると、その組み合わせで描いたプレビュー(大きな文字と14pxの小さな文字)、コントラスト比、3つの基準の合否が表示されます。色を入れ替えで2色を入れ替えて比べられます。

配色6種類の作り方

いずれも現在の色の色相(H)を色相環の上で回して作り、彩度と明度はそのまま保ちます。

補色	基準色と180°反対側の色の2色
類似色	−30°・基準・+30°の3色
トライアド	120°間隔の3色。鮮やかでバランスの取れた組み合わせ
分裂補色	基準・+150°・+210°の3色。補色より柔らかい対比
テトラード	90°間隔の4色。カテゴリーごとに色を分けたいときに
明度段階	色相・彩度は保ち、明度だけ90・75・60・45・30・20・10%の7段階

コントラスト比はなぜ確認するのか

Webアクセシビリティ基準（WCAG）では、本文の文字は背景に対して 4.5:1 以上、大きい文字やボタンは 3:1 以上のコントラスト比が必要とされています。きれいなパステル背景に白文字が読めないのはこのためです。「コントラスト」タブに文字色と背景色を入れると、比率とAA・AAAの合否がすぐに分かります。

コントラスト比の計算方法

WCAG 2の相対輝度の式をそのまま使います。各チャンネルの値を0〜1にしてsRGBのガンマを解き(0.03928以下は12.92で割り、それより上は((v+0.055)/1.055)の2.4乗)、赤0.2126・緑0.7152・青0.0722の重みで合計して輝度を求めます。2色の輝度にそれぞれ0.05を足し、明るいほうを暗いほうで割った値がコントラスト比で、1:1(同じ色)から21:1(黒と白)までの範囲になります。判定は本文 AA 4.5:1、大きい文字・UI AA 3:1、本文 AAA 7:1の3行で表示されます。WCAGでは大きい文字とは18pt(約24px)以上、または太字なら14pt(約18.7px)以上を指します。

配色（カラーハーモニー）の使い方

基準の色から補色・類似色・トライアド・分裂補色・テトラード・明度段階を自動で生成します。アクセントカラーが欲しいときは補色、落ち着いた組み合わせなら類似色、ボタンのホバー色やグラデーションには明度段階が便利です。チップを押すとHEXがコピーされます。

画像から色を抽出するしくみ

画像は長辺900px以内に縮小して読み込み、4ピクセルごとに1つ標本を取ってR・G・Bをそれぞれ16段階にまとめた区画に入れ、頻度を数えます(半透明のピクセルは除外)。頻度の高い区画の平均色を求めたあと、すでに選ばれた色とRGB距離が40以内の似た色は飛ばし、互いに区別できる8色だけを残します。そのため空の写真で青ばかり8つ出るのではなく、青・雲の白・地面の色がそろって出てきます。

画像から色を抽出は、画像のピクセルを走査してよく使われている色を8つ選び、画像をタップするとその位置の色を正確に取得します。画像はブラウザの外に送信されません。

よくある質問

rgbaやhslaの値を入れたら透明度はどうなるか

数値3つだけを読み、アルファ値は無視します。半透明の色が背景の上で実際にどう見えるかはコントラストチェックでは判断できないので、合成後の色を別に確認してください。

最近の色はどこに保存されるのか

このブラウザの保存領域にだけ残り、サーバーには送られません。ブラウザのデータを消したり別の端末で開いたりすると空になります。

コントラストは合格なのに読みにくい

コントラスト比は明るさの差だけを測ります。色相だけ違って明るさが近い組み合わせ(赤い文字に緑の背景など)は比率が低く出ますが、逆に比率が高くても文字が細すぎたり小さすぎたりすると読みにくいことがあります。プレビューの14pxの文を実際の端末で目で確かめるのはそのためです。

CMYKやPantoneの値も使えるか

使えません。画面用の色体系であるHEX・RGB・HSLの3つだけを扱います。

あわせて使えるアプリ

パーソナルカラー診断 — 自分の肌・髪に合う色の系統を先に見つける。
ドット絵変換 — 色数を減らしたパレットで写真をドット絵に。
QRコード作成 — ブランドカラーのQRを作る前に前景・背景のコントラストを確認。
色の違いテスト — 微妙な色の差をどれだけ見分けられるかテスト。