COLOR & PALETTE TOOLS
カラーコードの変換、文字色と背景色のコントラスト確認、画像からの色取得を目的に合わせて切り替えられます。
カラー値と画像はブラウザ内だけで処理され、外部へ送信・保存されません。
入力内容は、別のモードへ切り替えて戻ってもページを閉じるまで保持されます。
透明色は市松模様の上に表示します。
#RGB・#RGBA・#RRGGBB・#RRGGBBAAに対応。#は省略できます。
赤・緑・青を0～255の整数で入力します。Alphaは上の共通欄を使用します。
色相は任意の数値を0～360度へ正規化し、彩度・明度は0～100で入力します。
CSS Color 4のスペース区切り形式です。
3桁または6桁の不透明なHEXカラーを入力してください。
合否は表示用に丸める前の値で判定します。
12.635 : 1
24pxの大きな文字も視覚確認用です。分類の自動判定はしません。
通常テキストこの文章はコントラスト確認用のサンプルです。
大きなテキスト（約24px）この文章はコントラスト確認用のサンプルです。
合格表示は指定した2色のコントラスト比だけを示します。 サイト全体のWCAG適合を保証するものではありません。大きなテキストは18pt以上、または14pt以上の太字が目安です。
PNG・JPEG・WebPなど、ブラウザが読み込める画像形式に対応しています。SVGは初版では利用できません。GIFなどはブラウザが静止画としてデコードしたフレームを対象にします。
左上がX=0・Y=0です。クリック・タップまたは矢印キーで選択します。
画像全体から最大6色を自動抽出します。割合は長辺最大320pxの解析画像による推定値です。
画像を選択すると、ここに色と座標を表示します。
周辺11 × 11 pixels
このページを開いている間の直近10件だけを表示します。
色を選択すると履歴を表示します。
HEX・RGB・HSLは同じsRGB色を異なる方法で表します。3・4・6・8桁のHEXやAlphaを入力すると、CSS Color 4形式のRGB・HSLへ変換できます。
WCAG 2.2の相対輝度式で、文字色と背景色のコントラスト比を計算します。AA通常テキストは4.5:1、AA大きなテキストと対象となるUI・非テキスト要素は3:1が基準です。AAA通常テキストは7:1、AAA大きなテキストは4.5:1です。
画像を読み込むと、指定した元画像の1pixelからHEX・HEX8・RGB・HSL・Alphaを取得し、画像全体から最大6色の主要色と推定割合を抽出します。プレビュー表示の縮尺ではなく元画像座標を使います。
透明色は実際の背景と合成した色で見え方が変わります。また、コントラスト合格は指定した2色の判定であり、サイト全体のWCAG適合を意味しません。画像の色はブラウザがデコードしてCanvasへ描画した値です。