カラーコード変換ツール

カラーコード変換ツールで出来る事

カラーコード変換ツールの使い方

1. 画面上部のテキスト入力欄にカラーコード（例: #FF5733、rgb(255, 87, 51)、hsl(10, 100%, 60%)、cmyk(0%, 66%, 80%, 0%)）を入力するか、カラーピッカーで色を選択します。
2. 入力された色は自動的に検出され、HEX・RGB・HSL・HSV・CMYKの5形式およびCSS変数形式すべてに変換されて表示されます。
3. 各フォーマットの「コピー」ボタンをクリックすると、対応するカラーコードがクリップボードにコピーされます。CSS変数形式はそのままデザインシステムに貼り付け可能です。
4. 画面下部のWCAGコントラスト比セクションで、白背景・黒背景に対するコントラスト比とAA/AAAレベルの適合状況を確認できます。

カラーコード変換ツールを使うメリット

• 【5形式+CSS変数対応】HEX・RGB・HSL・HSV・CMYK形式の相互変換に加え、CSS Custom Properties形式（--color-primary: hsl(...)）への直接出力に対応。Webデザインから印刷デザインまでカバーします。
• 【リアルタイム変換】入力と同時にすべてのカラーフォーマットが即座に計算・表示されるため、手動計算や外部サイトでの変換が不要になります。
• 【アクセシビリティ対応】WCAG 2.1のコントラスト比基準（AA: 4.5:1、AAA: 7:1）に基づく自動判定機能により、アクセシブルな配色設計が効率的に行えます。
• 【完全プライバシー保護】すべての処理がブラウザ内で完結し、カラーコードや設定がサーバーに送信されることは一切ありません。安心してご利用いただけます。