カラーコード変換ツール

デジタルデザインでは、色を数値で表現するさまざまな方法があります。

• HEX（16進数）：#RRGGBBの6桁で色を表現。Web制作で最も一般的な形式で、CSSやHTMLで直接使用できます。例：#FF5733はオレンジ系の色です。
• RGB：赤(Red)・緑(Green)・青(Blue)の光の三原色を0〜255の数値で指定します。ディスプレイが実際に発光する仕組みに対応しており、プログラミングでの色指定に広く使われます。
• HSL：色相(Hue)・彩度(Saturation)・輝度(Lightness)で表現。人間の感覚に近い直感的なモデルで、「色を少し明るくしたい」「彩度を落としたい」といった調整が容易です。CSSでもhsl()関数として使えます。

このツールでは、これらの形式に加えHSV（PhotoshopやFigmaで使用）とCMYK（印刷用）にもリアルタイム変換できます。

WCAG（Web Content Accessibility Guidelines）は、Webコンテンツのアクセシビリティに関する国際的なガイドラインです。テキストと背景のコントラスト比について以下の基準を定めています。

• AA（通常テキスト）：コントラスト比 4.5:1 以上
• AA（大きなテキスト）：コントラスト比 3:1 以上
• AAA（通常テキスト）：コントラスト比 7:1 以上
• AAA（大きなテキスト）：コントラスト比 4.5:1 以上

コントラスト比は1:1（同色）から21:1（黒と白）の範囲を取ります。このツールのコントラスト比チェッカーを使えば、テキストと背景色の組み合わせがWCAG基準を満たしているか即座に確認できます。

色彩理論に基づく代表的な配色パターンを紹介します。色相環（カラーホイール）上の位置関係で決まります。

• 補色（Complementary）：色相環で180度反対の色。コントラストが強く、目を引くデザインに適しています。
• 類似色（Analogous）：色相環で隣り合う色（±30度）。統一感のある穏やかな配色になります。
• トライアド（Triadic）：色相環で120度ずつ離れた3色。バランスの取れた鮮やかな配色です。
• 分裂補色（Split-Complementary）：補色の両隣の色を使用。補色ほど強いコントラストはないものの、視覚的に豊かな配色になります。

このツールのパレット機能を使って、ベースカラーからこれらの配色を自動生成し、デザインに活用できます。