画像を読み込む
ファイル選択、ドラッグ＆ドロップ、クリップボードからの貼り付けが使えます。
画像から色を調べる
画像からカラーコードを抽出
画像内の調べたい場所をスポイトのようにクリックすると、その位置のカラーコードと主要色を抽出・確認できます。HEX・RGB・HSL・HWB・CMYKへの変換、色のコピー、文字と背景のコントラスト確認までブラウザー内で行えます。
主要な色形式HEX・RGB・HSL・HWB・CMYKに変換
CSS名前付き色148色を検索してコピー
画像は端末内で処理画像ファイルをサーバーへ送信しません
クリック位置の色を取得拡大鏡でピクセルを確認
使い方
3ステップで色を調べられます
画像はこのページを開いている端末内で処理され、サイトのサーバーへ送信しません。
画像内をクリック
拡大鏡を見ながら調べたいピクセルを選びます。クリック位置の色が結果欄へ反映されます。
必要な形式をコピー
Web制作では主にHEX・RGB・HSLを使います。印刷用の最終判断には実機校正を利用してください。
- HEX
#315b7dのような、Web制作でよく使う16進数表記です。- RGB
- 赤・緑・青を0〜255の数値で表します。
- HSL
- 色相・彩度・明るさで表すため、明るさの調整がしやすい形式です。
- HWB
- 色相に白と黒の割合を加えて表します。
- CMYK
- 印刷で使われる考え方への参考変換です。実際の印刷色を保証する値ではありません。
- コントラスト比
- 文字色と背景色の見分けやすさの目安です。
画像から色を取得
画像を読み込んでスポイトで選ぶ
ファイル選択、ドラッグ＆ドロップ、クリップボードからの画像貼り付けに対応します。読み込んだ画像はこのブラウザー内だけで処理されます。
画像を読み込んだ後、キャンバスをクリックして色を選びます。
画像を読み込んでください
読み込み後、画像内の調べたい位置をクリックするか、キーボードで座標を移動します。
画像の取り扱い：画像データはサーバーへアップロードせず、ブラウザーのCanvas機能で端末内処理します。ページを閉じると画像と抽出履歴は破棄されます。
画像から抽出した主要色
読み込んだ画像を縮小解析し、出現頻度と色の違いを考慮して最大12色を表示します。色をクリックすると選択・コピーできます。
画像を読み込むと、ここに主要色が表示されます。
選択履歴
色を選択すると、ここに履歴が表示されます。
カラーコード変換とコントラスト確認
この欄には「同じ色を別の書き方へ変換する機能」と「文字が背景の上で読みやすいか確認する機能」の2つがあります。
1. 同じ色を別のカラーコードへ変換
HEXやRGBなど、書き方が異なっても同じ色を表せます。入力した色自体は変えず、CSSや資料で必要なHEX・RGB・HSL・HWB・CMYKの表記へ書き換えます。
結果カードを押すと、その形式をコピーできます。CMYKは印刷で使われる考え方へ換算した参考値で、印刷結果を保証する値ではありません。
2. 文字色と背景色の読みやすさを確認
文字色と背景色のボタンを押すと、HEX・RGB・HSL・CMYKの値をまとめて確認し、どの形式からでも色を変更できます。
通常テキストのプレビュー読みやすさを確認します
大きな文字のプレビュー24px、または太字で約19px以上
結果の意味
- 比率
- 文字色と背景色の明るさの差です。同じ色の1 : 1から、白と黒の21 : 1まであります。数値が大きいほど見分けやすくなります。
- AA
- 多くのWebサイトがまず満たす最低基準です。通常文字は4.5 : 1以上、大きな文字は3 : 1以上で合格です。
- AAA
- AAより高い読みやすさを目指す基準です。通常文字は7 : 1以上、大きな文字は4.5 : 1以上で合格です。
- 大きな文字
- 通常の太さで24px以上、または太字で約19px以上の文字です。それより小さい文字は「通常文字」で判定します。
数値は丸める前の比率で判定します。詳しい条件はW3CのWCAG 2.2解説（英語）↗で確認できます。
CSS名前付き色 148色
CSSで色名をそのまま指定できる名前付き色です。英語名またはHEXで検索し、クリックすると選択・コピーできます。