HEXカラーコードとRGBの変換方法【Webデザイン基礎・無料変換ツール付き】

CSSを書いていると必ず登場する#FF6B35やrgb(255, 107, 53)といったカラーコード。なんとなく使っているという方も多いのではないでしょうか。本記事ではHEX・RGB・HSLの仕組みと相互変換の方法を、コード例を交えてわかりやすく解説します。

HEXカラーコードとは？

HEX（ヘックス）コードは16進数（hexadecimal）を使った色の表現方法です。#RRGGBBの形式で、RRが赤、GGが緑、BBが青の強さを00〜FF（10進数で0〜255）で表します。

• #FF0000 → 赤（Red=255, Green=0, Blue=0）
• #00FF00 → 緑（Red=0, Green=255, Blue=0）
• #0000FF → 青（Red=0, Green=0, Blue=255）
• #FFFFFF → 白（すべて最大値）
• #000000 → 黒（すべて0）

短縮形として#RGB（3文字）も使えます。#FFFは#FFFFFF、#F00は#FF0000と同じ意味です。

RGBとは？HEXとの違い

RGB（Red/Green/Blue）はその名の通り赤・緑・青の光の三原色を0〜255の10進数で表す方法です。CSSではrgb(255, 107, 53)のように使います。

HEXとRGBは同じ色を異なる表記で表しているだけで、色自体に違いはありません。HEXの方がコンパクトで、RGBの方が人間が直感的に読みやすいという特徴があります。

HEX → RGB の変換方法

HEXの各2桁を16進数として10進数に変換するだけです。

• #FF6B35 → FF=255, 6B=107, 35=53 → rgb(255, 107, 53)
• #667EEA → 66=102, 7E=126, EA=234 → rgb(102, 126, 234)

計算が面倒な場合はカラーコード変換ツールを使えば一瞬で変換できます。

RGB → HEX の変換方法

各チャンネルの数値を16進数に変換して2桁にゼロ埋めし、#を付けます。

• 255 → FF, 107 → 6B, 53 → 35 → #FF6B35
• 0 → 00, 128 → 80, 255 → FF → #0080FF

HSLとは？ダークモードに便利な理由

HSLはH（Hue=色相）・S（Saturation=彩度）・L（Lightness=明度）で色を表す方法です。CSSではhsl(18, 100%, 60%)のように書きます。

• 色相（H）：0〜360°。0が赤、120が緑、240が青
• 彩度（S）：0%が無彩色（グレー）、100%が鮮やかな色
• 明度（L）：0%が黒、50%が普通、100%が白

HSLのメリットは色を直感的に調整しやすい点です。ダークモードでは同じ色相・彩度のまま明度だけを下げることで自然な暗い色を作れます。

CSS変数と組み合わせたHSLの活用例

:root {
  --primary-h: 220;
  --primary-s: 90%;
  --primary-l: 55%;
}

.button {
  color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}

.dark .button {
  color: hsl(var(--primary-h), var(--primary-s), 75%); /* 明度だけ変更 */
}

HEX・RGB・HSLの使い分けまとめ

無料変換ツールで即チェック

ToolBoxJPのカラーコード変換ツールを使えば、HEX・RGB・HSLを双方向でリアルタイム変換できます。カラーピッカーで直感的に色を選ぶことも可能で、日本の伝統色20種のサンプルパレットも収録しています。

配色を決めたい場合はカラーパレット生成ツール、コントラスト比を確認したい場合はコントラストチェッカーも合わせてご利用ください。