RGB 色を HEX に変換する(逆変換も)

色の値を rgb() と #rrggbb 表記の間で変換します。CSS 作業に欠かせないアルファチャネルの扱いにも対応します。

1

カラーコンバーター →
rgb(90, 200, 250) を貼り付けると #5AC8FA が得られます。hex 値を貼り付けると rgb() 形式が得られます。アルファ付き 8 桁 hex(#5AC8FAFF)は rgba() 表記に変換されます。
2

知っておくべき詳細:HEX と rgb() は同じ色空間(sRGB)の異なる構文です。変換はロスレスです。3 桁 hex(#F0A)は #FF00AA の省略形です。CSS の色も使えます。名前付きカラーと hsl() の入力も変換されます。精度が重要な場合(デザイントークン)は、3 桁の省略形より 6 桁 hex または rgb() を優先してください。
3

コントラストチェッカー →
変換後、背景に対する色を確認してください。WCAG のコントラスト比で、テキストがアクセシビリティのしきい値を満たすかが決まります(本文 4.5:1、大きいテキスト 3:1)。

よくある質問

HEX は RGB より正確ですか?: いいえ。両者は同じ sRGB 値を表します。#5AC8FA と rgb(90, 200, 250) は同じ色です。ツールが期待する方を使ってください。
アルファはどう扱われますか?: 8 桁 HEX はアルファを最後のバイトとしてエンコードし(#RRGGBBAA)、rgba() はアルファを 0〜1 で受け取ります。アルファ FF / 1.0 は完全に不透明です。

このタスクを解決するワークフロー

Hex カラーから RGB とコントラストチェック

Hex カラーを RGB に変換し、その後 WCAG コントラスト比をチェックする。

パイプライン

関連ツール

カラーコンバーター

Convert colors between HEX, RGB, HSL, HSV, and CMYK color spaces. Auto-detects input format。無料、プライベート、100%クライアントサイド。

コントラストチェッカー

Check WCAG color contrast ratio between foreground and background colors and verify AA/AAA compliance。無料、プライベート、100%クライアントサイド。

カラーミキサー

Blend two colors by ratio using normal, multiply, screen, overlay, darken, or lighten blend modes。無料、プライベート、100%クライアントサイド。