カラーピッカー＆パレット生成

画面上の色は 3 通りの方法で表せます。このツールでは、その 3 つが常に連動します。HEX は CSS やデザインツールで使われる短縮表記、RGB は赤・緑・青の光をどれだけ混ぜるかで色を表します。HSL（色相・彩度・明度）は、どんな色合いか、どれだけ鮮やかか、どれだけ明るいか暗いかという、人が色を考えるときの感覚に近い表し方です。標準のカラースウォッチをドラッグする、HEX コードを入力する、R/G/B または H/S/L の各欄を直接調整する、そのどれを行っても他の欄が即座に更新されます。慣れた考え方のまま、計算なしで色を行き来できます。

色相環は、6 つの代表的な配色ルールの土台です。選んだ基準色から、どのパターンも自動で生成されます。補色は反対側の色と組み合わせて最大のコントラストを作り、類似色は色相環で隣り合う色を選んで落ち着いたまとまりのある印象に仕上げます。トライアドとテトラードは 3 色または 4 色を色相環上に等間隔で配置し、にぎやかでもバランスの取れたパレットになります。スプリットコンプリメンタリーは、反対色そのものではなくその両隣の 2 色を使うことで補色の強さをやわらげます。モノクロマティックは 1 つの色相だけを使い明度だけを変えるため、ブランドカラーを濃淡で統一したい UI にはもっとも安全な選択です。

良いパレットが色彩理論から生まれるとは限りません。とりあえず何が出てくるか見てみたいときもあります。ランダムパレット生成（スペースキー、または「生成」をクリック）は、くすんだ色や淡すぎる色を避けるよう色相と明度を調整した 5 色を一度に作ります。残したいスウォッチのロックアイコンをクリックしてからもう一度生成すると、ロックしていない色だけが変わるので、Coolors のようなツールと同じ感覚でパレットを少しずつ組み立てられます。スウォッチをクリックするとその HEX コードをコピーでき、パレット下のボタンから全体を CSS カスタムプロパティ、SCSS 変数、Tailwind 設定のスニペット、JSON 配列としてコピーしたり、Illustrator や Photoshop 用の Adobe .ase スウォッチファイルを書き出したりできます。任意の画像からパレットを抽出する処理も端末内で行われ、アップロードされません。気に入ったパレットは、ブラウザに保存して後で使えます。

見た目のよい色が、使いやすい色とは限りません。背景と明るさが近すぎる色の文字は読みづらく、Web Content Accessibility Guidelines（WCAG）はこれに具体的な基準を定めています。通常のテキストでは、コントラスト比 4.5:1 以上で AA レベル、より厳しい AAA レベルでは 7:1 以上が必要です。コントラストチェッカーは、WCAG 仕様が定める相対輝度の計算式を使って、選んだ色と白文字・黒文字それぞれとの正確な比率を算出し、組み合わせごとに合否を表示します。コントラスト不足のボタンや見出しを、公開後ではなく公開前に見つけられます。