カラーコード変換ツール
HEX・RGB・HSLのカラーコードを瞬時に相互変換します。
Webアクセシビリティ（WCAG 2.1）では、テキストと背景のコントラスト比が4.5:1以上（通常テキスト）または3:1以上（大きなテキスト）必要です。適切な色選択でアクセシブルなデザインを実現できます。
HEX・RGB・HSLのカラーコードを相互変換。カラーピッカーで色を選択し、各形式のコードを一括取得できます。
🎨 カラーピッカー
色見本をクリックして色を選択できます
🎯 プリセットカラー
📚 カラー履歴
使用したカラーの履歴がここに表示されます
💼 こんな時に便利
- Web開発でのCSS記述に - HEX、RGB、HSLを相互変換してコード記述
- デザインツール間の値変換に - PhotoshopとSketch、Figma間で色指定を統一
- カラーコードの確認に - 見本色から各形式のコードを取得
- グラデーション作成の下準備に - RGB値を調整して中間色を算出
- アクセシビリティ対応に - 色のRGB値を確認してコントラスト比を計算
使い方
📌 基本的な使い方
カラーピッカーで色を選択するか、HEX・RGB・HSLの値を直接入力すると、他の形式に自動変換されます。
💡 カラーコード形式
- HEX（16進数）: #RRGGBB形式（例: #3498db）
- RGB: Red, Green, Blue の0-255の値（例: rgb(52, 152, 219)）
- HSL: Hue（色相）, Saturation（彩度）, Lightness（輝度）（例: hsl(204, 70%, 53%)）
⚙️ 主な機能
- リアルタイム変換: 入力すると即座に他の形式に変換
- ワンクリックコピー: 各コードをワンクリックでコピー可能
- プリセットカラー: よく使う色を簡単に選択
- カラー履歴: 使用した色を自動保存
🎨 各形式の特徴
- HEX: Web開発で最も一般的。CSS、HTMLで広く使用
- RGB: 直感的で理解しやすい。画像編集ソフトで使用
- HSL: 色の調整がしやすい。色相ベースの配色に便利
💼 活用シーン
- Webデザイン・開発
- グラフィックデザイン
- カラースキームの作成
- ブランドカラーの管理
- 配色の検討
♿ Webアクセシビリティとコントラスト比（WCAG 2.1）
WCAG 2.1（Web Content Accessibility Guidelines）とは
WCAG 2.1は、W3C（World Wide Web Consortium）が策定した、Webコンテンツをアクセシブル（利用しやすい）にするための国際標準ガイドラインです。日本の「JIS X 8341-3:2016」もWCAG 2.0に準拠しており、公的機関のWebサイトでは遵守が求められています。
WCAG 2.1では、視覚障害者や色覚異常者でも情報を正しく理解できるよう、コントラスト比（色のコントラスト）に関する明確な基準を定めています。
コントラスト比の基準（WCAG 2.1 達成基準 1.4.3）
テキストと背景のコントラスト比は、以下の基準を満たす必要があります：
-
レベルAA（一般的な要求）:
- 通常テキスト: コントラスト比4.5:1以上
- 大きなテキスト（18pt以上、または14pt太字以上）: コントラスト比3:1以上
-
レベルAAA（より厳格）:
- 通常テキスト: コントラスト比7:1以上
- 大きなテキスト: コントラスト比4.5:1以上
多くの企業や公的機関はレベルAAを最低基準として採用しています。
コントラスト比の計算方法
コントラスト比は、以下の式で計算されます：
コントラスト比 = (L1 + 0.05) / (L2 + 0.05)
L1 = 明るい方の色の相対輝度
L2 = 暗い方の色の相対輝度
相対輝度は、RGB値から計算されます。例えば、黒（#000000）の輝度は0、白（#FFFFFF）の輝度は1で、白と黒のコントラスト比は21:1（最大値）です。
コントラスト比の実例
-
⭕ 良い例（4.5:1以上）:
- 黒（#000000）と白（#FFFFFF）: 21:1
- 濃い青（#003366）と白（#FFFFFF）: 12.6:1
- 濃いグレー（#595959）と白（#FFFFFF）: 7:1
-
❌ 悪い例（4.5:1未満）:
- 薄いグレー（#999999）と白（#FFFFFF）: 2.8:1（不合格）
- 黄色（#FFFF00）と白（#FFFFFF）: 1.1:1（不合格）
- 薄い青（#66B3FF）と白（#FFFFFF）: 2.4:1（不合格）
アクセシブルな色選択のベストプラクティス
- テキストには十分なコントラストを確保: 白背景には濃い色（#333333以下）、黒背景には明るい色（#CCCCCC以上）を使用します。
- 色だけに頼らない: 色覚異常者のために、色だけでなくアイコンやテキストで情報を伝えます。
- リンクは下線で明示: 色だけでリンクを示すのではなく、下線を付けて視覚的に区別します。
- コントラストチェッカーを活用: Chrome DevTools、WebAIM Contrast Checker、Colour Contrastなどのツールで検証します。
- ダークモード対応: ライトモードとダークモードの両方で十分なコントラストを確保します。
UIコンポーネントのコントラスト基準
WCAG 2.1では、テキストだけでなくUIコンポーネント（ボタン、フォーム、アイコン）にもコントラスト比の基準があります（達成基準 1.4.11）：
- UIコンポーネントの境界線: 隣接する色とのコントラスト比3:1以上
- アイコン: 背景とのコントラスト比3:1以上
- フォーカスインジケーター: キーボード操作時の視覚的なフォーカスを明確にするため、コントラスト比3:1以上
法的要件とビジネス上のメリット
日本: 2016年施行の「障害者差別解消法」により、公的機関には合理的配慮が義務付けられています（民間事業者は努力義務）。
アメリカ: ADA（Americans with Disabilities Act）により、Webアクセシビリティが法的義務となっています。
EU: EN 301 549によりアクセシビリティ基準が定められています。
アクセシブルなデザインは、障害者だけでなく、すべてのユーザーにとって使いやすく、SEO向上、ユーザー満足度向上、法的リスク低減につながります。