カラーコード変換の基礎 — HEX・RGB・HSL・HSVの使い分け
Webデザイン・ゲーム開発・UI設計では複数のカラー形式を使い分ける場面が頻繁にあります。各形式の特徴を理解することで、ツール間の色の移し替えがスムーズになります。
HEX（16進数）カラーコードとは
HEXカラーは#RRGGBBの形式で赤・緑・青の各成分を00〜FFの16進数で表現します。CSSで最もよく使われる形式で、#FFFFFFが白、#000000が黒です。3桁の省略形（#RGB）は各桁を2回繰り返した値と同義で、#F00は#FF0000と同じ赤を表します。
RGB・RGBAの違いと使いどころ
RGBは赤・緑・青を0〜255の整数で指定するCSS形式（rgb(255, 0, 0)）です。RGBAはアルファチャンネル（0〜1の透明度）を加えたもので、半透明の重なり表現に使います。GameEngineではRGBA floatとして0〜1の小数で扱うことが多く、Unity・Godotなどはこの形式を採用しています。
HSL・HSVとは？直感的な色操作に最適
HSLは色相（Hue: 0〜360°）・彩度（Saturation: 0〜100%）・明度（Lightness: 0〜100%）の3値で色を表す方式です。HSVは明度をValueと呼び、同じ色を「暗くする」「淡くする」操作をHSL/HSVで行うと直感的です。デザインシステムでカラートーンを揃える際はHSL操作が便利です。
スポイト機能の使い方
スポイト（EyeDropper API）は画面上の任意のピクセルから色を取得する機能で、ChromeおよびEdgeで対応しています。参考デザインやWebページから色を抽出してコードに使いたいときに有効です。Color Deckのスポイト機能はデスクトップ版に搭載されており、常に最前面表示で他のアプリの画面から直接色をピックできます。