HEXカラーコードをRGBやHSLにすぐ変換したい——そんな場面はWebデザインや開発でよくあります。このページの変換ツールを使えば、HEXコードを入力するだけでRGB・HSL・色見本プレビューをまとめて確認できます。変換はブラウザ内で完結するため、入力内容がサーバーに送信されることはありません。
HEXカラーコード変換ツール
使い方
- 入力欄にHEXカラーコードを入力します
#ff8800のような「#付き6桁」のほか、「#なし6桁（ff8800）」や「3桁の省略形（#f80）」にも対応しています- 変換結果として色見本・HEX正規化・RGB・HSLが表示されます
- 各値の右にある「コピー」ボタンを押すと、CSSにそのまま貼り付けられる形式でクリップボードにコピーできます
変換式はW3C「CSS Color Module」の仕様（sRGB→HSL変換）に準拠しています。
HEX・RGB・HSLとは
HEX（16進数カラーコード）
HTMLやCSSで最もよく使われる色の表記方法です。#に続く6桁の英数字で色を表し、上位2桁が赤（R）・中2桁が緑（G）・下2桁が青（B）の強さ（00〜FF）を16進数で指定します。
#ff0000→ 赤（R=255, G=0, B=0）#00ff00→ 緑（R=0, G=255, B=0）#0000ff→ 青（R=0, G=0, B=255）#ffffff→ 白（R=G=B=255）#000000→ 黒（R=G=B=0）
3桁の省略形（#f80）は各桁を2つ並べた6桁（#ff8800）と同じ意味です。
RGB（Red Green Blue）
赤・緑・青の3成分をそれぞれ0〜255の数値で表す方法です。CSSでは rgb(255, 136, 0) のように記述します。デザインツール（Adobe Photoshop・Figmaなど）でも広く使われており、数値を直接調整しやすいのが特徴です。
HSL（Hue Saturation Lightness）
色相・彩度・明度の3つで色を表す方法です。CSSでは hsl(32, 100%, 50%) のように記述します。
← 横にスクロールできます →
| 要素 | 値の範囲 | 意味 |
|---|---|---|
| H（色相） | 0〜360° | 色の種類（0=赤・120=緑・240=青） |
| S（彩度） | 0〜100% | 鮮やかさ（0%=グレー・100%=最大彩度） |
| L（明度） | 0〜100% | 明るさ（0%=黒・50%=標準・100%=白） |
HEXやRGBと比べて「少し明るくしたい」「彩度を下げたい」といった色の微調整が直感的に行えるため、UIデザインやCSSでの色のバリエーション生成に向いています。
定番20色のカラーコード早見表
よく使われる色のHEX・RGB・HSLをまとめました。上のツールにHEXを入力すればRGB・HSLをすぐ確認できます。
← 横にスクロールできます →
| 色名 | HEX | RGB | HSL |
|---|---|---|---|
| 白（white） | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| 黒（black） | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| シルバー（silver） | #c0c0c0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) |
| グレー（gray） | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| 赤（red） | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| マルーン（maroon） | #800000 | rgb(128, 0, 0) | hsl(0, 100%, 25%) |
| オレンジ（orange） | #ffa500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| 黄（yellow） | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| オリーブ（olive） | #808000 | rgb(128, 128, 0) | hsl(60, 100%, 25%) |
| ライム（lime） | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| 緑（green） | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) |
| シアン（cyan） | #00ffff | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| ティール（teal） | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| 青（blue） | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| ネイビー（navy） | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) |
| マゼンタ（magenta） | #ff00ff | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| パープル（purple） | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| ピンク（pink） | #ffc0cb | rgb(255, 192, 203) | hsl(350, 100%, 88%) |
| 茶色（brown） | #a52a2a | rgb(165, 42, 42) | hsl(0, 59%, 41%) |
| ゴールド（gold） | #ffd700 | rgb(255, 215, 0) | hsl(51, 100%, 50%) |
これらはW3Cの「CSS Color Level 4」仕様で定義された色名に対応するカラーコードです。日本の伝統色のカラーコード一覧はこちらでも確認できます。
よくある質問
Q. 3桁のHEXコード（#f80）は使えますか？
はい。3桁のHEXコードに対応しています。入力すると自動で6桁に展開して変換します（例：#f80 → #ff8800）。
Q. RGBやHSLからHEXへの逆変換はできますか？
このツールはHEX→RGB/HSLの変換に対応しています。RGBやHSLからHEXへの逆変換は現在対応していません。
Q. 8桁のHEX（透明度付き）には対応していますか？
#rrggbbaa 形式の8桁（アルファチャンネル付き）には現在対応していません。6桁と3桁のHEXコードが対象です。
Q. 変換式はどの規格に基づいていますか？
W3Cの「CSS Color Module」仕様（sRGB→HSL変換）に準拠しています。
まとめ
このカラーコード変換ツールは、HEXコードを入力するだけでRGB・HSL・色見本プレビューをまとめて確認できます。変換結果はCSSにそのまま貼り付けられる形式でコピーでき、ブラウザ内処理のためプライバシー面でも安心して利用できます。
カラーコードを活用した関連記事はこちらもどうぞ：
- 企業のコーポレートカラー一覧｜公式カラーコードと色見本まとめ
- 色の心理効果まとめ｜赤・青・緑・黄ほか13色の効果と文化的意味一覧
W3C「CSS Color Module Level 4」 https://www.w3.org/TR/css-color-4/（2026-08-31参照）
腕試しクイズ（全5問）
カラーコードの基本知識を確認してみましょう。
