Web制作やデザインの現場では、色の指定と調整は日々の作業の中でも非常に重要です。
HTMLやCSSでは、色を指定するためにさまざまな記法が用意されていますが、複数の書き方が混在しているため、場面によって使い分ける必要があります。
今回、Dottiqの無料ツール「Color Kit」において、日本語版・英語版ともにカラーコード変換の新機能を追加しました。
これにより、ただの変換ツールから一歩進んで、「色から広がるデザイン作業」を支援する存在へと進化しています。
🎨 rgbやhexなど、カラーコードの書き方って？
まず、カラーコードにはどんな種類があるのかを振り返ってみましょう。以下はWeb制作でよく使われる代表的な形式です：
- HEX（16進数）：
#ffcc00のような形式。3桁や6桁で色を指定する最も基本的な方法です。 - rgb()：
rgb(255, 204, 0)のように、Red / Green / Blue の値を0〜255で指定します。 - rgba()：
rgba(255, 204, 0, 0.5)のように、rgbに加えて透明度（alpha）も設定できる形式です。 - modern rgb（新構文）：
rgb(255 204 0 / 1)のように、スペース区切り＋スラッシュで透明度を表現するCSSの新しい記法です。
例えば、FigmaやPhotoshopなどのデザインツールから得られる色指定がHEX形式なのに、CSSフレームワーク（Tailwindなど）ではmodern rgbを求められる──そんなとき、変換ツールが役立ちます。
🚫 rgba()は非推奨？削除した理由について
今回のバージョンアップにあたり、従来表示していたrgba()形式は削除しました。理由は、modern rgb（例：rgb(255 204 0 / 1)）の登場によって、rgbaは事実上その上位互換に置き換わりつつあるためです。
modern rgbは、スペース区切りとスラッシュで構成されるCSSの新構文であり、透明度を指定しながらも構文がシンプルで、読みやすく、最新のブラウザではすでに広くサポートされています。
一方で、rgba()は構文が古く、カッコ内のカンマ区切りなどが冗長であるうえ、modern rgbと役割が重複しているため、今後のCSS設計においては優先度が下がっています。
Color Kitでは今後も、よりモダンで実用的な記法を優先して扱っていく方針です。
🌈 新機能：関連カラーの自動生成
今回のバージョンアップで最も大きな変更は、入力した色をもとに自動で関連カラーを生成できるようになった点です。生成されるのは次の5種類：
- 補色（Complementary）：色相を180度反転させた、対になる色
- 明るめ（Lighter）：明度を上げて明るい印象にした同系統色
- 暗め（Darker）：明度を下げた落ち着いたバリエーション
- 類似色＋：色相を+30度した近似色
- 類似色−：色相を−30度した近似色
これらの色は、HEX形式とmodern rgb形式の両方で表示され、コピーボタンですぐに値を取得できます。もちろん、各色の横にはプレビュー用のミニサンプルも表示されており、ビジュアル的にも分かりやすくなっています。
📋 Copyボタンのフォーマット切り替えに対応
これまでのColor KitではHEX形式のみコピーできましたが、今回から「HEX」または「rgb」形式をトグルで切り替えてコピーできるようになりました。たとえば：
- デザインツールに貼り付けたい → HEX形式
- CSSコードに埋め込みたい → rgb形式
このように、目的に合わせて柔軟に使い分けられるようになったのは、日々の細かい作業を効率化する上で大きな改善です。トグルの状態はリアルタイムで反映され、どのボタンを押しても現在の形式でコピーされるという仕組みです。
🛠️ 補色などはどうやって計算してる？
ここからは少し技術的な話になりますが、「関連カラーの生成」は単純な配列やテンプレートではなく、HSL（Hue, Saturation, Lightness）という色空間に変換してから演算しています。
たとえば、HEXやrgbからRGB値を取得し、次のようにHSLへ変換します：
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0;
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h *= 60;
}
return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
}ここで得られた「h（色相）」に対して +180, ±30 などの補正を行い、明度（l）を ±20 して「明るめ」「暗め」を作成。これらを再びrgbに戻し、変換結果として出力しています。
🔁 今後も少しずつ育てていきます
このアップデートにより、Color Kitは「入力した色をただ別形式に変換するだけ」のツールから、「そこから得られる色のバリエーションを提案してくれるツール」へと進化しました。今後は、
- グラデーションの自動生成
- アクセシビリティチェック（コントラスト比など）
- Tailwind CSSなど外部ツールとの連携支援
といった機能も視野に入れながら、少しずつ育てていきたいと考えています。