カラー選択
カラーコード
行をクリックするとクリップボードにコピーされます。
画像から色を抽出
画像をドラッグ＆ドロップするかクリックしてアップロードし、好きな場所をクリックして色を取得します。画像がブラウザの外に送られることはありません。
配色パレット
選んだ色をもとにした調和色です。スウォッチをクリックするとその色に切り替わります。
カラースケール（50 → 900）
デザインシステムにそのまま使える明度段階です。500 が選択中の色です。
コントラスト比チェック（WCAG）
選んだ色を文字色と背景色の両方で検証します。本文は 4.5:1 以上が推奨です。
変換ツール
カラー名
CSS や HTML で名前だけで指定できる色です。系統別にまとめてあるので、気になる色を開いてコードと配色を確認してください。
カラーピッカーの使い方
中央の四角を左右に動かすと彩度、上下に動かすと明度が変わります。下のバーが色相（Hue）、その下が不透明度（Alpha）です。ハンドルを選択して矢印キーを押すと 1 ずつ、Shift を併用すると 10 ずつ調整できます。
入力欄にはどの形式でも貼り付けられます。#3B82F6 のような HEX はもちろん、rgb(59 130 246)、hsl(217, 91%, 60%)、hsv(217, 76%, 96%)、cmyk(76%, 47%, 0%, 4%)、さらに tomato のような CSS カラー名も認識します。
スポイトボタンを押すと画面のどこからでも色を拾えます（EyeDropper API 対応の Chrome・Edge など）。Safari や Firefox では画像をアップロードしてクリックすれば同じことができます。アップロードした画像はサーバーに送信されず、ブラウザ内だけで処理されます。
よくある質問
HEX と RGB は何が違いますか？
同じ色の書き方の違いです。HEX（#FF6347）は赤・緑・青を 16 進数 2 桁ずつ並べたもので、RGB（255, 99, 71）は同じ値を 10 進数で書きます。CSS ではどちらもそのまま使え、透明度が必要な場合は rgba() か 8 桁の HEX を使います。
印刷物にはどの値を使えばいいですか？
印刷は CMYK が基準です。ただしこのツールが表示する CMYK はプロファイルを適用しない単純変換値なので目安としてお使いください。実際の印刷では印刷所が指定する ICC プロファイルや特色（PANTONE）に従ってください。
コントラスト比はなぜ確認するのですか？
文字と背景の明るさの差が小さいと読みづらくなります。ウェブアクセシビリティ指針（WCAG 2.1）は本文に 4.5:1 以上、18pt 以上の大きい文字に 3:1 以上を推奨しています。
アップロードした画像はどこに保存されますか？
どこにも保存されません。画像はブラウザ内でのみ開かれて色の読み取りに使われ、ページを閉じると消えます。保存した色もこのブラウザのローカルストレージに残るだけです。
無料ですか？
はい、登録なしで無料で使えます。運営費はページに表示される広告でまかなっています。