配色パレット生成

基準色を入れると、色相環で角度を回した6通りの配色を表示します。色をタップするとHEXをコピー、セットごとCSS変数としてもコピーできます。

使い方

  1. HEX・rgb()・hsl() か色選びで基準色を決めます。
  2. 補色・類似色・三色配色など6通りを見比べます。
  3. 色をタップしてHEXをコピー、またはセットをCSS変数でコピーします。

配色はHSLの色相だけを回し、彩度と明度は基準色のままです。パステルを入れればパステルの配色、濃い色を入れれば濃い配色になります。

各色の数値は表示中の文字色との WCAG 対比値です。本文は4.5:1、大きな見出しは3:1が目安です。

よくある質問

補色はどう決まりますか?

色相環で180°反対側の色です。対比が最も強く強調に向きますが、広い面で並べると目が疲れます — 主色に対して1~2割の面積が無難です。

どの配色を選べばいいですか?

背景やカードなど広い面には類似色か単色配色が安全です。ボタンやバッジのように目立たせたい要素には補色や分裂補色が合います。

CSS変数のコピーはどんな形式ですか?

`--triadic-1: #3366CC;` のようにセット名と番号が付いたカスタムプロパティの一覧です。`:root` に貼るだけで使えます。

色の値は送信されますか?

いいえ。変換も配色計算もすべてブラウザ内で終わります。

関連ツール

  • 開発者ツール — JSON・Base64・URL・正規表現・タイムスタンプ・JWT・Cron・CIDR・Diff。
  • 画像圧縮 — アップロードなしでブラウザ上で画像を圧縮・リサイズします。
  • 文字数カウント — 文字・単語・行・バイト数をリアルタイムでカウントします。
  • QRコード生成機 — リンクやテキストをQRコードにしてPNGで保存します。