カラーコード変換

HEXとRGBのカラーコードを相互変換します。

R
G
B
rgb(59, 130, 246)

このツールについて

Web制作やデザインの現場では、色を指定する方法としてHEX(16進数)表記とRGB(赤緑青の数値)表記の両方がよく使われます。ツールやライブラリによって対応している表記形式が異なるため、相互変換が必要になる場面は少なくありません。

当ツールはカラーピッカーで色を選ぶだけで、HEXとRGBの両方の値を同時に確認・コピーできます。CSSのコーディングやデザインカンプの色確認に活用してください。

使い方

  1. 1

    カラーを入力

    HEXまたはRGBのいずれかの形式でカラーコードを入力します。

  2. 2

    自動変換

    入力に応じて他の形式に自動変換されます。

  3. 3

    プレビュー確認

    見本で実際の色を確認できます。

  4. 4

    コピー

    必要な形式のカラーコードをコピーします。

よくある質問

HEXコードとRGB値はどちらを使えばいいですか?
CSSではどちらも有効です。HEXは短く書けるため簡潔ですが、RGBは透明度(アルファ値)を加えたrgba()表記に展開しやすいという特徴があります。用途に応じて使い分けてください。
HEXコードの先頭の#は必要ですか?
CSSで色を指定する場合は#が必須です。当ツールでは#の有無を気にせず入力しても自動的に補正して変換します。
カラーコードをデザインツールと共有するには?
変換後の値をコピーボタンでクリップボードにコピーし、FigmaやAdobe XDなどのカラー入力欄にそのまま貼り付けられます。

他のツールも見る

ツール一覧すべてのツールを見る