カラーコンバーター

16進数形式は、色を6桁の16進数（0〜9、A〜F）で表します。赤・緑・青の3ペアに分かれており、例えば#FF0000は純粋な赤です。HTMLとCSSで最も広く使われている形式です。

RGB（Red, Green, Blue）は、赤・緑・青それぞれのチャンネルを0〜255の数値で表します。rgb(255, 0, 0)は純粋な赤です。CSSでは透明度（アルファ）チャンネルを追加したrgba()も使用できます。

HSLは色をHue（色相, 0〜360°）、Saturation（彩度, 0〜100%）、Lightness（輝度, 0〜100%）で表します。人間が色を知覚する方法に対応しているため、手動で色を調整する際に最も直感的な形式です。

ブランドカラーの固定値（CSS変数・デザイントークン）にはHEXを使います。動的な透明度が必要な場合はRGB/RGBAを使います。カラーパレットを作成したり、色相・彩度・輝度をプログラムで変化させたい場合（テーマ生成・カラーバリアント）はHSLが最適です。

OKLCHはCSS Color Level 4で導入された知覚的に均一なカラースペースです。HSLと異なり、同じL（明度）値を持つ色は人間の目に同じ明るさで見えます。これにより、アクセシブルで調和のとれたパレットの作成が予測しやすくなります。3つの値は：L（明度、0〜1）、C（彩度、約0〜0.4）、H（色相、0〜360°）です。Chrome、Firefox、SafariはすでにOKLCHをoklch()関数でサポートしています。

アルファチャンネルは色の不透明度を0（完全に透明）から1（完全に不透明）で定義します。CSSではrgba(255, 0, 0, 0.5)または8桁の16進数表記#FF000080を使用します。opacityプロパティで色から不透明度を分離することもできます。主な違い：rgba()は子要素に影響を与えずにその色だけを透明にします；opacityは要素全体とそのすべての内容に透明度を適用します。

色のコントラストは2色（通常はテキストと背景）の相対的な輝度差です。WCAG 2.1では通常のテキストに最低4.5:1（AAレベル）、大きなテキスト（18pt以上または14pt太字）に3:1のコントラスト比を要求しています。コントラストが不十分だと、弱視や色覚障害のある人が読みにくくなります。ChromeのアクセシビリティパネルやwebAIMコントラストチェッカーでコントラスト比を測定できます。

WebデザイナーとUI/UXデザイナーは、CSS・Figma・Sketch・Adobe XDで作業する際にHEX・RGB・HSL・HSBを変換するのに毎日活用します（ツールごとに好みのフォーマットが異なるため）。フロントエンド開発者は、CSSやTailwindで色を正確に適用したり、視覚的な色がどの数値に対応するかを調べたりするのに使います。グラフィックデザイナー・ブランディングデザイナーは、ブランドパレットをソフトウェア間（Illustrator・Canva・Photoshop）で移行し、すべてのフォーマットで色が同一であることを確認するのに使います。印刷デザイナーは、CMYKへのエクスポート前にRGB（スクリーン）を最も近い相当値に変換するのに使います。アクセシビリティ専門家は、正確な輝度値を取得し、WCAG 2.1ガイドラインに従ってコントラスト比を確認するのに使います。

パソコンでは、Chrome・Firefox・Edgeで Ctrl + D（Windows/Linux）または Cmd + D（Mac）を押すと、すぐにブックマークに追加できます。Mac の Safari では Cmd + D を押すか、「ブックマーク」→「ブックマークを追加」で登録します。Android（Chrome）では、右上の3点メニュー（⋮）をタップし「ホーム画面に追加」または「ブックマークに追加」を選択します。iPhone/iPad（Safari）では、共有ボタン（□↑）をタップして「ホーム画面に追加」を選択します。ブックマークに登録しておけば、デザインでHEX値を見つけてCSSのRGB値が必要になったとき、1クリックで変換できます。