Utilore

RGB を HEX に変換

rgb(31, 95, 214) を貼り付ければ（カンマでも空白でも構いません）#1f5fd6 が得られます。CSS にもデザインファイルにもスタイルガイドにもそのまま使えます。

  • #1f5fd6 HEX
  • rgb(31, 95, 214) RGB
  • hsl(219, 75%, 48%) HSL

コントラスト:

使い方

  1. RGB か RGBA の値を貼り付けます。カラーピッカーで選んでも構いません。
  2. 他の形式の上に表示される HEX コードを確認します。
  3. HEX の行の横にある「コピー」を押します。

知っておくと便利

デザイナーが HEX を求める理由

HEX は三つの数値ではなく一つのまとまりなので、仕様書やチケット、チャットに貼っても桁が抜け落ちません。デザインツールが既定で表示する表記でもあるため、HEX で書いたパレットは全員が見ている値とそのまま一致します。

アルファ値の扱い

透過を含む rgba() を渡すと、結果は8桁の HEX になります。最後の 2 桁が 0〜255 のアルファ値です。新しいブラウザは正しく読みますが、古いものは読みません。互換性が必要な場面では rgba() のままにしてください。

よくある質問

数値を rgb(...) で囲む必要はありますか。

カンマ区切りでも空白区切りでも、rgb() と rgba() の完全な表記を受け付けます。255 を超える値は黙って巻き戻さず、上限で止めます。

HEX が8桁になるのはなぜですか。

色にアルファ値が含まれているからです。透過を外せば、通常の6桁のコードになります。

サーバーに何か送られますか。

送られません。変換はすべてページ内で行われるため、未公開のブランドカラーも手元に残ります。

関連ツール