配色ツール

無料の配色ツール。カラーホイールで色を選ぶと補色・類似色・トライアドの配色を自動提案。複数のカラーパレットを並べて比較し、WCAGコントラストを確認、画像保存や共有リンク、CSS変数の書き出しも。

明るさ

カラーホイールをドラッグ：円周方向で色相、外側に引くほど鮮やかに。下のパレットの色をクリックすると、調整する色を切り替えられます。

マイパレット

チェックするパレット

行が文字色、列が背景色です。通常の文字は AA（4.5:1）、大きい文字は 3:1 以上が必要です。

🔒 計算はすべてブラウザ内で行われ、データがサーバーに送信されることはありません。

パレットの色をクリックして調整する色を選び、上のカラーホイールをドラッグします。円周方向で色相、外側に引くほど鮮やかになり、下のスライダーで明るさを調整します。
「おすすめ配色」は現在の色から補色・類似色・トライアドなどの配色を作ります。色をクリックしてパレットに追加するか、まとめて新しいパレットにできます。
「並べて比較」で合う配色を探し、「コントラストチェック」で文字が読みやすいか確認したら、ワンクリックで CSS 変数を書き出せます。

おすすめ配色はどうやって作られていますか？

色彩理論の定番ルールに沿って、現在の色の色相をカラーホイール上で回転させています。補色は 180°、類似色は左右に 30°ずつ、トライアドは 120°ごと、テトラードは 90°ごと。モノクロマティックは色相を保ったまま明暗を変えます。

WCAG コントラスト比とは？

WCAG はウェブアクセシビリティの国際ガイドラインです。文字と背景のコントラスト比は、通常の文字で 4.5:1 以上（AA）、大きい文字で 3:1 以上が必要で、7:1 以上なら最高の AAA レベルです。

ブランドカラーのコードを貼り付けられますか？

はい。色の横の入力欄に #RRGGBB、#RGB、rgb()、hsl()、CSS の色名（tomato など）を貼り付けると、自動で HEX に変換されます。

パレットは保存されますか？

パレットはこの端末のブラウザ内に保存され、次回開いたときも残っています。サーバーには送信されません。