Color
カラーコンバーター
HEX、RGB、HSL の間で変換します。
色のフォーマットについて
同じ色は HEX（#ff6600）、RGB（rgb(255, 102, 0)）、HSL（hsl(24, 100%, 50%)）として表現できます。これらは同じ色を表す3つの異なる方法で、それぞれ異なる場面に適しています。
HEX にはコンパクトな省略形があります。#f60 のような 3 桁のコードは、各桁を単に倍にするだけで 6 桁の #ff6600 と完全に等価になり、#ff6600cc のような 8 桁の形式は rgba() や hsla() と同じ方法でアルファチャンネルを追加します。このツールは入力として省略形を受け付けて正規化しますが、出力は常に完全な 6 桁または 8 桁の形式にするため、結果はどこに貼り付けても曖昧さがありません。このツールが行わないことが一つあります。色のアクセシビリティコントラストのチェックや色覚多様性のシミュレーションです。これはフォーマット変換とは別の、同じくらい重要なデザイン上の課題です。
使われる場面
- デザイナーから渡された HEX のスウォッチを、コードベースで既に使われている RGB や HSL に変換する
- 明度や彩度の調整は、RGB より HSL のほうがはるかに直感的に扱える
- ブラウザの計算済みスタイルから色を読み取り、デザイン仕様に合わせて変換する
- 採用する前に、CSS の色の値が実際にどのように表示されるかを確認する
よくある質問
RGB で十分なのに、なぜ HSL があるのですか？
RGB は色を赤・緑・青の光の強さとして表しますが、人間が色を考える方法とはあまり対応しません。HSL は色相・彩度・明度を分けて表すため、「もっと暗くする」「もっと鮮やかにする」といった調整が、3つの値を計算し直す代わりに1つの数値の変更だけで済みます。
rgba()/hsla() のアルファ値は何を意味しますか？
不透明度を表し、0（完全に透明）から1（完全に不透明）までの値です。このツールは、入力にアルファ値が含まれている場合、8桁の HEX を含むすべての形式でそれを保持します。
「tomato」のような名前付きの CSS カラーには対応していますか？
まだ対応していません。対応しているのは HEX、RGB(A)、HSL(A) の入力のみです。名前付きカラーから始める場合は、まずその HEX 値を調べてください。
#f60 は #ff6600 と同じ色ですか？
はい、まったく同じです。3 桁の HEX 省略形は各桁を倍にして完全な形にします。f は ff に、6 は 66 に、0 は 00 になります。これは特定の色（各チャンネルがたまたま同じ桁を繰り返しているもの）を短く書く方法にすぎず、異なる色空間やより低い精度を意味するものではありません。このツールはどちらの長さも受け付け、常に完全な 6 桁または 8 桁の形式を出力します。