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

公開日：2026年7月20日更新日：2026年9月2日運営：シルギア（Analyzegear, Inc.）対象ツール：カラーコード変換

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軸に分けます。色相は色の種類を角度で表し、0°/360°が赤、120°が緑、240°が青あたりに対応します。色味はそのままで明るさだけ変えたいなら明度、鮮やかさを抑えたいなら彩度だけを動かせばよく、狙いと操作が一対一で対応します。ボタンのホバー色は、色相と彩度を固定して明度だけを上下させると、統一感のあるバリエーションを手早く作れます。

数値例で確かめる（検算）

3つの記法が本当に同じ色を指すのか、代表的な色で確かめます。いずれも実際の変換式で計算した値です。

純粋な赤：#FF0000 ＝ rgb(255, 0, 0) ＝ hsl(0, 100%, 50%)。彩度は最大の100%、明度は中間の50%です。
純粋な緑・青：#00FF00 ＝ rgb(0, 255, 0) ＝ hsl(120, 100%, 50%)、#0000FF ＝ rgb(0, 0, 255) ＝ hsl(240, 100%, 50%)。色相が120°・240°に来ます。
中間のグレー：#808080 ＝ rgb(128, 128, 128) ＝ hsl(0, 0%, 50%)。R・G・Bが等しいと彩度は0%になり、色相は意味を持ちません。

HSLはRGBから計算した参考値のため、丸め誤差で再変換すると1だけずれることがあります。値の一致より、色見本の見た目で最終確認するのが安全です。

不透明度（アルファ）とRGBA・HSLA・8桁HEX

色には不透明度（アルファ）を加えた表し方もあります。rgba(59, 91, 219, 0.5) や hsla(...)、HEXを8桁にした #RRGGBBAA 形式がそれで、0（透明）〜1（不透明）、または 00〜FF で透明度を指定します。背景やオーバーレイで使います。

このツールは不透明度スライダー（0〜100%）を備え、RGBA・HSLA・8桁HEXも同時に出力します。たとえば #3B5BDB を不透明度50%にすると、rgba(59, 91, 219, 0.5)、8桁HEXでは #3B5BDB80 になります（0.5×255＝約128＝16進で80）。入力側でも #RRGGBBAA の8桁や #RGBA の4桁HEXを読み取り、アルファに反映します。色見本は市松模様の上に半透明色を重ねるので、透け具合をその場で確認できます。

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

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

この明度差はコントラストと呼ばれ、本文テキストで背景との比が 4.5:1 以上あることが一つの目安とされています。数値の基準は改定されることがあるため、正式な判定は最新の公的ガイドライン（WCAG）や専用のコントラスト測定を優先してください。

ありがちな失敗と、このツールでの変換手順

先に、つまずきやすい点を挙げておきます。

桁数ミス：HEXは #RRGGBB の6桁が基本です。3桁の短縮形（#f00 など）は各桁を2回繰り返した #ff0000 として扱われる特別な形なので、桁が足りない #3B5D などと混同しないよう注意します。
#（シャープ）の有無：CSSのHEXは先頭に # を付けます。なお本ツールの入力欄は 3b5bdb のように # なしでも受け付けます。
RGBの範囲外：R・G・Bは 0〜255 の整数です。範囲外の値は自動で0〜255に丸められます。

変換手順は次のとおりです。

HEXの入力欄に色コードを入力するか、カラーピッカーで色を選びます。#f00 の3桁短縮形や #RRGGBBAA の8桁も読み取れます。
RGBの各値（R・G・Bを 0〜255）を直接入力してもかまいません。
不透明度（アルファ）スライダーで透明度を調整します（100%＝不透明）。
どの欄を変えても、残りの表記と色見本が自動で連動します。HEX・RGB・HSL・RGBA・HSLA・8桁HEXが表示され、各行の「コピー」ボタンで必要な記法をコピーできます。

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

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