カラーパレット生成ツール

ベースの色を1つ決めると、補色や類似色など6種類の配色ルールで5色のパレットを作るツールです。色をクリックすればHEXがコピーされ、☆を押せばお気に入りとして端末に残ります。バナーやサムネイルの配色を、勘だけで決めずに済ませたいときに使っています。

こんなときに使う

• チームカラーの青を1色だけ決めていて、そこから見出しや強調に使う色を足したいとき
• サムネイルの背景色に対して、目立つが浮かない文字色の候補を探しているとき
• 同系統でトーン違いの5色を作り、資料のグラフに順番に割り当てたいとき
• 気に入った色のHEXを、次の制作まで控えておきたいとき

使い方

1. 「ベース色」のカラーピッカーで色を選ぶか、隣のHEX欄に6桁のコードを直接入力します。初期値は #3B82F6 です。
2. 配色タイプのボタン(補色・類似色・トライアド・スプリット補色・テトラード・モノクロ)から1つ選びます。
3. 下に5色のパレットが出ます。色をクリックするとHEXがクリップボードにコピーされ、表示が「コピーしました」に変わります。
4. 残しておきたい色はカード右上の ☆ を押します。下部のお気に入り欄に追加され、そこからもクリックでコピーできます。
5. 手がかりがないときは「🎲 ランダム」を押すと、彩度55〜90・明度40〜65の範囲でベース色が選び直されます。

仕様と機能

配色タイプ	生成の内容
補色	ベースと色相+180度、それぞれ明度を±18した5色
類似色	色相を −60 / −30 / 0 / +30 / +60 度ずらした5色
トライアド	色相を120度ずつ3分割し、うち2色に明度+15の派生を追加
スプリット補色	+150度と+210度に、ベースの明るい版と補色の暗い版を加えた5色
テトラード	色相を90度ずつ4分割し、ベースの明度+18を追加
モノクロ	色相・彩度は固定で、明度を −30 / −15 / 0 / +15 / +30

内部では入力されたHEXをHSLに変換し、色相と明度を動かしてからHEXに戻しています。明度は 8〜92(モノクロのみ 6〜94)の範囲に制限し、真っ黒や真っ白に潰れないようにしています。各カードのHEX文字は、背景色の相対輝度を計算して濃いグレーか白かを自動で切り替えます。お気に入りは最大24色まで、新しいものが先頭に入り、localStorage(color-palette-favorites-v1)に保存されます。

作るときに決めたこと

配色ルールをそのまま出さず、明度をずらした派生色を混ぜているのは理由があります。補色を教科書どおりに出すと2色しか得られず、実際の制作では使いどころが足りません。かといって10色出すと選べなくなります。5色で、うち何色かは同系のトーン違い、という構成が、見出し・本文・背景・アクセントに割り当てやすい最小単位だと判断しました。

明度に上下の制限を付けたのは、暗い色をベースにしたときに補色側が黒に沈んで区別できなくなったからです。8〜92という数字は、実際に何色か試して、端でも色味が残る境目を選びました。

彩度は動かしていません。彩度まで自動で変えると、生成される色がベース色から離れすぎて「自分が選んだ色から作った」という感覚がなくなります。ここは触らないほうが道具として素直だと考えました。パレットの書き出し機能は入れず、1色ずつのコピーに絞っています。使うときは結局、必要な色だけを1つずつ貼るからです。

注意点

• HEXは6桁(#RRGGBB)のみ受け付けます。3桁の省略形やrgb()表記には対応していません。
• コピーはブラウザのクリップボード機能を使うため、対応していない環境や権限が拒否された場合は動作しません。
• 生成される配色は色相環に基づく機械的な計算結果です。文字色と背景色の組み合わせについては、別途コントラスト比の確認をおすすめします。
• お気に入りはこの端末のブラウザ内(localStorage)にのみ保存され、外部には送信されません。