カラーコード変換

このツールは HEX・RGB・HSL・HSV・CMYK の5つのカラーフォーマットをリアルタイムで相互変換します。カラーピッカーで色を選ぶか、任意のフォーマット欄に値を直接入力すると、他のすべてのフォーマットに即座に反映されます。変換はすべてブラウザ内で完結し、データは外部に送信されません。コピーボタンで各フォーマットの値をワンクリックでクリップボードにコピーできます。

各カラーフォーマットの特徴

HEX（例: #3b82f6）は HTML・CSS で最もよく使われる16進数表記で、ウェブ開発の標準形式です。RGB（例: rgb(59, 130, 246)）は赤・緑・青の三原色を 0〜255 の整数で表し、プログラム上での色計算に適しています。HSL（例: hsl(217, 91%, 60%)）は色相・彩度・明度で色を表現し、人間の感覚に近い形で色を調整しやすいため UI デザインで好まれます。HSV（例: hsv(217, 76%, 96%)）はグラフィックソフトのカラーピッカーでよく使われる形式で、彩度（Saturation）と明度（Value）で表現します。CMYK（例: cmyk(76, 47, 0, 4)）は印刷業界の標準フォーマットで、シアン・マゼンタ・イエロー・ブラックのインク量をパーセントで表します。

WCAG コントラスト比とアクセシビリティ

WCAG（Web Content Accessibility Guidelines）は Web コンテンツのアクセシビリティに関する国際標準です。コントラスト比は背景色とテキスト色の明るさの差を数値化したもので、W3C が定める計算式（相対輝度の比）を用います。AA 合格（コントラスト比 4.5:1 以上）は通常テキストに求められる最低基準で、AAA 合格（7.0:1 以上）はより高いアクセシビリティ水準です。このツールでは選択した色に対して白テキスト・黒テキストの両方のコントラスト比を自動計算し、AA・AAA の合否を表示します。ボタンやカードの背景色を選ぶ際に活用することで、視覚障害を持つユーザーへの配慮が可能になります。

Tailwind CSS 近似色の活用

Tailwind CSS はユーティリティファーストの CSS フレームワークで、slate・gray・red・blue・green など多数のカラーパレットを持ちます。このツールでは入力した任意の色に最も近い Tailwind CSS のカラー名（例: blue-500）を自動で検出して表示します。デザインシステムや既存の Tailwind プロジェクトに合わせた色選びの参考として使えます。たとえば「この色は blue-700 に近い」と分かれば、そのままクラス名として使用できるため、HEX からのコード変換作業を削減できます。フロントエンド開発・デザインシステム構築・プロトタイピングなど幅広い場面で役立ちます。