カラーコードとは
画面上の色を数値や記号で表す指定方法です。同じsRGB色をHEX・RGB・HSLなど異なる形式で表せます。
HEXとは
赤・緑・青を16進数の00～FFで表す形式です。3桁の#F00は#FF0000、4桁の#F008は#FF000088へ展開されます。8桁は#RRGGBBAA順です。
RGBとは
赤（Red）・緑（Green）・青（Blue）の強さを0～255で表します。CSSの例は赤がrgb(255 0 0)、50%透明の赤がrgb(255 0 0 / 50%)です。
HSLとは
色相（Hue）・彩度（Saturation）・明度（Lightness）で色を表します。色相は360度を一周し、360・720は0、-30は330へ正規化されます。彩度0のグレーでは色相が見た目に影響しないため、本ツールは0として表示します。
HEXをRGBへ変換する方法
#336699を2桁ずつ分け、16進数の33・66・99を10進数へ直すと、rgb(51 102 153)になります。
RGBをHEXへ変換する方法
RGBの各値を2桁の16進数へ変換して連結します。rgb(255 0 0)はFF・00・00を連結した#FF0000です。
HEXをHSLへ変換する方法
HEXを一度RGBへ展開し、RGBの最大値・最小値と差から色相・彩度・明度を計算します。本ツールは途中の値を丸めず、表示時だけ約2桁へ整形します。
Alpha・透明度とは
Alphaは0が完全な透明、1が完全な不透明です。HEXではAlphaを0～255へ四捨五入して2桁で付け、0は00、0.5は80、1はFFになります。8bitへ量子化するため、HEXから戻した値が入力値とわずかに異なる場合があります。
代表的なカラーコード例
赤#FF0000rgb(255 0 0)hsl(0 100% 50%)
緑#00FF00rgb(0 255 0)hsl(120 100% 50%)
青#0000FFrgb(0 0 255)hsl(240 100% 50%)
白#FFFFFFrgb(255 255 255)
黒#000000rgb(0 0 0)
グレー#808080hsl(0 0% 50.2%)
半透明の赤#FF000080rgb(255 0 0 / 50.2%)
よくある質問
#を付けなくても入力できますか？
はい。3・4・6・8桁の16進数なら#を省略できます。
3桁・4桁の短縮HEXとは何ですか？
#ABCを#AABBCCのように各桁を2回ずつ展開する表記です。4桁目はAlphaです。
8桁HEXのAlphaは先頭ですか？
いいえ。CSSと同じ#RRGGBBAA順で、末尾2桁がAlphaです。ARGBではありません。
Alpha 0.5がHEXで80になるのはなぜですか？
0.5×255を四捨五入して128とし、16進数の80へ変換するためです。
HEXから戻すとAlphaが0.502になるのはなぜですか？
8bitの80は128÷255で約0.50196です。透明度を256段階へ量子化するため差が生じます。
どんなHEXを短縮できますか？
各2桁が同じ文字のときだけ短縮できます。Alphaを含む場合はAlphaの2桁も同じ必要があります。
HSLの色相に360や負数を入力できますか？
はい。360度ごとに一周するため0～360未満へ正規化します。
グレーの色相が0なのはなぜですか？
彩度0では色相を変えても見た目が変わらず、色相が無力になるため本ツールでは0とします。
RGBに小数を入力できますか？
いいえ。RGBは0～255の整数だけを受け付けます。
CSSへそのまま貼り付けられますか？
はい。RGBとHSLは現代的なスペース区切り構文で出力します。
入力した色は外部へ送信されますか？
送信しません。入力・変換・プレビュー・コピー用整形はブラウザ内だけで行います。