Toolify

カラーコード変換 — HEX・RGB・HSL 同時表示

HEX/RGB/HSL の任意のフォーマットを編集すると、他のフォーマットがライブで更新され、色見本も即座に変わります。Web制作・デザイン作業に。

hex: #0ea5e9
rgb(14, 165, 233)
hsl(199, 89%, 48%)

仕組み

同じ色を表す3つの記法

HEX・RGB・HSL は同じ sRGB 色空間の異なる記法です。HEX は RGB の16進ショートハンドで、#FF6B35 は赤=255・緑=107・青=53 を意味します。RGB は赤・緑・青の光の強さ（各0〜255）で色を表現。HSL は同じ色を「色相」「彩度」「明度」で再エンコードしたものです。

3つは等価で、往復変換でロスは発生しません。デザイナーは色味調整に HSL を好み（明度だけ上げれば色相は変わらない）、開発者はデザインツールから HEX をコピペして CSS に貼ることが多いです。RGB は画像処理・Canvas APIなどの場面で頻出します。

使い分けガイド

HEX: デザインからのコピペ、Figma エクスポート、ブランドガイドライン、CSS の色リテラル。簡潔だが読み解きにくい。

RGB: プログラム的な色操作（Canvas、画像処理）、アクセシビリティチェック（コントラスト計算は線形RGB）、整数で正確に指定したい場面。

HSL: 「もう少し鮮やかに」「ホバー時用に少し暗く」「色相を15度ずつずらしてパレットを作る」など、感覚的な調整。これらの作業ではHEXより圧倒的に扱いやすい。

本ツールが対応していないこと

アルファ（透明度）は現在未対応です。最新ブラウザでは #RRGGBBAA 形式（末尾に2桁追加、00=透明・FF=不透明）が使えます。

広色域（P3・Rec.2020・OKLCH）にも非対応です。一般的なWeb制作では sRGB ベースの HEX/RGB/HSL が標準です。HDR や広色域ディスプレイ向けには CSS Color Module Level 4 の構文を確認してください。

よくある質問

›HSL から HEX への往復で誤差は出ますか?

ほぼ出ません。ただしHSLは整数で持つため（360×101×101 = 約370万通り）、16Mの RGB に対して若干の量子化があります。正確に保存したいなら HEX を正本としてください。

›3桁の HEX に対応していますか?

対応しています。#f60 は #ff6600 と同じ RGB に展開されます。

›HSL の彩度/明度が360でないのはなぜ?

色相（H）だけが角度（0〜360）で、彩度（S）・明度（L）はパーセント（0〜100）です。

›HSL と HSB/HSV は同じですか?

違います。HSV（HSB）は明度の代わりに「Value」を使う別のモデルです。HSL の L=50% で原色、HSV の V=100% で原色になります。本ツールは CSS と整合する HSL を採用。

›透明度に対応していますか?

まだです。HEX に2桁を追加すると透明度を指定できます（例: #00000080 で50%黒）。

›RGB が0〜1の小数で表示されないのは?

CSS やデザインツールが0〜255の整数を使うためです。シェーダー用途では255で割って小数化してください。

›ブランドカラーをどこから取得すべき?

ブランドガイドライン・デザイントークン・パレット生成器から。配色のコントラスト確認は本サイトのコントラストチェッカーをご利用ください。

›計算は正確ですか?

はい。標準的な sRGB 変換式を使用しています。HSL の整数量子化以外の誤差はありません。

関連ツール

最終更新: