画像カラーピッカー
写真、ロゴ、スクリーンショットを選びます。ピクセルを選ぶかパレットを抽出し、次のデザインに使えます。
PNG、JPEG、WebP · 最大20MiB、16メガピクセル
画像を選び、最初の色を取得してください。
画像上の点をクリックまたはタップします。画像にフォーカスし、矢印キーで一ピクセル、Shiftを押しながら10ピクセル移動できます。 座標は左上の0から始まります。
選択したピクセル
画像上の点を選んでください。
選択した色
この画像から最大12色を保存し、値をダウンロードできます。
二色の組み合わせを確認
サンプル配色や自分の色を入力するか、画像から選んだ色を文字や背景に指定します。プレビューでコントラストを確認し、値をコピーしてデザインに使えます。
画像で選択した色
画像のピクセルを選び、文字色か背景色に設定してください。
新しい画像を選ぶとサンプル配色に戻ります。
透明な色の下に置く不透明な面の色を選んでください。
#RGB、#RGBA、#RRGGBB、#RRGGBBAA、rgb(0, 0, 0)、rgba(0, 0, 0, 0.5)を使えます。RGBは0〜255の整数、アルファは0〜1です。
配色プレビュー
次のアイデアのための場所
ノートを持って席に着き、小さなスケッチから始めましょう。
コントラスト比
7.46:1
表示値は丸められています。合否は丸める前の精度で判定します。
| 文字サイズ | AA | AAA |
|---|---|---|
| 通常の文字 | 適合 | 適合 |
| 大きな文字 | 適合 | 適合 |
大きな文字は通常の書体で18pt以上、太字で14pt以上です。最終デザインの文字サイズを確認してください。
配色の詳細
{
"standard": "WCAG 2.2 SC 1.4.3 / 1.4.6",
"colorSpace": "sRGB",
"channels": "RGB 0–255; alpha 0–1",
"foreground": [
35,
78,
82,
1
],
"background": [
245,
230,
200,
1
],
"backdrop": [
255,
255,
255,
1
],
"renderedForeground": [
35,
78,
82,
1
],
"renderedBackground": [
245,
230,
200,
1
],
"ratio": 7.46158578805981,
"checks": {
"normalAA": true,
"normalAAA": true,
"largeAA": true,
"largeAAA": true
}
}結果はこの配色についてのものです。文字の縁にアンチエイリアスがある場合は元のデザインの色を使ってください。透明色は選択した不透明な下地に重ねて計算します。
WCAGコントラストガイド画像からカラーパレットを抽出
デザインに使う色を抽出し、パレットをコピーまたはダウンロードします。
上で画像を選ぶとパレットを抽出できます。
選択したファイルと色の値は、このページのメモリ内にのみ保持されます。このツールはアップロードや保存を行いません。通常のサイトサービスは別に動作します。
オリジナルの六色サンプルを試す
六つの単色ブロックを含むオリジナルPNGです。半透明の赤と完全に透明なブロックもあります。ダウンロードして上で選び、ピクセルを確認してください。
サンプルPNGをダウンロード
画像のピクセルを再利用できる色に
- ローカルのPNG、JPEG、WebPを選びます。プレビューは画面に合わせ、色の取得には画像本来のサイズを使います。
- クリック、タップ、矢印キーでピクセルを選びます。HEXはRGBチャンネル、RGBAは透明度も含めてコピーできます。
- 必要な色を保存し、色の値とピクセル座標を含むJSONまたはTXTをダウンロードします。別の画像を開くと、前の選択とリストは消去されます。
始める前に知っておきたいこと
画像カラーピッカーは無料ですか？
はい。色の取得、コピー、ダウンロードはブラウザ内で動作し、アカウントやクレジットは不要です。
透明度の値は何を意味しますか？
アルファ値は完全に透明なら0、不透明なら255です。アルファなしのHEXとRGBは色チャンネルを示し、RGBAと八桁のHEXは透明度も含みます。市松模様はプレビューの背景で、画像から取得した色ではありません。
別のアプリで色が違って見えるのはなぜですか？
表示値はブラウザがデコードしたピクセルの値です。画像のカラープロファイル、ブラウザ処理、ディスプレイ設定、印刷によって見え方は変わります。デザインに値を使い、最終的な利用先で確認してください。
画像はアップロードされますか？
いいえ。ローカルファイルはこのブラウザページでデコードして色を取得します。ツールがサーバーに送信したり、閲覧履歴に保存したりすることはありません。ページの読み込みと公開サンプルのダウンロードは通常のサイト接続を使います。
画像からパレットを作れますか？
はい。「パレットを抽出」で三色、五色、八色の代表色を取得して、コピーやダウンロードができます。手動でも最大12色をピクセル座標付きで選択・保存できます。