カラーコンバーター

HEXはCSSスタイルシート、FigmaやSketchなどのデザインツール、コンパクトな形式での色の共有に最適です。

RGBは透明度を持つCSS（rgba）、画像編集ソフトウェア、コードでの動的な色操作に最適です。

HSLは色相を一定に保ちながら彩度と明度を調整してカラーパレットを作成する、ホバー状態を作成する、色の関係を直感的に理解するのに便利です。

HEXは6桁の16進数（基数16）表現です。各ペアは赤、緑、青を表します。#FF0000 = 赤、#00FF00 = 緑、#0000FF = 青。

RGBは赤、緑、青のチャンネルに0-255の3つの値を使用します。rgb(255, 0, 0) = 赤。値を混ぜることができます：rgb(128, 0, 128) = 紫。

HSLは色相（0-360°）、彩度（0-100%）、明度（0-100%）を使用します。色相はカラーホイールの位置、彩度は強度、明度は黒から白への変化です。

色がどのように連携するかを理解することで、より良いデザインの選択ができます。すべてのデザイナーが知っておくべき基本です。

補色はカラーホイールの反対側に位置します。赤と緑、青とオレンジ、黄色と紫。高いコントラストと視覚的な緊張感を生み出し、CTAボタンや重要な要素のハイライトに役立ちます。

類似色はカラーホイールの隣り合わせです。青、青緑、緑は一緒に調和します。落ち着いたプロフェッショナルな印象の統一感のあるデザインに適しています。

トライアドスキームはカラーホイール上で等間隔に配置された3色を使用します。バランスを維持しながら強い視覚的コントラストを提供します。原色や二次色を例として考えてください。

男性の約8%、女性の約0.5%が何らかの色覚異常を持っています。アクセシビリティを考慮したデザインは、より多くの人があなたの作品を使用できることを意味します。

WCAGガイドラインでは、通常のテキストに4.5:1以上、大きなテキストに3:1以上のコントラスト比を推奨しています。ブラウザの開発ツールや専用のアクセシビリティチェッカーでコントラスト比を確認できます。

情報を伝えるために色だけに頼らないでください。カラーコーディングと一緒にアイコン、パターン、またはテキストラベルを追加してください。赤と緑の組み合わせは多くの色覚異常者にとって似て見えるため特に問題があります。

色覚異常シミュレーターでデザインをテストしてください。Chrome DevToolsにはRenderingタブに組み込まれています。

最新のCSSは色を扱う複数の方法を提供しています。CSSカスタムプロパティ（変数）を使用すると、色を一度定義してスタイルシート全体で再利用できます。新しいoklch()およびlch()カラー関数は知覚的に均一な色空間を提供し、10%の明度変更がすべての色相で同じに見えることを意味します。透明度については、rgba()とhsla()がアルファチャンネルを追加します。フォーマットを選択する際、HEXは最も広くサポートされていますが、HSLはプログラム的な色のバリエーションを簡単に作成できます。