カラーを選択するか、任意の形式で数値を入力してください。ライブプレビューサンプルとワンクリックコピーでHEX、RGB、HSLを瞬時に変換します。
カラーはWeb上で最も強力なデザイン要素の一つで、CSSに適したフォーマットを選ぶことで作業効率に大きな差が生まれます。最も広く使用されている3つのカラーフォーマット—HEX、RGB、HSL—はすべて1600万色以上の同じスペクトルを表現しますが、読みやすさや操作性に大きな違いがあります。#3b82f6 のようなHEXコードはコンパクトでCSSに広く使われ、rgb(59, 130, 246) のようなRGB値は画面が色を描画する際の赤・緑・青の光チャネルに直接対応しています。
HSL（色相、彩度、明度）は、人間が自然に色を認識する方法と合致するため、デザイナーにますます支持されています。抽象的なチャネル値を混ぜる代わりに、色相環上で色相（0-360度）を選び、彩度（0-100%）で強さを設定し、明度（0-100%）で明るさを調整します。これにより、調和の取れたパレット作成が簡単になります：色相を固定し、彩度と明度を変えるだけで同一色のティント、シェード、トーンを生成できます。最新のCSSカスタムプロパティはHSLと特に相性が良く、ベースの色相を定義すればそこから全パレットを導出できます。
見た目が良いカラーを選ぶだけでは不十分です—アクセシビリティも確保しなければなりません。Web Content Accessibility Guidelines（WCAG 2.1）では、通常テキストのコントラスト比を最低4.5:1、大きなテキストを3:1と定めています。男性の約8%、女性の0.5%が何らかの色覚異常を抱えているため、情報伝達を色だけに依存するのは典型的なアクセシビリティの落とし穴です。常にコントラストチェッカーと併用し、色覚シミュレーションフィルターでデザインを確認しましょう。このコンバータはカラー値を素早く試行でき、さまざまな組み合わせをテストし、美観と可読性の最適なバランスを見つけるのに役立ちます。