カラー入力
色を選択または入力
有効な色です。
ウェブデザインツール
カラーピッカー
標準ピッカー、HEX、精密なRGBコントロールで色を選び、形式のコピー、配色の検討、明色・暗色の確認、読みやすい文字色の選択ができます。
ライブプレビュー
カラー値
色コードをコピー
HEX#16735F
RGBrgb(22, 115, 95)
HSLhsl(167.1, 67.9%, 26.9%)
HSVhsv(167.1, 80.9%, 45.1%)
CMYK概算cmyk(80.9%, 0%, 17.4%, 54.9%)
CSS変数--color: #16735F;
アクセシビリティ
文字コントラスト
選択した色の上に表示するサンプル文字
白い文字5.48:1
黒い文字3.83:1
推奨文字色白い文字を使用してください。
相対輝度0.142
比率はWCAG相対輝度を使用します。通常文字はAAで4.5:1、AAAで7:1、大きな文字はAAで3:1が必要です。
色の調和
生成した配色
配色モードを選び、任意の色見本を選択すると新しい基準色になります。
カラースケール
明色と暗色
明色
暗色
選択した色相と彩度を保ったまま、明色は白へ、暗色は黒へ近づけます。
カラーピッカーの注意点
HEXHEXは簡潔で、CSS、デザイントークン、共有仕様に適しています。
RGBRGBはブラウザーやCanvas向けに赤、緑、青の各チャンネルを直接調整できます。
HSLHSLは色相、彩度、輝度を分けるため、関連するインターフェース色を作りやすくなります。
WCAGWCAGコントラスト比は、選択した背景で読みやすい黒または白の文字を選ぶ助けになります。
よくある質問
HEXカラーピッカーとして使えますか？
はい。標準ピッカーを使うか、厳密な3桁または6桁のHEXを入力し、HEX、RGB、HSL、HSV、CMYK概算、CSS変数をコピーできます。
スポイトはすべてのブラウザーで使えますか？
いいえ。対応環境ではEyeDropper APIを使用し、未対応または選択をキャンセルした場合は明確なメッセージを表示します。
配色はどのように生成されますか？
補色、類似色、トライアド、分裂補色、テトラード、モノクロの配色を、選択色のHSL値からブラウザー内で計算します。
文字に必要なコントラスト比は？
WCAG AAは通常文字で4.5:1、大きな文字で3:1が必要です。AAAは通常文字で7:1が必要です。