RGB⇔16進数(HEX)カラーコード変換｜無料・登録不要
RGBの10進数の値とカラーコードの16進数(HEX)を瞬時に相互変換。CSSやデザインツールで使うカラーコードの確認・変換にすぐ使えます。無料・登録不要、ブラウザだけで完結。
10進数
| R | |
|---|---|
| G | |
| B |
16進数
| # |
|---|
RGBと16進数カラーコードの関係
画面上の色は、赤・緑・青の3つの光をどれだけ混ぜるかで決まります。それぞれの強さを0から255の数値で表したのがRGB形式で、同じ値を16進数の2桁ずつに直して並べたものが #RRGGBB という16進数のカラーコードです。つまり両者は同じ色を別の書き方で表しているだけで、このツールはその相互変換を行います。
なぜ2種類の書き方があるかというと、用途が違うためです。16進数は6文字で色を表せるので、CSSやデザインツールでの受け渡しに向いています。一方RGBは各成分の数値が直接見えるため、赤を少し強めるといった調整がしやすくなります。作業に応じて使い分けられるよう、両方の形式を確認できるようにしています。
カラーコード変換の使い方
- 変換したい値を入力する 10進数の欄にR・G・Bの値を入れるか、16進数の欄にカラーコードを入力します。どちらからでも変換できます。
- もう一方の形式を確認する 入力すると同時に対応する値が表示されます。そのままコピーしてCSSやデザインツールへ貼り付けられます。
- 値を調整して色を試す 10進数側の数値を増減させると色の変化が分かりやすくなります。狙った色に近づけながら確認できます。
使いこなすためのヒント
- CSS では
#RRGGBB形式とrgb(R, G, B)の両方の形式で色を指定できます。 - R（赤）・G（緑）・B（青）それぞれの値は 0〜255（16 進数で 00〜FF）です。
- 白は
#FFFFFF（255, 255, 255）、黒は#000000（0, 0, 0）です。 - Figma・Adobe XD などのデザインツールはどちらの形式も対応しているため、値をコピーするだけで変換を適用できます。
- ショートハンド
#FFFは#FFFFFF（白）の略記で、CSS で有効な表記の一つです。
カラーコード変換の活用シーン
デザインからコーディングへ渡す
デザインツールがRGBで表示している色を、CSSで使う16進数の形式に直せます。手作業での変換ミスを防げます。
ブランドカラーを正確に再現する
指定された色が片方の形式でしか手元にない場合に、もう一方へ変換して統一できます。資料とWebで色がずれるのを防げます。
色を少しずつ調整する
16進数のままでは加減の見当がつきにくい調整も、RGBの数値に直せば直感的に行えます。明るさや色味の微調整に向いています。
既存サイトの配色を調べる
開発者ツールで拾ったカラーコードを変換すれば、各色成分の強さを数値として把握できます。
カラーコードの用語
- RGB
- 赤・緑・青の光の強さで色を表す方式です。それぞれ0から255までの値をとり、3つすべてが255なら白になります。
- 16進数
- 0からFまでの16種類で数を表す記法です。0から255までをちょうど2桁で表せるため、カラーコードに使われています。
- ショートハンド
#FFFのように3桁へ省略した書き方です。各成分の2桁が同じ文字のときだけ使えます。- 24ビットカラー
- 各成分に8ビットずつ割り当てる方式です。合計で約1,677万色を表現できます。
- チャンネル
- 色を構成する個々の成分のことです。RGBでは赤・緑・青がそれぞれ1つのチャンネルにあたります。
よくある質問
#FFFFFF と #ffffff はどちらも同じ色として扱われます。大文字・小文字は区別されません。#RRGGBB → #RGB）の場合にのみ短縮できます。#1DA1F2 のような値は短縮できません。
余談ですが ― 色の不思議 ― 人間の目と1677万色の世界
人間の目が識別できる色の数は約 1,000万色 と言われています（個人差あり）。RGBの24ビットカラー（各チャンネル8ビット）は16,777,216色（約1,677万色）を表現でき、これは人間の識別能力をはるかに超えた色数です。
著名なブランドカラーをRGBで表すと：Twitterブルー #1DA1F2（29, 161, 242）、Google赤 #EA4335（234, 67, 53）、LINE緑 #00B900（0, 185, 0）などです。ティファニーのアイコニックなブルー「Tiffany Blue」は #0ABAB5 に近い色で、商標登録されている色の一つです。
面白い話として、CSSに「rebeccapurple（#663399）」という色名が存在します。これはCSS仕様策定者のEric Meyerの娘 Rebecca（享年6歳）への追悼として、CSSコミュニティが提案し2014年に正式採用されたものです。エンジニアコミュニティに深く刻まれたエピソードとして今も語り継がれています。