カラーコード変換

どの形式のカラーコードでも貼り付けるだけで、ほかのすべての形式でコピーできます。HEX から RGB、RGB から HEX、HEX から HSL、OKLCH 変換、HEX から CMYK、Display P3 などに対応しています。

カラーコードの変換方法

  1. CSS のどの形式でも、色を貼り付けるか入力します。hex、rgb()、hsl()、hwb()、lab()、lch()、oklab()、oklch()、color()、CMYK の値、coral などの色名に対応しています。
  2. ステータス行で、読み取った内容を確認できます。不透明度や、その色が sRGB や Display P3 の範囲に収まるかどうかも表示されます。
  3. 形式の一覧から、好きな行をコピーします。Web、知覚、デバイス、ネイティブコードの順にグループ分けされています。
  4. ページのアドレスが入力した色に合わせて更新されるので、変換結果をブックマークしたり共有したりできます。

できること

  • Web 形式

    HEX（不透明度があるときは 8 桁の HEX）に加えて、RGB、HSL、HWB を CSS の書式で出力します。

  • 知覚ベースの形式

    CIE Lab、LCH、OKLab、OKLCH に加えて、そのまま使える Tailwind v4 のテーマ変数も出力します。

  • Display P3 と CMYK

    広色域の Display P3 と、簡易的な CMYK の推定値に対応。sRGB の範囲外の色には、色域マッピングした値とクリップした代替値の両方が出ます。

  • ネイティブコード

    Android ARGB、Swift UIColor、SwiftUI Color、Flutter Color の値を、そのまま貼り付けられる形で出力します。

  • 不透明度

    アルファ値のある色は、対応するすべての形式で不透明度を保ちます。

  • 例と次のステップ

    入力例を試したり、その色のページでシェードやハーモニーを見たり、コントラストを確認したりできます。

よくある質問

HEX を RGB に変換するには？

#3B82F6 のような HEX コードを貼り付けて、RGB の行をコピーします。手計算なら、6 桁を 2 桁ずつ 3 組に分け、それぞれを 16 進数から 0〜255 の数値に変換します。3B は 59、82 は 130、F6 は 246 なので、#3B82F6 は rgb(59, 130, 246) です。

RGB を HEX に変換するには？

rgb() の値を入力して、HEX の行をコピーします。手計算なら、各チャンネルを 2 桁の 16 進数にして並べます。59、130、246 は 3B、82、F6 になり、#3B82F6 となります。

HEX、RGB、HSL の違いは？

HEX と RGB は、混ぜる赤・緑・青の光の量を表すという点で同じものです。HEX は 3 つの量を 16 進数で、RGB は 10 進数で書きます。HSL は代わりに色相、彩度、明度で表すため、手で調整しやすい形式です。

OKLCH とは？

OKLCH は、明度、彩度（クロマ）、色相の 3 つで表す CSS の色形式です。OKLab 色空間をもとにしており、数値が等間隔で変わると見た目も等間隔に変わるため、HSL のように明度を変えると見かけの色相がずれるということがありません。最近のブラウザーでは oklch() で使えます。

CMYK の値は印刷に使える精度ですか？

いいえ。CMYK の値は ICC プロファイルを使わない簡易的な計算式で求めているため、印刷すると色が変わります。出発点として使い、印刷会社で色校正を確認してください。