💡 どんなときに使うか（実務でのユースケース）
- FigmaやPhotoshopなどデザインツールの色を、CSSコーディング用のHEXやRGBに変換したいとき
-
CSSで設定されている
rgba()の透過色を、不透明な HEX コードに直して確認したいとき - Web用のRGBカラーを、チラシなど印刷物のデータ（CMYK）にする際の目安を見たいとき
- デザイナーとエンジニア間で、色指定の形式（HEX・RGBなど）を共有・統一したいとき
🔄 よくある変換パターン
このツールでは、どの入力欄からでも全フォーマットへ「一瞬で相互変換」できます。
-
HEX → RGB：
#3498dbをrgb(52, 152, 219)に変換します。CSS変数での管理や、後から透明度を操作したい場合によく使われます。 - RGB → HEX： デザインツールのRGB値を、CSSで短く書きやすい16進数にまとめたいときに便利です。
-
RGBA → HEX：
rgba(52, 152, 219, 0.5)のような透過色を、アルファ値付きの8桁HEX（#3498DB80）に直したいときに使います。 - RGB → CMYK： Webサイト用のロゴやベースカラーを、印刷物向けデータに流用する際の目安になります。
- CMYK → RGB： 印刷用に入稿されたDTPデータ（チラシ等）のカラーを、Webサイト上で再現したいときに使用します。
💻 CSSでのカラーコード指定例
変換したカラーコードは、用途に合わせてCSSへそのままコピー＆ペーストして使えます。
/* HEX（基本の指定） */
color: #3498db;
/* RGB（直感的な指定） */
background-color: rgb(52, 152, 219);
/* RGBA（半透明にしたい場合） */
border-color: rgba(52, 152, 219, 0.5);
color: #3498db;
/* RGB（直感的な指定） */
background-color: rgb(52, 152, 219);
/* RGBA（半透明にしたい場合） */
border-color: rgba(52, 152, 219, 0.5);
🤔 よくある質問 (FAQ)
HEXとRGBは何が違いますか？
HEX（16進数）とRGBはどちらも光の三原色（赤・緑・青）を表現する形式ですが、表記方法が異なります。HEXは「#FF0000」のようにシャープと6桁の英数字で短く書けるためWebデザインで主流です。RGBは「rgb(255,
0,
0)」のように0〜255の数値で直感的に色の強さを指定できます。
RGBAのAは何を意味しますか？
Aは「Alpha（アルファ値）」の略で、色の透明度（不透明度）を表します。0.0（完全な透明）から1.0（完全な不透明）までの数値で指定し、背景を透かして見せたい場合などに使用します。
RGBからCMYKに変換すると色が変わるのはなぜですか？
RGBはモニター等の「光」で色を表現するのに対し、CMYKはインク等の「色材」で表現するため、物理的に表現できる色の範囲（色域）が異なるためです。特に鮮やかな蛍光色などのRGBは、印刷用のCMYKではくすんだ色に変換されるのが正常な仕様です。
透過を含むカラーコードはどれですか？
透過（透明度）を含めることができるのは「RGBA」と「8桁のHEX」の2つです。当ツールでは、透明度スライダーを動かすと「rgba(r,
g, b,
a)」と「#RRGGBBAA」の2つの形式を同時に自動生成できます。
Web制作ではHEXとRGBのどちらを使えばよいですか？
基本的な文字色や背景色にはコードが短く済む「HEX」がよく使われます。一方、背景を半透明にしたい場合や、CSS変数（カスタムプロパティ）で色の計算をさせたい場合には「RGB（RGBA）」が便利です。用途に合わせて使い分けるのがおすすめです。