カラーコード作成ツール

RGB/HSVをスライダーバーで調整してカラーコードを作成できます。
「HSVチャートから抽出」を使用し、円状のチャートから色を抽出することができます。抽出した色はRGB/HSVのスライダーバーで編集できます。
- チャート上を、クリックする/左クリックしながらマウスを動かす/矢印キーを動かすことにより任意の位置の色が抽出できます。
「画像から抽出」を使用し、画像から色を抽出することができます。抽出した色はRGB/HSVのスライダーバーで編集できます。
- 画像上を、クリックする/左クリックしながらマウスを動かす/矢印キーを動かすことにより任意の位置の色が抽出できます。
- 画像の処理はブラウザ上で完結するので、画像データがインターネット上に送信されることはありません。
「コントラスト比」を使用し、色の組み合わせがWCAGにおける基準を満たしているかを確認したり、contrast ratioが条件を満たす色を抽出したりできます。
「配色チェック」を使用し、複数の色をリストアップして、色の組み合わせを確認できます。リストアップした配色は後述する「履歴」に保存することも可能です。
「履歴」には編集したカラーコード（「色」タブ）、配色（「配色」タブ）が保存されます。「履歴」はブラウザ(localStorage)に、新しいものから最大30個まで保存されます。
ブラウザは、Google Chrome, Firefox, Microsoft Edge(Chromium版), Safariを使用してください。
ソースコード(GitHub)
各種情報(Twitter)
このサイトについて

カラーコード:

R:

G:

B:

H:

S:

V:

履歴に自動反映

ツール

HSVチャートから抽出画像から抽出コントラスト比配色チェック

円の中心からの距離＝S(彩度)

V(明度)

サイズ: 小中大

分割: 10 20 なし

表示領域にあわせて画像サイズを調整
元の画像サイズを維持

画像ファイルを選択し、色を抽出することができます。抽出した色はRGB/HSVのスライダーバーで編集できます。
画像上を、クリックする/左クリックしながらマウスを動かす/矢印キーを動かす、ことにより任意の位置の色が抽出できます。
画像の処理はブラウザ上で完結するので、画像データがインターネット上に送信されることはありません。

コントラスト比の確認説明文を閉じる説明文を開く

背景色/文字色の組み合わせが、WCAGにおける基準を満たしているかを確認できます
Drag&Dropで、背景色/文字色の両方を選択すると、AA,AAAの各基準を満たしているかの判定結果が表示されます。
Drag&Dropで、背景色/文字色は入れ替えることもできます。
画面に表示される比の値は、小数点以下第3位を四捨五入した値です。

背景色

履歴や自動抽出等からDrag&Dropで色を選択

文字色

履歴や自動抽出等からDrag&Dropで色を選択

Normal Text:

AA(4.5:1<=):

AAA(7:1<=):

あいう abc あいう abc

Large Text:

AA(3:1<=):

AAA(4.5:1<=):

あいう abc あいう abc

▲ 自動抽出説明文を閉じる説明文を開く

色相(HUE)毎にWCAGで示されているcontrast ratioが高い色を自動で抽出します。
より正確には、色相を「HUEの分割数」で分割し、それぞれの分割毎に「スコア」が最も高い色を抽出します。
「スコア」とは、「抽出元の色」に対するその色のcontrast ratioの平均値です。
「HSVの範囲」を満たしている色のみが抽出されます。
「抽出元の色」全てに対して「コントラスト比の範囲」を満たしている色のみが抽出されます。
「HUEの分割数」「HSVの範囲」「コントラスト比の範囲」は、「設定」で選択できます。
「抽出元の色」「抽出結果」の色はDrag&Dropまたは、ダブルクリックし、「コントラスト比の確認」で確認できます。

▲ 設定

HUEの分割数:

HSVの範囲:

H:

S:

V:

コントラスト比の範囲:

処理実行スレッド数:

抽出元の色

履歴や「コントラスト比の確認」等からDrag&Dropで色を追加

→→

抽出

→→

抽出結果

色	スコア

処理中です。

表示対象がありません

編集中の色や、履歴からDrag&Dropで色を追加してください

配色名:

履歴

色配色