カラーピッカー・色変換
色を選ぶ、コードを貼り付ける、画像をクリックするだけで、すべての形式の色コード、合う配色、文字のコントラストチェックが得られます。
- 色・コード・画像を選ぶ
- HEX・RGB・HSL・HSV・CMYKで確認
- コードや配色をコピー、コントラストを確認
ツールを読み込み中…
ファイルが端末の外に送信されることはありません
色の形式
- HEX：Webデザインや CSS で使う6桁のコード（#14183d）。
- RGB：画面表示に使う赤・緑・青の値（0〜255）。
- HSLとHSV：色相・彩度・明度（または明るさ）。手で調整しやすい形式です。
- CMYK：印刷で使うシアン・マゼンタ・イエロー・ブラックの割合。
配色の作り方
- 補色は色相環の反対側にあり、強いコントラストになります。
- 類似色は隣り合っていて、落ち着いた調和のある印象です。
- トライアドは等間隔に並び、バランスがよく生き生きとした印象です。
- 色見本をクリックすると現在の色になり、コードをコピーできます。
読みやすい文字（WCAG）
文字色と背景色を選ぶと、コントラスト比を計算します。本文は4.5:1以上、大きな見出しは3:1以上（レベルAA）を目安にしましょう。7:1以上ならより厳しいレベルAAAを満たします。
よくある質問
どんな色コードを入力できますか？
HEX（#1e90ff または 1e90ff）、rgb()、hsl()、hsv()、cmyk()、navyやtomatoなどのCSS色名です。
写真やロゴから色を取るには？
「画像から取得」で画像を開き、好きな場所をクリックします。画像は端末から出ません。
CMYKの値は印刷にそのまま使えますか？
標準的な数式による変換です。実際の印刷色はプリンターのカラープロファイルに左右されるので、重要な案件は印刷所に確認してください。
コントラスト比とは？
背景に対する文字の読みやすさを示す値です。WCAGでは通常の文字に4.5:1以上、大きな文字に3:1以上（レベルAA）が求められます。
配色パレットはどう作られますか？
色相環上で色相を回転させて作ります。補色（180°）、類似色（±30°）、トライアド（120°）に加え、明るい色・暗い色の段階も表示します。
画面上のどこからでも色を取れますか？
はい。対応ブラウザー（パソコン版のChromeやEdgeなど）では「画面から取得」ボタンが表示されます。