必要なツールを、すぐ使えるように

HEXからRGBへの変換ツール

HEX コードか RGB 値を入れると、反対側の表記と HSL・OKLCH・透明度つきのコードがまとめて表示されます。標準の例 #3498DB は、34・98・DB を2桁ずつ10進数に直した rgb(52, 152, 219) です。下の「HEX の読み解き」では、3 × 16 + 4 = 52 のような計算の過程をチャンネルごとにバーで見られます。カラーピッカー、R・G・B のバー、透明度を動かすと全コードがすぐに追従し、この色の上に白い文字と黒い文字を置いたときのコントラスト比も同時に確かめられます。

最終更新 2026-10-12計算はブラウザ内だけで処理
#3498DB・3498DB・#39F・#3498DB80、rgb(52, 152, 219)、hsl()、「52, 152, 219」のどれでも読み取れます。 数字だけの 3・4・6・8 桁は HEX として読みます。

    HEX の読み解き2桁ずつに区切り、16進数を10進数に直します。上の桁 × 16 + 下の桁

      白い文字・黒い文字は読めるか

      基本の16色CSS の基本の色名と HEX · タップすると上の入力欄に入ります

        最終更新 2026-10-12入力値は保存しません

        ROBERINの基準必要なツールを、
        すぐ使えるように。
        • ひと目で分かる画面入力と結果の位置をはっきり分けます。
        • 結果が先主要な結果を先に示し、過程は必要なときだけ。
        • 求めない登録や不要な入力なしですぐ使えます。

        #3498DB は rgb(52, 152, 219): 2桁ずつ16進数を10進数に直します

        HEX コードと RGB 値は、同じ色の書き方が違うだけです。HEX は赤・緑・青の値を16進数2桁ずつ並べ、RGB は同じ値を 0 から 255 までの10進数で書きます。#3498DB を 34・98・DB に区切って10進数に直すと 52、152、219 になり、rgb(52, 152, 219) です。2桁の16進数は「上の桁 × 16 + 下の桁」で、A〜F は 10〜15 を表します。

        上の変換ツールは、HEX を入れると RGB を、R・G・B の欄やバーを動かすと HEX を大きく表示します。HSL・OKLCH・透明度つきのコードも、1行ずつコピーできます。「HEX の読み解き」ではチャンネルごとに計算の過程と 0〜255 の中での位置をバーで示し、その下ではこの色の上に白い文字と黒い文字を置いたときのコントラスト比を WCAG の基準で確かめられます。

        HEX と RGB を変換する場面

        • デザインカンプの色をコードに移すとき: カンプやブランドガイドに HEX で書かれた色に透明度もあわせて指定するなら rgb(R G B / アルファ) や8桁の HEX が必要です。
        • プログラムに色の値を渡すとき: 多くのプログラミング言語やグラフィックライブラリは、色を 0〜255 の数値3つで受け取ります。HEX を RGB の数値に直せば、そのまま渡せます。
        • 色を少しずつ調整するとき: RGB のバーで1つのチャンネルだけ上げ下げすると、HEX がどう変わるかをすぐ確認できます。明るさや彩度を基準に調整するなら、HSL や OKLCH の値もあわせて見ます。
        • 文字が読めるか確かめるとき: ボタンや背景色の上では、白と黒のどちらの文字が読みやすいかをコントラスト比で判断します。

        計算方法

        1. HEX → RGB: # のあとの6桁を2桁ずつ R・G・B に区切り、それぞれを「上の桁 × 16 + 下の桁」で直します。DB は 13 × 16 + 11 = 219 です。
        2. RGB → HEX: 各値を 16 で割った商と余りを、16進数の1桁ずつで書きます。152 = 9 × 16 + 8 なので 98 です。16 未満の値は先頭に 0 を付けて2桁にそろえます。
        3. 短縮表記: 3桁の #39F は各桁を2回ずつ書いて #3399FF に、4桁の #39F8 は #3399FF88 に展開します(CSS Color 4)。
        4. 透明度: 8桁 HEX の末尾2桁がアルファで、00 は完全な透明、FF は完全な不透明です。パーセント × 255 を四捨五入して16進数で書きます。
        16進数0~9ABCDEF
        10進数0~9101112131415

        HEX 表記と rgb()・hsl() の構文は W3C CSS Color Module Level 4(2026-10-09 の Candidate Recommendation Draft)、コントラスト比は WCAG 2.2 に従っています。いずれも 2026-10-12 に原文を確認しました。

        基本の16色 HEX・RGB 一覧

        CSS が定める基本の色名16個の値です。上の変換ツールで「基本の16色」をタップすると、その色がそのまま入ります。

        色名HEXRGBHSL
        black#0000000, 0, 00, 0%, 0%
        silver#C0C0C0192, 192, 1920, 0%, 75%
        gray#808080128, 128, 1280, 0%, 50%
        white#FFFFFF255, 255, 2550, 0%, 100%
        maroon#800000128, 0, 00, 100%, 25%
        red#FF0000255, 0, 00, 100%, 50%
        purple#800080128, 0, 128300, 100%, 25%
        fuchsia#FF00FF255, 0, 255300, 100%, 50%
        green#0080000, 128, 0120, 100%, 25%
        lime#00FF000, 255, 0120, 100%, 50%
        olive#808000128, 128, 060, 100%, 25%
        yellow#FFFF00255, 255, 060, 100%, 50%
        navy#0000800, 0, 128240, 100%, 25%
        blue#0000FF0, 0, 255240, 100%, 50%
        teal#0080800, 128, 128180, 100%, 25%
        aqua#00FFFF0, 255, 255180, 100%, 50%

        green(#008000)は緑チャンネルが 128 の暗い緑で、緑チャンネルが 255 の明るい緑は lime(#00FF00)です。名前だけで値を想像すると間違えやすいので、HEX を確認してください。

        透明度と HEX 末尾の2桁

        8桁 HEX の末尾2桁は、透明度を 0〜255 で表した値です。パーセント × 255 を四捨五入して16進数にするため、パーセントに戻すと端数が少し変わります。50% は 128(80)になり、128 ÷ 255 は 50.2% です。

        不透明度0~255HEX 末尾2桁
        100%255FF
        90%230E6
        80%204CC
        75%191BF
        70%179B3
        60%15399
        50%12880
        40%10266
        30%774D
        25%6440
        20%5133
        10%261A
        0%000

        CSS で使う色の書き方

        • HEX: #3498DB。各桁が同じ数字の組のときだけ #39F のように短く書けます。透明度つきは #3498DB80 です。大文字と小文字は区別されません。
        • rgb(): 従来の rgb(52, 152, 219) はカンマ区切り、新しい rgb(52 152 219 / 50%) はスペースとスラッシュで区切ります。CSS Color 4 では rgba() は rgb() の別名なので、rgba(52, 152, 219, 0.5) も同じ意味です。
        • hsl(): 色相角(0〜360)・彩度・明度で書きます。同じ色を明るくしたり暗くしたりするとき、明度だけ変えればよいので便利です。
        • oklch(): CSS Color 4 が定める OKLab ベースの書き方で、明度・彩度・色相角を人が感じる差に近い形で分けます。明度をそろえた色のセットを作るときに使えます。
        • HSV: グラフィックソフトのカラーピッカーでよく見かけますが、CSS の関数はありません。参考値として使ってください。

        白い文字・黒い文字のコントラスト比の見方

        WCAG 2.2 では、2色の相対輝度を求めて (明るい方 + 0.05) ÷ (暗い方 + 0.05) でコントラスト比を計算します。相対輝度は、各チャンネルを 0〜1 にしてガンマを戻し、赤 0.2126・緑 0.7152・青 0.0722 の割合で足した値です。通常の本文は 4.5 : 1、大きな文字(18ポイント以上、または太字で14ポイント以上)は 3 : 1 以上で AA、本文で 7 : 1 以上なら AAA です。例の #3498DB は白い文字が 3.15 : 1、黒い文字が 6.66 : 1なので、本文には黒い文字が向いています。この変換ツールはコントラスト比を丸めずに判定します。ほかの2色の組み合わせは、色のアクセシビリティ検査ツールで確かめてください。

        間違えやすい点

        • 3桁の HEX を 0 で伸ばしてしまう: #39F は #3090F0 ではなく #3399FF です。各桁を2回ずつ書きます。
        • 透明度のパーセントが正確に戻ると思う: 50% は 80(128)になり、戻すと 50.2% です。0〜255 の整数で保存されるためです。
        • RGB の 0〜1 と 0〜255 を混ぜる: グラフィックツールには、チャンネルを 0〜1 の小数で受け取るものがあります。その場合は 52 ÷ 255 = 0.204 のように 255 で割ります。
        • 透明な色のコントラスト比をそのまま見る: 透明な色は下の背景と混ざって見えます。実際の背景と混ぜた後の色で、あらためて確認してください。
        • HSL に変えて戻した値をそのまま使う: 整数に丸めた HSL を戻すと、チャンネル値が数単位（多いと 5 程度）ずれることがあります。正確な値は HEX か rgb() で受け渡します。
        • 色名だけで値を決めつける: CSS の green は #008000 で、#00FF00 は lime です。

        制限と注意

        • 扱うのは sRGB の色だけです。display-p3 のようにより広い色空間の値を入れると、ブラウザーが sRGB に変換した値で計算します。
        • HSL・HSV は整数、OKLCH は明度を小数第1位、彩度を小数第3位、色相角を小数第1位に丸めて表示します。
        • 無彩色(グレー系)は色相角が決まらないため、0 と表示します。
        • コントラスト比は透明度を除き、不透明な色として計算します。文字の太さや大きさ、画面の明るさによる違いは反映しません。
        • カラーピッカーの見た目や機能は、ブラウザーや OS によって異なります。

        出典

        • 01W3C — CSS Color Module Level 42026-10-09 の Candidate Recommendation Draft。§5.2 HEX の3・4・6・8桁と展開規則、アルファ 00・ff、rgb() と rgba() の別名・新旧の書き方、§6.1 基本の色名、§7.2 sRGB → HSL、OKLab・OKLCH — 2026-10-12 確認
        • 02W3C — Web Content Accessibility Guidelines (WCAG) 2.2相対輝度(しきい値 0.04045、2021年5月以前は 0.03928)、コントラスト比 (L1 + 0.05) / (L2 + 0.05)、1.4.3 AA 4.5 : 1・大きな文字 3 : 1、1.4.6 AAA 7 : 1、大きな文字の定義

        よくある質問

        HEX コードを RGB に変換するにはどうしますか?

        # のあとの6桁を2桁ずつに区切り、赤・緑・青の値として読みます。2桁の16進数は「上の桁 × 16 + 下の桁」で10進数になります。#3498DB なら、34 = 3 × 16 + 4 = 52、98 = 9 × 16 + 8 = 152、DB = 13 × 16 + 11 = 219 で、rgb(52, 152, 219) です。A〜F は 10〜15 を表します。

        RGB を HEX に変換する方法を教えてください。

        各値を 16 で割り、商と余りを16進数の1桁ずつで書きます。219 は 16 × 13 + 11 なので、商の 13 は D、余りの 11 は B となり、DB です。16 未満の値は先頭に 0 を付けて2桁にするので、8 は 08 になります。3つのチャンネルをつなげて前に # を付ければ HEX コードです。

        #39F のような3桁の HEX はどういう意味ですか?

        CSS Color 4 の短縮表記で、各桁を2回ずつ書いた6桁と同じです。#39F は #3399FF で、rgb(51, 153, 255) にあたります。末尾に 0 を足した #3090F0 ではありません。4桁(#39F8)も同じ方法で8桁(#3399FF88)に展開します。

        8桁 HEX の最後の2桁は何ですか?

        透明度(アルファ)です。00 は完全な透明、FF は完全な不透明を表します。値は 0〜255 を 255 で割った割合なので、#3498DB80 の 80(= 128)は 128 ÷ 255 = 約 50.2% です。同じ色は rgba(52, 152, 219, 0.502) とも書けます。

        透明度 50% は HEX でいくつですか?

        50% × 255 = 127.5 を四捨五入した 128 で、16進数では 80 です。そのため不透明度 50% の HEX 末尾は 80 になり、これをパーセントに戻すと 50.2% です。ここでのパーセントは不透明度（100% = 完全に不透明）で、90% は E6、80% は CC、75% は BF、25% は 40、10% は 1A です。

        rgb() と rgba() は何が違いますか?

        CSS Color 4 では rgba() は rgb() の別名なので、どちらも透明度を指定できます。カンマで区切る従来の rgb(52, 152, 219) と、スペースで区切って透明度をスラッシュのあとに書く新しい rgb(52 152 219 / 50%) があり、どちらも同じ色を表します。

        HSL に変換した値を HEX に戻すと、なぜ少し違うことがありますか?

        HSL や OKLCH の計算結果は小数になりますが、見やすいように丸めて表示しているためです。hsl(204, 70%, 53%) のように整数に丸めた値を RGB に戻すと、チャンネル値が数単位（多いと 5 程度）ずれることがあります。正確な色を受け渡すときは、HEX か rgb() の値を使うほうが安全です。

        #3498DB の上に白い文字を載せてもよいですか?

        WCAG 2.2 のコントラスト比は、白い文字が 3.15 : 1、黒い文字が 6.66 : 1 です。通常の本文は 4.5 : 1 以上で AA に合格するため、白い文字が AA を満たすのは大きな文字(18ポイント以上、または太字で14ポイント以上)のときだけです。ほかの2色の組み合わせは、色のアクセシビリティ検査ツールで確かめてください。

        RGB CMYK変換ツールHEX・RGBとCMYKを印刷条件(ICCプロファイル)別に変換し、4版の網点・印刷予想色・総インキ量まで表示します。コントラストチェッカー文字色と背景色のコントラスト比を WCAG 2.2 で判定し、基準を満たす最も近い色と色覚の違いのプレビューを表示します。カラーハーモニージェネレーター基準色1色から7つの配色を一覧で比べ、色相環で回して画面に当てはめ、文字のコントラストまで確認できます。カラーネームファインダーHEX・RGB・HSLの色を入力すると、最も近いCSS色名と色差、系統名を色相環マップとともに表示します。