カラーパレット生成は, 1 つの起始色相を調和のとれた色の一組にします. 配色モードとベースの色相を選ぶと, ツールが同伴カラーを並べます. デフォルト表示は補色のペアで, 青の #428CD7 とオレンジの #D78C42 で, ページを読み込むと同時に計算済みです. すべてブラウザ内で動くため, 作ったパレットは端末の外に出ません.
5 種の配色モード, 1 つのスライダー
5 つのモードボタンがツールの中核です. 補色は 2 色で, ベースの色相と 180 度違い. 類似色は 4 色で, 片側 30 度と 60 度, もう片側 30 度. 三色調は 3 色で 120 度間隔. 四元色は 90, 180, 270 度の 4 色. 分割補色は 150 度と 210 度の 3 色です. 色相スライダーは 0 から 360, デフォルトは 210 のミディアムブルー. 角度はすべてカラーホイールをラップするので, ベース 340 の類似色は 340, 10, 40, 310 の 4 色相になります.
固定の彩度と明度, 65 と 55
彩度や明度のスライダーはありません. 両者は定数で, ツールが出力するすべての色は彩度 65%, 明度 55% で計算され, 変化する的是色相だけです. モードを切り替えてもスライダーを動かしても, パレット内の全色が同じ視覚的な重さを保ち, ランダムな寄せ集めではなく 1 つのファミリーとして読み取れます. 変換は標準の HSL から 16 進へのアルゴリズムで, 結果は常に 7 文字の大文字 16 進コード, 例 #428CD7.
パレットはリアルタイムに更新される
生成ボタンはありません. モードボタンをクリックするたびに, スライダーを動かすたびに, パレットが即座に再計算され, スウォッチは中間ステップなしで入力を追います. 四元色をクリックすると 2 個だったスウォッチが即座に 4 個に, 色相を数度だけ動かせば全スウォッチが同方向にずれます. 探索が速いのはこのためで, 数秒でホイール全域を掃いて, 見た目良い所で止められます.
ランダム化ボタン
サイコロボタンは 0 から 359 の整数色相を 1 つ選び, スライダーをそこにジャンプさせ, 今選んでいるモードはそのままに, 自分をスライダーでそこまでドラッグした場合と全く同じ結果を再計算します. ずっと同じ色を繰り返している状態を断ち切るのに役立ちます. 何度か振ってしっくりくるベース色相が来たら, スライダーで手動微調整してください.
色のコピー, 1 色ずつ, または全部まとめて
スウォッチを 1 つクリックすると, その 1 色の 16 進値だけクリップボードにコピーされます. 例として色相 210 の類似色セットから #8C42D7. すべてコピーボタンは, 全体をカンマ区切りのリストとしてコピーし, デフォルトの補色ペアなら #428CD7, #D78C42 のようになります. 値は常に大文字 6 桁 16 進で, CSS, デザインファイル, チャットへの貼り付けにフォーマット変換は不要です.
スウォッチのラベルが白と濃い色で切り替わる理由
各スウォッチはホバー時に 16 進値を表示し, 背景の明るさによって文字は白かほぼ黒になります. 判定は単純な輝度スコアで, 赤緑青のチャネルを 0.299, 0.587, 0.114 の重みで合計し, スコアが 186 より厳密に大きい場合は濃い文字, それ以外は白を使います. これは速い明暗のヒューリスティックで, WCAG のコントラスト比ではありません. ラベルの可読性は保ちますが, その色の上の文字がアクセシビリティ基準に合格するかは教えてくれません.
ツールが保持するもの, 次への道
何も保存されず, 何もブラウザの外に出ません. モードと色相はページ上にのみ存在し, 再読み込みすると色相 210 の補色モードにリセットされます. 気に入ったセットができたら, 先にも使えます. カラー変換で 16 進値を rgb() や hsl() に変えてスタイルシートに書き出し, WCAGカラーコントラストチェッカーで前景と背景の組み合わせを一度通してから確定し, バナーにするなら グラデーション生成にセットを渡してグラデーションに広げます. そのコントラスト判定の詳しい仕組みは, コントラストチェッカー利用ガイドで 4 つの閾値を順に解説しています.