HEXをRGBに変換
HEXカラーコードを貼り付けると、rgb()やrgba()としてそのままコピーできるRGB値が得られます。
入力色
変換する色を入力してください…
HEXカラーコードをRGBに変換
デザインファイルやブランドガイドでは色がHEXコードで示されることが多い一方、canvasのコード、SVGの属性、画像ライブラリ、透明度を使うCSSではRGBの数値が求められがちです。2つの記法はまったく同じものを表しているので、相互に変換しても情報は失われません。
このページは、HEX入力を選択し例の値を読み込んだ状態でカラー変換ツールを開きます。自分のコードに置き換えてください。
変換の仕組み
HEXカラーは、赤・緑・青の3バイトを16進数で書いたものです。各組は00からFFまで、10進数では0から255の範囲です。1組を変換するには、1桁目に16を掛けて2桁目を足します。AからFは10から15を表します。
| HEX | 組 | RGB |
|---|---|---|
#0A84FF | 0A · 84 · FF | rgb(10, 132, 255) |
#FF5733 | FF · 57 · 33 | rgb(255, 87, 51) |
#FFF | FF · FF · FF | rgb(255, 255, 255) |
#000000 | 00 · 00 · 00 | rgb(0, 0, 0) |
短縮形とアルファ
- 3桁：各桁を2回繰り返すので、
#0AFは#00AAFFです。 - 4桁：同じく各桁を繰り返し、4桁目がアルファになります。
- 8桁：最後の組が00（透明）からFF（不透明）までのアルファで、0〜1の値を持つ
rgba()として表示されます。 - 先頭の
#は省略でき、小文字でも大文字でも動作します。
コードでHEXをRGBに変換する
JavaScriptではparseInt('84', 16)が132を返すので、3つの組それぞれにこの呼び出しを行えば変換が完了します。Pythonでは、#を除いた6桁の文字列に対してtuple(int(h[i:i+2], 16) for i in (0, 2, 4))が同じ処理をします。最近のCSSはどちらの記法もそのまま受け付けるので、変換が必要になるのは、ツールやAPIがどちらか一方を要求する場合だけです。
関連する変換
逆方向のRGBをHEXに変換では、チャンネル値をコードに戻せます。明るい色や暗い色のバリエーションを作るなら、たいていHEXをHSLに変換のほうが便利です。またカラーコントラストチェッカーを使えば、その色が背景の上で読みやすいかどうかが分かります。