カラーパレット作成・配色ツール

IME の全角入力もそのまま使える

日本語入力をオンにしたまま ＃Ｆ０８３００ と打っても、Unicode の互換正規化（NFKC）で半角に直して #F08300 として読みます。色名や関数以外の文字はエラーになり、何が問題かを表示します。色として読めない間は前の色の配色とコードを消し、コピーもできなくなるので、古い結果を取り違えてコピーすることはありません。

7 つの配色の決め方

モノクロマティック以外は、ベースの彩度と明度（OKLCH では明度と彩度）を保ったまま色相だけを回します。テトラードは補色のペア 2 組でできる長方形、スクエアは 90° ずつの正方形で、別のカードにしています。ベースを #F08300 にしたときの HSL の結果です。

モノクロマティックは明度を 5 段階に固定し、ベースに最も近い段（ここではベースの明度 47.1% に近い 50%）をベース自身に置き換えます。そのためベースは必ず 1 回だけ現れます。HSL の計算は CSS Color 4 の 7 章に従い、ちょうど .5 になるチャンネルは CSS と同じく切り上げます。1 色の濃淡を 50–950 の 11 段階でほしいときはカラーシェード生成器を使ってください。

HSL と OKLCH の違いと、色覚への配慮

HSL の色相は計算が簡単な反面、見た目の明るさがそろいません。#F08300 のトライアドは #00F083 がかなり明るく、#8300F0 は暗くなります。OKLCH の色相環は Oklab の極座標で色相を回し、明度と彩度を保つので、トライアドは #F08300、#00C1A4、#B288FF になり、3 色の明度（OKLCH L）は 71.6〜72.5% にそろいます。

明るさがそろうと、同じ文字色を全部の色に載せやすくなります。一方で、色の区別は色相の差だけに頼ることになります。上の OKLCH トライアドは、どの 2 色を比べてもコントラスト比が 1.01〜1.17:1 しかありません。HSL トライアドでは #F08300 と #00F083 が 1.73:1、#00F083 と #8300F0 が 4.28:1 です。

カラーユニバーサルデザイン機構（CUDO）の推奨配色セット ガイドブックは「できるだけ明度差をつけた配色にしましょう」と書き、赤と緑を使う場合は赤を黄みに、緑を青みに寄せると見分けやすいとしています。グラフの系列や地図の塗り分けのように色で意味を分ける場面では、OKLCH の配色をそのまま使わず、モノクロマティックで明度差をつけるか推奨配色セットを使い、色覚シミュレーターで確認してください。

OKLCH で回した色は sRGB の外に出ることがあります。そのときは CSS Color 4 の色域マッピングで彩度を下げ、◆ 印を付け、何色を調整したかをステータス欄に出します。#F08300 では 24 色中 14 色が対象でした。色の上の文字は WCAG 2.2 の相対輝度で、黒と白に近い色のうちコントラストの高いほうを選んでいます。

コードとして書き出す

「コード」で選んだ形式が、カードの「コピー」とページ下部のパネルに使われます。値の一覧、:root 内の CSS 変数、SCSS 変数、Tailwind v4 の @theme、Tailwind v3 の設定ファイル、JSON から選べます。変数名は配色名と番号です。補色を HEX・SCSS でコピーすると次のようになります。

$complementary-1: #F08300;
$complementary-2: #006DF0;

テストでは Dart Sass と Tailwind v4 で実際にコンパイルし、出力がそのまま使えることを確認しています。HSL と OKLCH の値は HEX に戻したときに同じ色になるだけの小数を残します。

ほかの配色ツールとの違い

2026-10-01 に「カラーパレット 作成」の検索結果に出る colortool.blog のカラーパレット ジェネレーターで試しました。ベースに 3B82F6 を入れて補色を生成すると、1 色目が #3C83F6 になり、入力した色がパレットに残りませんでした。入力は 6 桁の HEX だけで、rgb(59, 130, 246) を貼ると入力欄が「B59」に書き換わり「基準色は6桁のHEXで入力してください」と表示されました。このツールはベースを入力どおりに残し、3 桁の HEX、rgb()、hsl()、oklch()、色名も読み取ります。

Adobe Color は別の色相環を使います。同じ #3B82F6 のトライアドは Adobe Color では #C5F53B と #F5533B、HSL の色相環では #F63B82 と #82F63B です。どちらが正しいということではなく、このツールはどの色相環かを明示しています。色のロックとシャッフル、画像からの抽出、アカウントへの保存はこのツールにはありません。画像から色を取るときは画像カラーパレット抽出を使ってください。