カラーコード変換の基礎 — HEX・RGB・HSL・HSVの使い分け
Webデザイン・ゲーム開発・UI設計では複数のカラー形式を使い分ける場面が頻繁にあります。各形式の特徴を理解することで、ツール間の色の移し替えがスムーズになります。
HEX（16進数）カラーコードとは
HEXカラーは#RRGGBBの形式で赤・緑・青の各成分を00〜FFの16進数で表現します。CSSで最もよく使われる形式で、#FFFFFFが白、#000000が黒です。3桁の省略形（#RGB）は各桁を2回繰り返した値と同義で、#F00は#FF0000と同じ赤を表します。CSS Color Level 4からはアルファチャンネル付きのHEX8形式（#RRGGBBAA）が使えるようになりました。例えば#FF000080は50%透明の赤です。Figma・Sketch・Adobe XDなどのデザインツールとの色の受け渡しはHEX形式が最も手軽です。
RGB・RGBAの違いと使いどころ
RGBは赤・緑・青を0〜255の整数で指定するCSS形式（rgb(255, 0, 0)）です。RGBAはアルファチャンネル（0〜1の透明度）を加えたもので、半透明の重なり表現に使います。GameEngineではRGBA floatとして0〜1の小数で扱うことが多く、Unity・Godotなどはこの形式を採用しています。CSS Color Level 4からはrgb(255 0 0 / 50%)のような空白区切りの新記法（Modern Color Syntax）が使えます。JavaScriptのCanvas APIやWebGLではrgba形式の値を直接渡すことができ、imageDataのデータ配列はR・G・B・Aの順の8ビット整数配列として扱われます。
HSL・HSVとは？直感的な色操作に最適
HSLは色相（Hue: 0〜360°）・彩度（Saturation: 0〜100%）・明度（Lightness: 0〜100%）の3値で色を表す方式です。HSVは明度をValueと呼び、同じ色を「暗くする」「淡くする」操作をHSL/HSVで行うと直感的です。デザインシステムでカラートーンを揃える際はHSL操作が便利です。Hue（色相）を固定したまま彩度と明度を調整するだけで色のバリエーションを統一感があるかたちで作れるため、Tailwindのカラーパレット設計にもHSLベースのアプローチが使われています。OKLCHはHSLより知覚的に均一な色空間で、色相環上の補色が同じ知覚的明るさになるよう設計されており、モダンなカラーシステム設計に推奨されています。
スポイト機能の使い方
スポイト（EyeDropper API）は画面上の任意のピクセルから色を取得する機能で、ChromeおよびEdgeで対応しています。参考デザインやWebページから色を抽出してコードに使いたいときに有効です。Color Deckのスポイト機能はデスクトップ版に搭載されており、常に最前面表示で他のアプリの画面から直接色をピックできます。実際の使い方として、デザイナーから受け取ったモックアップ画像の特定の色をコードに落としたいとき、既存のウェブサイトのブランドカラーを調べたいとき、動画や画像から配色のヒントを見つけたいときなどに重宝します。WebのEyeDropper APIはブラウザウィンドウ外には対応していませんが、デスクトップ版はOS全体の画面をピック範囲にできます。