HEX・RGB変換ツール
上の入力欄で色を選ぶかHEX・RGB・Alphaを入力すると、下のプレビューと出力形式がすぐ更新されます。
色を入力
#あり／なし・3桁／6桁 · RGBは0〜255、Alphaは0〜100の範囲で入力します。
プレビューと結果
白背景に合成したコントラスト
透明色のコントラストは実際の下地によって変わります。
出力形式
カラーハーモニー
最近使った色
すぐ使える形で。
- すぐ見える画面入力場所と結果の場所をはっきり分けます。
- 結果を先に大事な数字を先に出し、過程は必要な分だけ見せます。
- 求めるものを減らす登録や余計な入力なしで使えるようにします。
色コードを使う場所に合わせて書き換える
HEXとRGBは、同じsRGB色を別の記法で表したものです。どの入力欄から始めても、プレビューと出力形式は同じ色にそろいます。
透明度が必要か、貼り付け先が受け付ける記法は何か、文字が背景から読めるかを分けて確認すると迷いません。
6桁のHEXは3つのチャンネル
#RRGGBBの各2桁は、赤・緑・青の16進数値です。RGBでは同じ値を0〜255の数字で書きます。
手元にある記法から始める
デザインにHEXがあればHEX欄、コードにRGBがあればRGB欄へ入れます。#の有無は問いません。#f80のような3桁表記は6桁へ展開されます。
Alphaは不透明度を表す
Alpha 100%は不透明、0%は見えない状態です。RGBが同じでも、Alphaが違えば背後の色との見え方が変わります。
コピー形式は貼り付け先で選ぶ
不透明な色にはHEXまたはRGB、透明度を含めるならHEXAまたはRGBAを選びます。HSLとHSVは色相や彩度を読むときに便利です。
白と黒のコントラストは入口です
カードは現在色を背景にした白文字・黒文字の比率を示します。文字サイズ、太さ、画像背景まで判定するものではありません。
配色候補は色相環から作られます
補色は反対側、類似色は近い角度、三色配色は三方向の色です。候補を選んだ後も実際の組み合わせを確認してください。
#FF8800をRGBで読む
#FF8800はrgb(255, 136, 0)です。赤が最大で、緑が一部、青が0のオレンジ系になります。
半透明のオレンジをコピーする
#FF8800でAlphaを50%にすると、RGBAはrgba(255, 136, 0, 0.50)、HEXAは#FF880080です。見え方は背景で変わります。
最近使った色の保存範囲
選んだ色は現在のブラウザで呼び出せます。別の端末やブラウザへ自動で共有される履歴ではありません。
貼り付け前の確認項目
RGBが0〜255に収まっているか、Alphaが必要か、対象の文法に合うか、実際の背景で文字が読めるかを確認します。
出力形式の使い分け
- HEX: 不透明な6桁コード
- HEXA: Alphaを含む8桁コード
- RGB・RGBA: 数値チャンネルを使う記法
- HSL・HSV: 色の性質を調整・確認する記法
- CSS: 宣言を1行でコピーする場合
コントラストを見るときの条件
- 通常文か大きな文字か
- 文字の太さと実際の文字色
- 背景に画像やグラデーションがあるか
- 半透明の色が重なるか
入力値の範囲
- HEXは#あり／なしと3桁短縮に対応
- RGBの各値は0〜255
- Alphaは0%〜100%
- 不透明色ならAlpha 100%を確認
例: #FF8800とAlpha 50%
| 入力HEX | #FF8800 |
|---|---|
| RGB | rgb(255, 136, 0) |
| Alpha | 50% |
| RGBA | rgba(255, 136, 0, 0.50) |
| HEXA | #FF880080 |
色コード変換についての質問
HEXコードに#は必要ですか？
いいえ。#FF8800とFF8800のどちらも入力できます。#f80のような3桁短縮形も受け付け、結果は6桁HEXに整えます。
Alpha 50%は何としてコピーされますか？
#FF8800でAlphaを50%にすると、RGBAはrgba(255, 136, 0, 0.50)、HEXAは#FF880080です。
HEXAとRGBAはどちらを使いますか？
貼り付け先が対応する記法を選びます。どちらも色とAlphaを含みますが、HEXAは8桁HEX、RGBAは関数記法です。
HSLとHSVはRGBと別の色ですか？
いいえ。同じ表示色を、色相・彩度・明度または明るさから表した値です。
コントラスト比だけでアクセシビリティを判断できますか？
いいえ。このツールは白文字と黒文字の比率を示します。実際の文字サイズ、太さ、背景、使用場面も確認してください。
最近使った色は他の端末にも表示されますか？
いいえ。最近使った色は現在のブラウザ内の記録で、別の端末やブラウザには自動同期されません。
色の記法とコントラストの基準は公開仕様を参照します。貼り付け先で使える形式は別途確認してください。