HEXカラーコードをRGBに変換する方法

HEXとRGBは、まったく同じ色を書く2つの方法です。デザイナーと開発者は、CSSスタイルシートのHEX、JavaScriptアニメーションのRGB、デザインツールのHSLとの間で常に切り替えています。それらの関係を理解することで、色作業がはるかに簡単になります。

HEXの仕組み

#FF5733のようなHEXカラーコードは、赤、緑、青のチャンネルを表す6桁の16進数です:

各チャンネルは00(0、色なし)からFF(255、最大強度)までの範囲です。したがって、#FF5733は最大の赤、適度な緑、わずかな青を意味します — 暖かいオレンジレッドを与えます。

HEXをRGBに変換する方法

1. HEXコードを入力 — #FF5733のようなコードを入力または貼り付けるか、カラーピッカーを使用します。
2. RGB値を確認 — 赤、緑、青の同等値(各0〜255)を表示します。
3. 任意の形式でコピー — rgb(255, 87, 51)、個々のチャンネル、またはHSLなどの他の形式で値を取得します。

一般的なカラーコード

ヒント

• CSSでHEXを使用 — color: #FF5733は、スタイルシートでcolor: rgb(255, 87, 51)よりもクリーンで一般的です。
• 透明度にRGBを使用 — 半透明な色が必要なときは、rgba(255, 87, 51, 0.5)を使用します。標準HEXでアルファを追加する方法はありません(8桁HEXは存在しますが、ブラウザのサポートは異なります)。
• 3桁ショートカット — #F00は#FF0000と同等です。各ペアに同じ桁がある場合に使用してスペースを節約します。
• カラーピッカーが速い — 適切な色を探している場合、HEX値を推測するのではなく、視覚的なピッカーを使用します。満足したらコードをコピーします。