RGB → HEX カラー変換ツール

このツールとは RGB → HEX カラー変換ツール

このツールはRGB値(例:rgb(59, 130, 246))をHEXカラーコード(例:#3B82F6)に変換します。RGBはデザインツールやJavaScriptでよく使われますが、CSSやHTMLではHEXが標準形式です。R・G・Bそれぞれ0〜255の値を入力するだけで、ライブプレビュー付きのHEXコードを即座に取得できます。

使い方

  1. RGBフィールドに赤・緑・青の値(0〜255)をそれぞれ入力します。
  2. HEXコードとHSL値がリアルタイムで更新されます。
  3. 各フォーマット横のコピーボタンでクリップボードにコピーできます。
  4. 上部のリンクから他のカラー変換モードに切り替えられます。

こんなときに便利

JavaScriptのCanvas APIから受け取った色がRGBの数値のままで、CSSではHEXが必要ですか。R:230、G:57、B:70を入力すれば#e63946がすぐに得られ、CSSカスタムプロパティやデザイントークンにそのまま貼り付けられます。デザインツールがRGBを返すのにコードはHEXを求める、そんなときの変換の手間も省けます。

よくある質問

rgb(255, 0, 0)はHEXで何になりますか?

純粋な赤rgb(255, 0, 0)は#ff0000です。16進数のFFは10進数の255に相当します。

RGBとHEXは常に等価ですか?

はい。すべてのRGB値には対応するHEX値が存在します。これらは同じ8ビット/チャンネルの色空間を異なる記法で表したものです。

rgb(0, 0, 0)はHEXで何になりますか?

黒rgb(0, 0, 0)は#000000で、rgb(255, 255, 255)は白の#ffffffとなります。

関連ツール