カラースキームクリエーターとは？
カラースキームクリエーターは、カラーセオリーのルールに基づいてベースカラーから完全なカラーパレットを生成するツールです。モノクロマティック・補色・分裂補色・二分裂補色・トライアド・テトラード・類似色スキームを選んで各スウォッチを調整し、共有リンクをコピーしたり、CSS変数・Tailwind設定でエクスポートしたり、HEXコードでコピーできます。
任意のベース hex を選ぶと、色相環の標準的な回転で配色が生成されます。補色は 180 度、分裂補色は補色の左右となる 150 度と 210 度、トライアド(三色)は 120 度、テトラード(四色)は 90 度、アナログ(類似色)は左右へ少しずつ。シェードとティントは同じ色相のまま HSL の明度だけを一定の刻みで動かすので、それぞれ整った 5 段階のランプになります。各スウォッチは HEX・rgb()・hsl()・oklch() で個別にコピーでき、コントラストパネルは白・黒に対して WCAG AA / AAA を判定、見え方プレビューはパレット全体を 1型・2型・3型色覚のフィルターでワンクリック再描画します。共有リンクをコピーすれば、アカウントなしでパレットをブックマークしたり同僚に渡したりできます。
使い方
- カラーピッカーでベースカラーを選ぶか、16進コードを入力します。
- スキームの種類（モノクロ・補色・分裂補色・二分裂補色・トライアド・類似色・テトラード）を選択してパレットを生成します。
- 個々のHEXコードをコピーするか、CSS変数としてパレット全体をエクスポートするか、スウォッチ画像としてダウンロードします。
使用するタイミング
- ブランドの hex 一色から、新しいサイトやアプリのテーマ用パレット一式を作る。
- ノベルティを印刷する前に、ロゴ色にきれいな補色があるか確認する。
- Figma などのデザインツールを開かず、CSS カスタムプロパティだけ作る。
結果
ウェブ開発者がブランドのプライマリブルー（#3B82F6）を使ってトライアドスキームを生成し、補完的なオレンジとグリーンのトーンを作成してCSSカスタムプロパティとしてデザインシステムにエクスポートしました。
よくある質問
- トライアドとテトラードの違いは?
- トライアドは色相環で 120 度間隔の 3 色を使い、バランスの取れた組み合わせになります。テトラードは長方形を描く 4 色(補色ペア 2 組)で、バリエーションは増えますが視覚的にまとめるのが難しめです。
- シェードとティントはどう使い分ける?
- シェード(暗いバージョン)は明るい UI の文字・枠線・ホバー状態に向いています。ティント(明るいバージョン)は背景・無効状態・控えめなハイライトに使えます。多くのデザインシステムは両方のランプを必要とします。
- アクセシビリティのコントラスト比はチェックされますか?
- 対応しています。パレットの下にあるコントラストパネルが、各色の白と黒に対する WCAG 比と、AA・AAA の合否バッジを表示します。本文では 4.5:1 が一般的な基準で、多くの UI 用途を満たします。さらに見え方プレビューを 1型・2型・3型色覚に切り替えれば、色覚特性のあるユーザーにパレットがどう見えるかも確認できます。
- 類似色配色が補色配色より落ち着いて見えるのはなぜ?
- 類似色は色相環で隣り合っていて色系統が同じなので、視覚的な緊張が少なくなります。補色は環の反対側にあり、コントラストが最大で活発な印象になりますが、大面積で使うと目が疲れます。
- Tailwind 設定にエクスポートできますか?CSS 変数だけですか?
- 両方対応しています。CSS 変数はスタイルシートの :root にそのまま貼れます。Tailwind 形式は hex 値を theme.extend.colors オブジェクトで包んだ形になり、tailwind.config.js に貼り付けるだけです。