デザインで使う色コードHEX・RGB・HSL変換ガイド

Webサイトを作るときに使う色コード。デザインツールで選んだ色をCSSに書くとき、形式が合わず変換が必要になることがあります。

カラーコード変換ツールを使えば、HEX・RGB・HSLを相互に変換できます。

3つの色形式の違い

HEX（16進数カラーコード）

#FF6B6B のような形式です。Webページのスタイル指定で最もよく使われます。

先頭の # に続く6桁（または3桁）の16進数で、赤・緑・青を表します。デザインツールからコピーする色コードは、たいていこの形式です。

RGB（赤・緑・青）

rgb(255, 107, 107) のような形式です。赤・緑・青をそれぞれ0〜255の数値で表します。

プログラムで色を扱うときや、Officeソフトのカラー設定でよく使われます。透明度を加えた rgba(255, 107, 107, 0.5) もあります。

HSL（色相・彩度・明度）

hsl(0, 100%, 71%) のような形式です。色相・彩度・明度で色を表します。

「同じ色味で少し暗く」のような調整がしやすい形式です。デザインシステムやテーマカラーの設計に向いています。

ツールの使い方

1. 色を入力: HEX・RGB・HSLのいずれかの欄に値を入れます
2. 自動変換: 1つの形式を入れると、他の形式に自動で変換されます
3. スライダー調整: カラーピッカーやスライダーで視覚的に微調整できます
4. コピー: 使いたい形式の「コピー」ボタンでCSSにすぐ貼れます

こんな場面で使ってみよう

デザインカンプからのコーディング

Figmaなどのカンプの色をCSSに反映するとき、ツールが示す形式とCSSで使いたい形式が違うことがあります。変換ツールがあれば、形式を気にせずに済みます。

会社資料・スライドの色合わせ

ブランドカラーがHEXで指定されていても、PowerPointやGoogleスライドはRGB入力が多いです。

カラーコード変換ツールでRGBに変換し、Officeのカラーピッカーに入れれば、デザイン通りの色を再現できます。

Webデザインのテーマカラー設計

サイト全体のテーマカラーを設計するとき、HSL形式が便利です。色相を固定して明度だけ変えれば、統一感のある配色を作れます。

ブランドカラーをCanvaなどで使う

ブランドカラーのHEXがあっても、Canvaにそのまま入れられない場面があります。RGBに変換すれば、カラーピッカーに入力して同じ色を再現できます。

使用例

たとえば、コーポレートサイトを請け負ったWeb制作者が「ブランドカラーは#1A5276」とだけ伝えられた場面です。提案資料はRGB、CSSはHEXで使い分けたいとします。

カラーコード変換ツールにHEXを貼ると、RGB（26, 82, 118）やHSL（204, 64%, 28%）に即変換されます。用途に合わせて形式を切り替えるだけです。

安心して使えるポイント

カラーコード変換ツールはすべての変換をブラウザ内で処理します。入力した色データがサーバーに送信されることはありません。

関連ツール

• CSSグラデーション生成: 複数の色を使ったグラデーションのCSSコード生成に
• SVG最適化: SVG内のカラーコードを含むコードの軽量化に

まとめ

HEX・RGB・HSLは、同じ色を異なる方法で表したものです。デザインツールとCSSやOfficeソフトの間では、形式の変換が頻繁に必要になります。

カラーコード変換ツールを使えば、形式のズレを気にせず作業に集中できます。次のデザイン作業でぜひ活用してください。