RGB HSL 変換

RGB値とHEXコードは同じ色の別表記

RGBは赤（R）、緑（G）、青（B）の各光量を数値で表す方式です。このページでは各チャンネルを0〜255の整数で扱います。HEXは同じ3つの値を16進数に置き換え、先頭に#を付けた表記です。たとえばRGBの255、0、0は#FF0000になります。どちらも色を指定するための表記方法で、形式を変換しても意図する色自体を変えるものではありません。

入力した色はプレビューに反映され、RGBとHEXを確認できます。RGB側はR・G・Bのスライダー、HEX側はコード入力欄で調整でき、プリセットカラーや端末のカラーピッカーも使えます。

3つのチャンネルを2桁ずつ読む

6桁のHEXコードは、先頭から赤・緑・青の順に2桁ずつ並びます。たとえば #3B82F6 は、Rが 3B、Gが 82、Bが F6 です。16進数を10進数に直すとRGBはそれぞれ59、130、246になります。逆にRGBからHEXを読む場合は、各チャンネルを個別に16進数へ置き換え、1桁になった値には先頭の0を補って2桁にします。

CSS Color Module Level 4ではRGB関数とRGBの16進表記が定義されています。ここで扱うのは通常の6桁RGBカラーコードです。

HEXコードからRGBを確認する

1. コードを入力する

   HEX欄に、たとえば #3B82F6 のような色コードを入力します。色が認識されると、プレビューとRGBの各値が連動して更新されます。

2. 色と数値を照合する

   プレビューで色味を確認し、R・G・Bの値を元データと照らし合わせます。#FF0000ならRGBは255、0、0です。

3. 必要な形式をコピーする

   HEX欄のコピー操作でカラーコードを、RGB欄のコピー操作で rgb(59, 130, 246) の形式を取得できます。コードに貼り付ける前に、対象の欄と値が一致しているか確認してください。

RGBから始める場合はR・G・Bのスライダーを動かします。特定の色を試すならプリセットを選ぶかカラーピッカーを開き、最後に表示されたHEXを控えます。リセットすると初期色に戻ります。

カラーコード変換でよくある確認事項

対応範囲と値の確認

HEX入力が認識されない場合、色プレビューやRGB値が更新されないことがあります。入力後はコードだけで判断せず、プレビューと3つのチャンネルが意図した値に変わったか確認してください。小数のRGB値、透明度、8桁HEXを扱う用途には、このページの6桁HEX・整数RGB出力だけでは必要な情報を表せません。

この画面にはHSLの調整・表示もありますが、RGBからHSLへの彩度表示は標準CSS HSLと異なることがあります。HSLの数値を根拠にスタイル指定やデザイン仕様を確定しないでください。RGBと6桁HEXの照合を主な用途として利用してください。

プレビューは数値を画面上で確認するためのものです。モニター設定、色管理、周囲の照明によって実物や別の画面との見え方は変わるため、最終的な色合わせは使用先の環境でも行ってください。