カラーコード変換
カラーコンバーターは、どんな記法の色も読み取ります。ハッシュ付きでも無しでもよいhex、rgb()、hsl()、hsb()、oklch()、148のCSS色名のいずれかです。読み取った色は、すべての記法で一度に出力します。カンマ区切りとスペース区切りの両方の構文に対応し、出力先の形式で保持できる場合はアルファも維持します。読み取れない入力には、黒ではなく何も返しません。
左側に色を入力してください。# の有無を問わない16進数の値、 rgb(), hsl(), oklch() および CSS の色名に対応しています。
カラーコード変換はどう動きますか？
すべての変換はsRGBを経由します。入力したものは3チャネルとアルファにパースされ、すべての出力はそこから描画されます。だから変換に一貫性があるのです。中間には1つの表現があり、互いに食い違い得る15通りの対ごとの式があるわけではありません。
パーサーが受け付ける入力
3桁、4桁、6桁、8桁のhex。先頭のハッシュはあっても無くても構いません。ハッシュ無しのhexが重要なのは、表計算ソフトやデザイントークンのファイルからは、その形で値が届くからです。CSSの両構文、rgb(255, 136, 0)とrgb(255 136 0 / 50%)のどちらも受け付けます。パーセントも使え、rgb()では100ではなく255を基準に解決されます。そのほか、hsl()、hsb()、hsv()、oklch()、そして148のCSSカラーキーワードすべてに対応しています。
読み取れない入力の扱い
その旨を表示します。タイプミスを黙って黒に変えるカラーツールは、入力を拒否するツールより有害です。色見本が出てきて、それを信用し、そのまま出荷してしまうからです。桁数の違うhex（5桁、7桁）は色ではなくタイプミスです。それらしい値に補完するのではなく、拒否します。
正確な変換と、そうでない変換
Hex、RGB、HSL、HSVは、同じ3バイトを別々の座標で表したものです。この4形式の間は完全な往復ができ、誤差の上限は出力を何桁まで印刷するかだけです。
OKLCHもその方向なら正確です。ただしOKLCHは、sRGBでは表示できない色まで記述できます。oklch(0.7 0.3 140)は完全に有効な座標でありながら、それに対応するsRGBのピクセルは存在しません。変換するとクリッピングが起きるため、異なる2つのOKLCH値が同じhexに落ちることがあります。これは色域の性質であって、計算のバグではありません。
CMYKは近似です。本当の変換には、印刷機、用紙、インクそれぞれのICCプロファイルが必要で、同じsRGB値でもコート紙と新聞紙ではインクの割合が変わります。ここで表示される数値は、どのオンラインコンバーターも使っているデバイス非依存の式によるものです。色見本を選ぶには正しく、印刷仕様としては不正確です。
任意の記法
#ff8800 rgb(255, 136, 0) hsl(32 100% 50%) darkorange FF8800
すべての形式
hex #ff8800 rgb rgb(255 136 0) hsl hsl(32 100% 50%) hsv hsv(32 100% 100%) oklch oklch(0.7538 0.1751 55.94) cmyk cmyk(0% 47% 100% 0%)
カラーコード変換が対応するオプションとエッジケースは？
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| HEX | 入力 / 出力 | 正確 | ハッシュの有無に関わらず、3桁、4桁、6桁、8桁に対応。大文字・小文字は区別しません。 |
| RGB | 入力 / 出力 | 正確 | 整数とパーセンテージの両方の記法に対応。スラッシュの後にアルファ値を、または4番目の引数として指定できます。 |
| HSL | 入力 / 出力 | 正確 | 同じ3つのバイトを極座標で表現します。色相はラップされるため、370は10と同じです。 |
| HSV / HSB | 入力 / 出力 | 正確 | 多くのデザインツールの基盤となっているものです。有効なCSSではないため、読み取りは可能ですが、推奨される出力ではありません。 |
| OKLCH | 入力 / 出力 | クリップ | 知覚的に均一で、sRGBより広い色域です。色域外の座標は、変換時にクリップされます。 |
| CMYK | 出力 | 近似 | デバイスに依存しないフォーマットです。プリンターは独自のプロファイルを使って実際の変換を行います。 |
| 色名 | 入力 | 148 | すべてのCSSキーワードと`transparent`に対応。 |
| アルファ | 0–1 | 保持 | アルファ値を表現できるすべてのフォーマットで保持されます。CMYKは保持できず、削除されます。 |
よくある質問
貼り付けられる色の形式は何ですか？
ハッシュ付きでも無しでもよい、3桁・4桁・6桁・8桁のhex。カンマ区切りとスペース区切りのどちらの構文でもよいrgb()とrgba()。hsl()とhsla()。hsb()またはhsv()。oklch()。そして148のCSS色名のどれか。パーセントはCSSで許される場所ならどこでも使えます。パースできれば、他のすべての形式が即座に表示されます。
OKLCHの値が違う色で返ってくるのはなぜですか？
OKLCHは、sRGBの画面で表示できる以上の色を記述できるからです。oklch(0.7 0.3 140)は有効な座標でも、対応するsRGBのピクセルが存在しないため、変換時には収まるまでクロマがクリッピングされます。鮮やかな2つの異なるOKLCH値が、同じhexに落ちることもあります。これは色域の性質であって、計算の問題ではありません。色域内の値が必要な場合は、このサイトのピッカーを使ってください。クリッピングではなくクランプを行い、何を変更したかも表示します。
印刷用のCMYKの数値として信頼できますか？
出発点としては使えますが、仕様としては使えません。CMYKはデバイス依存です。同じsRGB値でも、コート紙と非コート紙ではインクの割合が変わり、印刷機が違えばさらに変わります。どの印刷機を使うのか、オンラインコンバーターには分かりません。sRGBかPantoneの参照値を印刷会社に送り、その案件用のプロファイルで変換してもらってください。
色ではないものを貼り付けるとどうなりますか？
何も出力されず、入力欄が読み取れなかったことを示します。これは意図的な挙動です。タイプミスに対して黙って黒を返すコンバーターは、疑う理由のない色見本を渡してきます。桁数の違うhex（5桁や7桁）は、補完して色にすべきものではなく、タイプミスです。
入力した内容はサーバーに送信されますか？
いいえ。ここでの変換はすべて、このタブ内での計算です。ページは読み込み後、ネットワーク要求を一切行いません。ネットワークパネルを開いて確認してもいいですし、もっと簡単には、通信を切っても動き続けるのを見てください。
CSSで実際に使うべき形式はどれですか？
固定のブランドカラーにはHEX。数値を1つ動かすだけで明るいバリエーションや暗いバリエーションを作りたいときはHSL。知覚的な均一さが重要なときはOKLCHです。OKLCHで明度を10ポイント動かすと、どの色相でも同じ大きさの変化に見えます。HSLではそうなりません。3つとも同じ色を記述しており、違うのは、どの調整が手作業でやりやすいかです。