本文へスキップ

カラーツール · カラーピッカーと配色提案

色を選ぶとHEX、RGB、HSL、HSB（HSV）、CMYKのコードをひと目で表示し、クリックでコピーできるカラーピッカーです。色相環で補色・類似色・トライアド・テトラード・モノクロマティックなどの配色ルールを選ぶと、合う5色のパレットを自動で提案します。背景と文字のコントラスト（WCAG）スコアも確認でき、P型・D型・T型色覚やグレースケールに切り替えて、色覚特性のある人にも区別できる配色かどうかを点検できます。気に入ったパレットはブラウザに保存できます。インストール不要で、ブラウザですぐに使えます。

色を選ぶと5種類のコードをすぐに表示し、色相環でルールを選ぶと合う配色を提案します。

  1. カラーピッカーで色を選ぶとHEX・RGBなど5種類のコードが表示され、コードを押すとコピーされます。
  2. 配色提案でルール（補色・類似色・トライアド…）を選ぶと、合う5色と文字のコントラスト（WCAG）判定が一緒に変わります。
  3. 例: ブランドカラーを選んで補色ルールを押し、CSS変数としてコピーすれば、スタイルシートにそのまま貼り付けられます。

配色提案色相環でルールを選ぶと、合う5色が連動して動きます

色覚シミュレーション

保存したパレットこのブラウザにだけ保存されます

まだ保存したパレットはありません。上の「このパレットを保存」を押してみてください。

よくある質問

HSBとHSVは違うものですか？
同じ値です。HSB(Hue·Saturation·Brightness)はAdobeが使う名前で、HSV(Value)は同じモデルの別名です。このツールは両者を同じものとして扱います。HSLとは違います — HSLのL（輝度）は50%で純色になりますが、HSBのB（明度）は100%で純色になります。
配色ルール（補色・類似色など）は何を基準にしていますか？
色相環の角度（Hue）を基準にします。補色は基準色の反対側（180°）、類似色は両隣30°、トライアドは120°間隔、テトラードは90°間隔です。モノクロマティックは同じ色相で彩度・明度だけを変えます。Adobe Colorのルールと同じ方式です。
コントラストスコア（WCAG）はどう読みますか？
2色の明るさの比率です。本文の文字は4.5以上（AA）、大きな文字・見出しは3.0以上あれば読みやすくなります。7.0以上ならAAAで、とてもくっきり見えます。パレットの最初の色を背景、残りを文字として計算して表示します。
色覚シミュレーションは正確ですか？
Machadoら（2009）がまとめた色覚変換行列をそのまま適用した近似です。色覚特性の程度は人によって異なり、「こう見える」をそのまま再現することはできませんが、2色が互いに区別できるかを見極めるには十分です。赤緑色覚異常は男性の約5%と最も多いので、緑と赤を並べて使う配色は必ず一度確認してみてください。グレースケールでも区別できるなら、色だけに頼らない安全な配色です。プレビューは画面の塗りだけを変え、コピー・保存されるHEX値は常に元の色です。
「画面から色を取得」が見当たりません。
ブラウザがEyeDropper APIに対応している場合だけ表示されます（デスクトップ版 Chrome・Edge など）。対応していなければボタンは隠れるので、代わりにHEX値を直接貼り付けてください。
保存したパレットはほかの端末でも見られますか？
いいえ。このサイトはサーバーにデータを置きません。保存したパレットと最後の色はこのブラウザにだけ保管され、シークレットウィンドウやほかの端末では表示されません。
すべての質問を見る

関連ツール

QRコード作成・読取 QRコードを作成し、カメラや画像でQR・バーコードを読み取り キャンバス 切り抜き・回転・フィルター・リサイズ・モザイク・お絵描き デザインシステム このサイトで使っている色・文字・余白のトークン集
コピーしました