カラーコード変換ツールの使い方 — HEX・RGB・HSLの関係と色調整のコツ

公開日：2026年7月20日対象ツール：カラーコード変換

Webで色を扱うとき、同じ一つの色に HEX・RGB・HSL という複数の書き方があります。デザインカンプは #3B5BDB のようなHEX指定なのに、CSSでは rgb() で書きたい、少しだけ暗くした色が欲しい——こうした場面で「記法の関係」と「調整のしやすさ」を理解しておくと作業が一気に楽になります。この記事では3つの表し方のつながりと実務のコツを整理し、最後にこのツールでの変換手順を紹介します。

HEX・RGB・HSLは同じ色の違う表し方

まず押さえたいのは、この3つはどれも同じ色を指す別の言い方だということです。

HEXは #RRGGBB の形で、赤・緑・青の強さを16進数2桁ずつ並べます。各2桁は 00〜FF（10進で0〜255）に対応します。
RGBは同じ赤・緑・青を 0〜255 の整数で表したもので、rgb(59, 91, 219) のように書きます。つまりHEXとRGBは「光の三原色を並べる」点でまったく同じ仕組みで、数え方（16進か10進か）が違うだけです。
HSLは色相・彩度・明度という別の切り口で同じ色を表します。RGBの3つの値から計算で導ける、いわば座標の取り替えです。

たとえば #3B5BDB は rgb(59, 91, 219)、hsl(228, 69%, 55%) のいずれでも同じ青を指します（3B・5B・DB が10進で59・91・219）。

HSLが「色の調整」に強い理由

RGBは色を作るには向きますが、「もう少し暗く」「少しくすませたい」といった微調整には不向きです。赤・緑・青を同時にいじる必要があり、どう動かせば目的の変化になるかが直感的でないからです。

HSLは色を色相（Hue: 0〜360°）・彩度（Saturation: %）・明度（Lightness: %）の3軸に分けます。色味はそのままに明るさだけ変えたいなら明度の数字だけ、鮮やかさを抑えたいなら彩度だけを動かせばよく、狙いと操作が一対一で対応します。ボタンのホバー色や無効時の淡い色を作るときは、色相を固定して明度を上下させると、統一感のある色のバリエーションを手早く用意できます。

透明度（アルファ）とWebでの色指定

色には不透明度を加えた表し方もあります。RGBに透明度を足した rgba(59, 91, 219, 0.5) や、HEXを8桁にした #RRGGBBAA 形式がそれで、末尾で 0（透明）〜1（不透明）や 00〜FF の透明度を指定します。重ねた要素をうっすら透かしたい背景やオーバーレイでよく使います。ただし本ツールは不透明色のみを扱うため、アルファ値は変換対象外です。透明度が必要な場合は、変換で得たRGB値の末尾に透明度を書き足す形で対応してください。

色選びのコツとアクセシビリティ

複数の色を並べて使うときは、HSLの明度をそろえると全体のトーンが安定し、ばらついた印象になりにくくなります。逆に、文字と背景のように「読ませる」組み合わせでは、明度差をしっかり付けることが大切です。

この明度差はコントラストと呼ばれ、アクセシビリティの観点では本文テキストで背景との比が 4.5:1 以上あることが一つの目安とされています。淡いグレーの文字を白背景に置くと読みづらくなるのはこのためで、色を決めたら「十分に濃さの差があるか」を最後に確認する習慣をつけると安心です。

ありがちな失敗

桁数ミス：HEXは #RRGGBB の6桁が基本です。#3B5D のように桁が足りないと正しく解釈されません。3桁の短縮形（#f00 など）は各桁を2回繰り返した #ff0000 として扱われる特別な形なので、これと6桁を混同しないよう注意します。
#（シャープ）忘れ：CSSのHEXは先頭に # が必要です。3b5bdb とだけ書くと色として認識されません。
RGBの範囲外：R・G・Bは 0〜255 の整数です。300 のような値や小数は想定外の結果になります。

このツールでの変換方法

HEXの入力欄に色コードを入力するか、カラーピッカーで色を選びます。#f00 のような3桁短縮形もそのまま使えます。
RGBの各値（R・G・Bを 0〜255）を直接入力してもかまいません。
どの欄を変えても、残りの表記と色見本（スウォッチ）が自動で連動して更新されます。
HEX・RGB・HSLがそれぞれ表示されるので、各行の「コピー」ボタンで必要な記法をコピーできます。HSLは表示専用で、明るさを調整したいときの目安に使えます。

変換はすべてお使いのブラウザ内で行われ、入力した色が外部へ送信されることはありません。記法に迷ったら、まず手元のカラーコードを入力し、色見本を見ながら必要な記法へ言い換えてみてください。

「カラーコード変換」を使ってみる →