HEXとRGBのカラーコードを相互変換

デザイナーやサイト制作者が、画面とCSSと仕様書の間で同じ色を正確に受け渡したいときに役立ちます。

HEXとRGBの色指定を相互に変換し、見た目を保ったままCSS、デザイン資料、仕様書へそのまま貼り付けられる正確な値を取得できます。

使い方

  1. 入力エリアに16進数またはRGB表記で色を入力します。
  2. HEXからRGB、RGBからHEX、HEXからHSLなど、必要な変換を選択します。
  3. 変換を実行し、結果エリアに対応する値を表示します。
  4. プロジェクトやソフトウェアで必要な場合は、HSL、HSV、CMYKのオプションを使用します。
  5. 表記をスタイルシート、モックアップ、ドキュメントにコピーします。

使用例

用意されている緑のサンプルでは、表示されるHEXとRGBの同等値を確認します。これにより、手計算で値を再計算せずに、モックアップからスタイルシートへ移しやすくなります。

入力

rgb(22, 163, 74)

出力

HEX: #16A34A
RGB: rgb(22, 163, 74)

制限と形式

処理の場所

変換はブラウザ内で実行されます。入力した色はローカルにとどまり、外部に送信されたりページに保存されたりしません。ファイルを作成せずに、何度も連続して変換できます。

よくある質問

HEXとRGBの違いは何ですか？

HEXは16進数の数字を使い、主にCSSで用いられます。一方、RGBは赤、緑、青の3つの値を示します。どちらも画面上の同じ色を異なる表記で表します。

CMYKの結果はそのまま印刷に使えますか？

いいえ、単純な数値上の同等値を提供するだけです。プロの印刷には、印刷機、インク、紙に合わせたカラープロファイルが必要です。

HEXコードを知らなくても色を変換できますか？

RGB値があれば入力できます。ない場合は、カラーピッカーで色を取得し、その表記をコンバーターに貼り付けてください。

同じカテゴリのツール