カラーコード変換
カラーコードを HEX・RGB・HSL で相互変換できる無料ツールです。 カラーピッカーと大きなプレビュー、読みやすい推奨文字色つき。Web制作やデザインの色指定に。データは送信されません。
- HEX
- RGB
- HSL
使い方
カラーピッカーで色を選ぶか、HEX・RGBの各欄に直接入力すると、他の表記が自動で更新されます。 各コードはクリックでコピーできます。
色の表し方
| HEX | #RRGGBB の16進数表記（Web/CSSで一般的） |
|---|---|
| RGB | 赤・緑・青を各0〜255で表す |
| HSL | 色相(0〜360°)・彩度・明度(各0〜100%)で表す。色の調整がしやすい |
HEX と RGB の関係
HEX は RGB を16進数で書き直しただけのものです。 赤・緑・青それぞれ 0〜255 の値を2桁の16進数（00〜ff）で並べています。
| HEX | #3d5afe |
|---|---|
| 区切ると | 3d / 5a / fe |
| 10進に直すと | 61 / 90 / 254 → rgb(61, 90, 254) |
2桁の16進数で表せるのは256通り。赤・緑・青それぞれ256通りなので、 全部で 256 × 256 × 256 = 16,777,216色（いわゆる1677万色）になります。#abc のような3桁の省略形は、各桁を2回繰り返した #aabbcc と同じ色です。
HSL の読み方
HSL は色を人が感じるとおりの3つの軸で表します。 「同じ色みのまま明るくしたい」といった調整は、RGB より HSL のほうが直感的です。
- H（色相・0〜360°） — 色のたぐい。0°が赤、120°が緑、240°が青。円で1周します。
- S（彩度・0〜100%） — 鮮やかさ。0%にすると色みが消えて灰色になります。
- L（明度・0〜100%） — 明るさ。0%で黒、100%で白。50%のときに最も鮮やかな色になります。
ボタンのホバー色を作るときは L だけを5〜10%動かす、 補助色がほしいときは H を30°ずらす、といった使い方ができます。
覚えておくと早い色
| 色 | HEX | RGB |
|---|---|---|
| 黒 | #000000 | 0, 0, 0 |
| 白 | #ffffff | 255, 255, 255 |
| 赤 | #ff0000 | 255, 0, 0 |
| 緑 | #00ff00 | 0, 255, 0 |
| 青 | #0000ff | 0, 0, 255 |
| 中間の灰色 | #808080 | 128, 128, 128 |
3つの値がすべて同じときは必ず無彩色（黒〜灰〜白）になります。#333 や #eee がよく使われるのはこのためです。
使うときの注意
- HEX と RGB は同じ情報なので、往復しても色は変わりません。
- HSL は変換の途中で丸めが入るため、HSL に直してから戻すと1〜2ずれることがあります。
- 透明度（アルファ値）は扱いません。#rrggbbaa のような8桁の指定は対象外です。
- 文字色と背景色の組み合わせが読みやすいかどうかは、色の見た目では判断できません。コントラスト比チェックで数値を確かめてください。
よくある質問
HEX・RGB・HSLとは何ですか？
いずれも色の表し方です。HEXは #3d5afe のような16進数、RGBは赤・緑・青の各0〜255、HSLは色相(0〜360°)・彩度・明度(各0〜100%)で表します。同じ色を用途に応じて変換できます。
HEXからRGBへの変換方法は？
HEXの6桁を2桁ずつに分け、それぞれを16進数から10進数に変換します。例：#3d5afe は 3d=61, 5a=90, fe=254 なので rgb(61, 90, 254) です。当ツールは自動で相互変換します。
3桁の短縮HEX（#abc）にも対応していますか？
はい。#abc のような3桁表記は #aabbcc として解釈します。HEX欄に入力すると自動で認識します。
プレビューの文字色はどう決まっていますか？
背景色の明るさ（WCAGの相対輝度）から、黒文字と白文字のうち読みやすい方を自動で選んでいます。配色時のコントラストの目安になります。
関連ツール
文字色と背景色の読みやすさは コントラスト比チェック で判定できます。 1色から相性のよい配色を作るなら カラーパレット生成、 画像や画面の縦横比は アスペクト比計算、単位の換算は 単位変換 もどうぞ。