NordVPN
広告厳格なノーログポリシーと6000台以上のサーバーで、安全かつ高速なネット接続を提供するVPN。
詳細を見る →カラーコード変換 — 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 の整数量子化以外の誤差はありません。