Color Palette
Color Palette — ブラウザで動作します。入力は保存されません。
調和カラーパレット
値を入力してから「計算する」を押してください。
使い方
- 基準HEXに#で始まる6桁の色を入れます。初期値は#3b82f6です。
- 調和方式で類似色、補色、三原色、単色トーンから選びます。
- 生成を押すと5色スウォッチが格子で表示されます。
- HEX一覧コピーでコードを持っていき、デザインツールに貼ります。
- テキスト対比はこの画面が保証しないので、WCAG対比検査で別に確認してください。リセットは初期色に戻します。
ポイント
色パレット生成はブランドカラー、UIポイント色、スライドテーマを決めるとき、基準HEX1つで5色を抜きます。HSL色相環で類似色は隣接角度、補色は反対、三原色は120度間隔、単色トーンは同じ色相(Hue)の明るさだけ変えます。CMYK・アルファ（透明度）は扱いません。ブランドメインカラーHEX1つで類似色・補色・三原色・単色トーン5色を抜き、UI・スライドパレットを試すツールです。UIポイント色を選んだあと類似・補色・三原・単色5色を抜いて試案を試すパレット生成ツールです。
アクセシビリティ（明度対比）まで合わせてはくれません。背景・本文の組み合わせはWCAG色対比ツールでAA/AAAを見てください。結果はデザイン参考用で、サーバーに色値は送信されません。HSL色相環の角度だけ回すのでアクセシビリティ対比率は計算しません。本文色はWCAG対比検査と一緒に見てください。明度対比は計算しないので、本文・ボタンに使う前にWCAG対比検査でAAを確認する流れが安全です。
例
基準#3b82f6、調和方式類似色で生成すると青い系統の5マスが並び、HEX一覧をコピーできます。補色に変えるとオレンジ側の対比色が混ざります。単色トーンは同じブルーの明るい・暗い段階5色です。常に5個です。#ef4444補色は青緑系統が混ざった5色、単色トーンは同じ赤の明るさ段階です。HEX一覧コピーでデザインツールに貼ります。#22c55e三原色は色相環を120度で分けた3方向が5マスに配置されます。HEX一覧コピーでデザインツールに貼ります。
よくある質問
色パレットはWCAGアクセシビリティ対比を保証しますか？
いいえ。対比はWCAG対比ツールで別に確認してください。ボタン・本文の組み合わせは対比不足がよくあるので、パレットだけ信じて使わないでください。薄い背景の上の薄い文字は不足がよくあります。
CMYK印刷用パレットも出ますか？
HEX/RGBベースです。印刷変換は別です。印刷CMYK変換は別プロセスです。印刷用CMYKは別変換が必要です。
透明度（アルファ）HEXも使いますか？
対応しません。#RRGGBBだけ使います。8桁HEXアルファは切り捨てるかエラーになることがあります。アルファのあるHEXは使わないでください。
パレットは何色出ますか？
常に5色です。常に5マスです。個数を増やすオプションはありません。色の個数は常に5です。
基準色はサーバーに送信されますか？
いいえ。ブラウザーでだけ計算します。基準色はサーバーに保存されません。基準HEXは保存されません。
類似色・補色・三原色の違いは何ですか？
類似色は隣の色、補色は反対、三原色は色相環を3つに分けた角度です。単色は明度だけ変えます。類似色は隣接Hue、三原色は120度間隔です。単色トーンはHueを固定して明るさだけ変えます。
最終確認日: 2026-09-04