CSSカラーコードジェネレーターとは？
任意の色をCSSに対応するすべての形式（HEX・RGB・RGBA・HSL・HSLA・OKLCH・CSS名前付き色）に変換するツールです。視覚的に色を選ぶか任意の形式で入力すると他のすべての形式が即座に表示され、WCAG のコントラストチェックも付きます。
16 進数の値を入力する、カラーピッカーをドラッグする、RGB スライダーを動かす、既存の rgb() や hsl() の文字列を貼り付ける、いずれの方法でも入力できます。他のフォーマットがリアルタイムで計算され、知覚的に均一なパレット向けの OKLCH も含まれ、W3C の 147 個の CSS 名前付き色から最も近いものも表示します。アルファ値は不透明度を 100 % 未満に下げたときだけ rgba() と hsla() に現れます。コントラストパネルは白背景と黒背景に対する WCAG 比を示すので、その色が文字として読みやすいかひと目で分かります。
使い方
- ビジュアルピッカーで色を選択するか、HEX・RGB・HSLなどのサポートされている形式で値を入力します。
- すべてのCSS形式で同時に表示された色を確認し、各形式をワンクリックでコピーします。
- アルファスライダーで透明度を調整してRGBAおよびHSLAの値を取得し、必要なCSSコードをコピーします。
使用するタイミング
- デザイナーから渡された HEX を、使っている CSS フレームワークが要求する形式に変換する。
- カラーパレットを組むときに HSL を使って一貫した明・暗の濃淡を派生させる。
- オーバーレイ、影、ホバー状態のためにブランドカラーへ透明度を加える。
結果
フロントエンド開発者がブランドのオレンジ #F97316 を選択すると、rgb(249, 115, 22)、hsl(25, 95%, 53%)、その他すべての形式が即座に表示され、スタイルシート全体で一貫して使用できます。
よくある質問
- 名前付き色の欄が空のことがあるのはなぜですか?
- CSS には 147 個の名前付き色しかなく、HEX 値がそのいずれかと完全一致しないと表示されません。ほとんどのブランドカラーは 2 つの名前付き色の間にあるため、これは正常です。この欄は tomato や steelblue のような定番色の確認に使います。
- HEX や RGB ではなく HSL を使うのはどんなとき?
- HSL は手作業での調整が直感的です。明度を +10 すれば一段明るくなり、色相を +30 すればカラーホイール上で少し回ります。スケールを設計するときデザイナーは HSL を好みます。RGB と HEX は最終的なスタイルシートで文字数がやや少なくなります。
- 不透明度スライダーは色そのものを変えますか、それとも透明度だけ?
- アルファチャンネルだけが変わり、R・G・B の値はそのままです。だから rgba(255, 0, 0, 0.5) を白背景に重ねるとピンクに見えます。赤は同じで、後ろの色と 50/50 で混ざっているのです。
- これらの CSS 値はすべてのブラウザで使えますか?
- HEX、RGB、RGBA、HSL、HSLA、名前付き色は 15 年前の IE11 までさかのぼって普遍的に対応しています。OKLCH もここで生成され、最新のもの(2023 年以降の Chrome、Firefox、Safari、Edge)ならどこでも動きますので、かなり古いエンジンを対象にする場合は hex か rgb() のフォールバックを残してください。
- ウェブサイトで見た色の HEX を取得するには?
- 「画面から取得」を押すとスポイトが開き、画面上の任意のピクセル——ページ、画像、デザインカンプ——をクリックすれば、その色がすぐに読み込まれます。(スポイトは Chrome・Edge・Opera で使えます。Safari や Firefox では OS 標準のスクリーンカラーピッカーで HEX を取得し、HEX 欄に貼り付けてください。)どちらでも、すべての等価フォーマットと不透明度を変えた変種を一度に確認できます。