カラーコード変換ツール
HEX、RGB、HSLのカラーコードを瞬時に相互変換。カラーピッカーつき、無料。
684回閲覧
HEX—
RGB—
HSL—
HEX・RGB・HSLとは?
HEX(例: #ff8000)は赤緑青の値を16進数で表す、Webで最も一般的な記法です。RGB(例: rgb(255, 128, 0))は同じ3チャンネルを0〜255の10進数で表します。HSL(例: hsl(30, 100%, 50%))は色相・彩度・明度で色を表現し、ある色の明るい/暗いバリエーションを作るのに最も便利な形式です。
カラーピッカーで色を選ぶか、HEXコードを直接入力すると、3つの表記がすべて即座に更新されます。CSSを書くとき、デザインパレットを作るとき、ブランドカラーを別の形式で表現したいときにお使いください。
よくある質問
HEXカラーをRGBに変換するには?
HEXの各2桁が1チャンネルを16進数で表します。#ff8000ならff=255(赤)、80=128(緑)、00=0(青)、つまりrgb(255, 128, 0)です。このツールは自動で変換します。
3桁のHEXコード(#f80など)には対応していますか?
はい。#f80のような短縮記法は各桁を2倍にして#ff8800に展開されます。ツールはどちらの形式も受け付けます。
HSLを使うべきなのはどんなときですか?
ある色の明るい・暗い・くすんだバリエーションが必要なときは、HSLが最も実用的です。明度(L)や彩度(S)の値だけを変えれば一貫性のあるトーンが得られます。CSSはhsl()記法を直接サポートしています。
関連ツール
問題を報告
カラーコード変換ツール