カラーコードコンバーター
Web開発における色は、hex、RGB、HSL、名前付きカラーなど複数のフォーマットで指定できます。このツールはすべてのフォーマット間で変換し、ビジュアルプレビューを表示し、アクセシビリティのためのコントラスト比を計算し、補色カラーパレットを生成します。
仕様
よくあるユースケース
- デザイナー提供のhexカラーをHSLに変換して操作を容易に
- テキストカラーがWCAGアクセシビリティ基準を満たしているか確認
- UIデザイン用のカラーパレット生成
- 期待通りに表示されないCSSカラー値のデバッグ
- CSS名前付きカラーのhex相当値を検索
機能
- hex（#RGB、#RRGGBB、#RRGGBBAA）、RGB、RGBA、HSL、HSLA、名前付きカラーの解析
- すべてのカラーフォーマット間の即座の変換
- HEX8出力（アルファ付き8桁hex）
- ダーク/ライト背景切り替え付きビジュアルカラープレビュー
- 白と黒の背景でのサンプルテキストプレビュー
- 黒と白に対するWCAGコントラスト比の計算
- 明るい/暗いカラーの分類
- 補色、類似色、トライアド、テトラド、モノクロマティックカラーパレットの生成
- 輝度とアクセシビリティ推奨の表示
例
ヒント
- HSLは操作が簡単です: Hは色相、Sは彩度、Lは明度です。
- アクセシブルなテキストには、少なくとも4.5:1のコントラスト比（WCAG AA）を目指してください。
- 8桁hexフォーマット（#RRGGBBAA）にはアルファ透過度が含まれます。
- CSS4はoklch()のような新しい色空間を導入し、知覚的均一性を向上させます。
解説 カラーコードコンバーター
CSSカラー値はいくつかの表記法を使用してWebスタイリングの色を定義します。最も一般的なのは16進数（#RRGGBB）で、各16進数のペアが赤、緑、青のチャンネルを00（0）からFF（255）まで表します。短縮形#RGBは各桁を2倍にします（#F00は#FF0000と等しい）。8桁形式#RRGGBBAAはアルファ透過チャンネルを追加します。
関数記法はより直感的なカラー指定を提供します。RGB（rgb(255, 0, 0)）はチャンネルを0-255の整数またはパーセンテージで指定します。HSL（hsl(0, 100%, 50%)）は色相（0-360度のカラーホイール）、彩度（0-100%）、明度（0-100%）を使用し、多くのデザイナーがカラーパレットの作成や色の調整においてより直感的と感じます。RGBとHSLの両方がrgba()とhsla()、またはモダン構文rgb(255 0 0 / 50%)でアルファ透過をサポートしています。
カラーアクセシビリティはWeb開発における重要な関心事です。WCAG 2.1は最小コントラスト比を定義しています: 通常テキストは4.5:1（レベルAA）、大きなテキストは3:1、強化コントラストは7:1（レベルAAA）。不十分なコントラストは、弱視や色覚異常のあるユーザーにとってテキストを読みにくくするか、不可能にします。
CSSは148の名前付きカラー（rebeccapurple、cornflowerblue、tomatoなど）、currentColorキーワード、およびHWB（色相-白さ-黒さ）、LAB、LCH、OKLCHなどの新しい色空間もサポートしており、知覚的に均一なカラー操作を提供します。新しい色空間は調和的なカラーパレットとスムーズなグラデーションの生成に特に有用です。
Hex（#FF0000）とRGB（rgb(255,0,0)）はどちらも赤、緑、青のチャンネル値を指定します。hexは16進数、RGBは10進整数を使用します。HSL（hsl(0,100%,50%)）は色相（0-360度のホイール上の色そのもの）、彩度（強度）、明度（明るさ）で色を表現し、多くの開発者がバリエーション作成においてより直感的と感じます。3つのフォーマットはすべて同じ色を表現できますが、HSLでは単一の値を調整するだけで明るい、暗い、またはより抑えたバリアントを簡単に作成できます。
アルファチャンネルは透過度を0（完全に透明）から1（完全に不透明）のスケールで制御します。hex表記では、アルファは2桁の追加桁として付加されます。#FF000080は50%透明な赤を表します（80 hex = 128 decimal）。関数記法では、構文はrgba(255,0,0,0.5)またはモダン形式rgb(255 0 0 / 50%)です。アルファ透過はオーバーレイ、透かし、レイヤードUI要素に不可欠です。WCAGコンプライアンスについては、レベルAAは通常テキストに少なくとも4.5:1、大きなテキスト（18px以上のボールドまたは24px以上の通常）に3:1のコントラスト比を要求し、レベルAAAは通常テキストに7:1、大きなテキストに4.5:1を要求します。アイコン、ボーダー、フォームコントロールなどの非テキスト要素は、隣接する色に対して少なくとも3:1のコントラストが必要です。
LABとOKLCHは知覚的に均一な色空間で、等しい数値変化が視覚的に等しい色の差異を生成するため、パレットやスムーズなグラデーションの生成に優れています。OKLCH（明度、彩度、色相）はCSSにおいて特に有用で、明度の調整が自然で予測可能な結果を生み出します。どちらもモダンCSSでoklch()およびlab()関数としてサポートされています。