色の組合せツールを作ってみました。枠、背景、文字の 3色を自由に配色できます。
スライダーで調整しながら見た目を確認するので微妙な調整ができると思います。
調整は、HSV値（色相、彩度、明度）、または RGB値（赤、緑、青）で行います。
ツールに H、S、V という表示がが出てきますが
- H は Hue（色相） の頭文字
- S は Saturation（彩度）の頭文字
- V は Value（明度）の頭文字
です。
ツール
HSV
RGB
sample
他にもツール
text-shadow のサンプルを ジェネレータで自在に加工
css border-radius の使い方。円や扇をジェネレータで描いてみる使い方
スライダー
デフォルトで HSV の調整スライダーが表示されますが、アコーディオン の RGB をクリックすると RGB のスライダーが現れます。
HSV と RGB のスライダーは連動しています。片方を調整すると、もう片方も変化します。
RGB値を直接指定
RGB のテキストボックスに値を入力すると、そのまま画面に反映されます。
補色
補色ボタンを押すと、表示中の色が補色に変わります。
save、restore
save >、< restoreボタンが 2 つづありますが、調整中の配色を一時的に退避する際に使います。
css
css が表示されます。そのままスタイルシートに貼りつけても OK です。
サンプル
サンプルの配色をクリックすると、その色が反映されます。あまりセンスがないので、いいサンプルになっていないのですが。。。
JavaScript で計算
RGB と HSV の値は JavaScript で計算しています。計算プログラムは下記ページににのせています。
色の計算。RGB と HSV の変換を JavaScript で実装
彩度と明度について（余談）
彩度と明度の違いがいまいちわかりにくいです。彩度が鮮やかさ、明度が明るさという説明をよく見かけたりしますが、鮮やかさと明るさの違いがそもそも判りません。
彩度と明度が変わると RGB がどのように変化するか、そこに絞って大雑把にまとめると
まず、色相を固定した状態で
明度 を 強 めると RGB の 3色が 全体に大きく なります。
明度 を 弱 めると RGB の 3色が 全体に小さく なります。
（0 まで弱めると、RGB が すべて 0 つまり 黒 になります）
彩度 を 強 めると RGB の 3色が ばらつき ます。
彩度 を 弱 めると RGB の 3色が 近づき ます。
（0 まで弱めると、RGB がすべて等しくなり、つまり 灰色 になります）
上のツールでスライダーをいじると、なんとなく判ると思います。
