ウェブデザインとCSS
デザインファイルやスクリーンショットピッカーから色を選択し、スタイルシートで必要な16進数コードに変換します。
RGBからHEXへの変換ツール — RGB値を16進数コードに変換したり、16進数コードをRGB値に変換したりできます。リアルタイムプレビュー機能付き。
赤、緑、青の数値を入力するか、色を選択するか、あるいは16進数コードを貼り付けると、HEX、RGB、HSLの各形式を一度に確認できます。リアルタイムプレビューとコントラストチェック機能により、どのテキスト色が最適かを確認できます。すべてブラウザ上で動作します。
色を変換する
お好みの色はブラウザ内に保存されます
色を選んでください、または入力してください
Aa
色分け
HEX
–RGB (CSS)
–HSL (CSS)
––最適な文字色
–コントラスト比
ガイド
RGBからHEXへの変換ガイド：カラーコード、HSL、コントラスト
カラーコードの仕組みや、見やすい色の組み合わせの選び方を学びましょう。
RGBからHEXへの変換ツールは、どのような働きをするのでしょうか？
ディスプレイは、赤、緑、青の光を混ぜ合わせることであらゆる色を再現します。RGBでは、この混合比を0から255までの3つの数値で表します。HEXでは、同じ3つの数値を16進数で表し、#1F3A5Fのような短いコードとして記述します。CSSやデザインツール、ブランドガイドラインでは通常、このHEX表記が使用されています。
3つの数字を入力するか、カラーピッカーで色を選択するか、16進数コードを貼り付けてください。すべての形式が同時に更新され、HSL形式も表示されるほか、その色でどのテキスト色が最も読みやすいかを確認することもできます。
なぜRGBをHEXに変換するのか
ブランドおよび関連資料
ロゴファイル、スライド資料、ウェブサイトの間で、ブランドカラーを統一してください。
アクセシビリティ
公開する前に、どのテキスト色が背景に合うかを確認し、コントラスト比を確認してください。
RGBがHEXに変換される仕組み
3つの数字をそれぞれ16進数の2桁の値に変換し、その3組をつなぎ合わせます。
RGB: 31, 58, 95
31 = 1F (1 × 16 + 15)
58 = 3A (3 × 16 + 10)
95 = 5F (5 × 16 + 15)
16進数: #1F3A5F
16進数では、数字の0～9と文字のA～Fが使用され、Aは10、Fは15を表します。#FA0のような短縮表記は、各桁の値が2倍に換算されるため、実際には#FFAA00を意味します。
RGBおよびHEXでの一般的な色
| 色 | RGB | HEX |
|---|---|---|
| 黒 | 0, 0, 0 | #000000 |
| 白 | 255, 255, 255 | #FFFFFF |
| 赤 | 255, 0, 0 | #FF0000 |
| グリーン | 0, 255, 0 | #00FF00 |
| 青 | 0, 0, 255 | #0000FF |
| 黄色 | 255, 255, 0 | #FFFF00 |
| オレンジ | 255, 165, 0 | #FFA500 |
| グレー | 128, 128, 128 | #808080 |
RGBからHEXへの変換ツールの使い方
- 赤、緑、青の値を入力するか、スウォッチをクリックしてカラーピッカーを使用してください。
- あるいは、逆の操作を行うには、「Hex」フィールドに16進数コードを貼り付けてください。
- HEX、RGB、HSLのコードを確認し、コントラスト比と最適なテキストの色を確認してください。
- 必要な形式の横にある「コピー」をクリックしてください。
色を使う際の簡単なコツ
- テキストを読みやすくするためには、通常のテキストでは少なくとも4.5：1、大きなテキストでは3：1のコントラスト比を目安にしてください。
- 16進数コードは大文字と小文字を区別しないため、#1f3a5f と #1F3A5F は同じ色です。
- CSSでは先頭の「#」が必要ですが、ここでは省略可能です。コードを貼り付ける際は、「#」を付けても付けなくても構いません。
- 画面とプリンターでは色の表示が異なるため、印刷された色が画面上で見えている色と一致しない場合があります。
制限事項およびプライバシー
プライバシー
色はブラウザ内で変換されます。当社のサーバーには何も送信されず、保存されることもありません。お使いのデバイスには、小文字で選択された色のみが記憶されます。
制限事項
このツールは、標準的な8ビットsRGBカラー（各チャンネル0～255）に対応しています。透明度（RGBAまたは8桁の16進数）、印刷用のCMYK、および広色域カラースペースには対応していません。
よくある質問
RGBからHEXへの変換ツールに関するよくある質問
RGBをHEXに変換するにはどうすればいいですか？
赤、緑、青の各値を0から255までの範囲で入力してください。このツールは、各数値を16進数の2桁に変換し、それらを連結するため、31、58、95は#1F3A5Fとなります。
HEXをRGBに変換するにはどうすればいいですか？
16進数のコードを「Hex」フィールドに貼り付けてください。RGBの3つの数値が自動的に入力されます。たとえば、#FF8800は255、136、0となります。
16進数のコードには「#」記号が必要ですか？
いいえ。#の有無にかかわらず入力できますし、#FA0 のような短縮コードも使用可能です。結果には常に # が含まれるため、CSS でそのまま使用できます。
RGBの3つの数値は何を意味するのでしょうか？
これらは、赤、緑、青の光の量を表しており、0（なし）から255（最大）までの値をとります。0, 0, 0は黒、255, 255, 255は白です。
HSL値は何のためにあるのですか？
HSLでは、色を「色相」「彩度」「明度」で表現します。例えば、色を少し明るくするなど、手動で調整しやすい場合が多く、CSSでも直接使用できます。
コントラスト比からは何がわかるのでしょうか？
これは、その色に対して黒や白のテキストがどれほど目立つかを示しています。WCAGアクセシビリティガイドラインでは、通常のテキストの場合、4.5：1以上の比率が一般的な最低基準となっています。
透明感を取り入れることはできますか？
ここではできません。このツールは、アルファチャンネルを持たない不透明な色のみを扱います。透明度を設定するには、CSSのrgba()内でご自身でアルファ値を指定してください。
私のデータはどこかに保存されたり、送信されたりしていますか？
いいえ。変換処理はブラウザ上で行われ、お使いの端末からデータが外部に送信されることはありません。次回のために記憶されるのは、小文字を選択したかどうかのみです。
このツールを利用している方々から
レビュー
レビューを読み込んでいます…
頑張り続けよう
ツールボックスには他にもツールが入っています
このホームページには、APIキーを必要としない無料ツールが他にも数十種類掲載されています。