カラーコンバーター
HEX、RGB、HSL、CMYKの自動認識と相互変換に対応。内蔵のカラーピッカーホイール、Tints & Shades、配色スキーム、WCAGコントラストチェッカーを搭載。すべての処理はブラウザ上でローカルに実行され、データがサーバーにアップロードされることはありません。
カラーピッカー
Tints & Shades
配色スキーム
履歴
お気に入り
お気に入りはまだありません。ハートをクリックして現在の色をお気に入りに追加してください。
WCAGコントラストチェッカー
背景色と前景色を選択して、WCAGアクセシビリティ基準に準拠しているか確認します
「カラーコンバーター」とは？
カラーコンバーターは、開発者がさまざまな色形式を自由に変換できるオンラインツールです。Web開発で最もよく使われる色形式には、HEX（16進数）、RGB（赤-緑-青）、HSL（色相-彩度-明度）、CMYK（シアン-マゼンタ-イエロー-キー、印刷用）があります。本ツールは入力形式を自動判別し、同時に4つの形式すべてを出力することで、カラーワークフローの効率を大幅に向上させます。
色形式リファレンス
- HEX — 先頭に
#を付けた16進数のカラーコード（例：#ff6600）。CSSで最も広く使われる色形式です。 - RGB — 赤・緑・青で表現（例：
rgb(255, 102, 0)）。各チャンネルは0〜255の範囲です。 - HSL — 色相（0-360°）、彩度（0-100%）、明度（0-100%）。人間にとって最も直感的なカラーモデルです。
- CMYK — シアン、マゼンタ、イエロー、キー（黒）。印刷業界の標準形式です。
- CSS色名 — W3Cが定義する140以上の色名。例：
rebeccapurple、coralなど。
よくある使用例
- UIデザイン — デザイナーはHEX値を提供、開発者はHSLで明度・彩度を調整
- ボタンの状態 — Tints & Shadesでホバー/アクティブ時のカラースケールを生成
- ブランドカラー — 補色、トライアドなどの配色パターンを生成
- アクセシビリティ — WCAGコントラストチェッカーでテキストの可読性を確認
- CSSグラデーション — パレットをお気に入りに保存し、後でグラデーション生成に活用
WCAGコントラスト基準
- AA基準 — 標準テキスト ≥ 4.5:1、大きいテキスト ≥ 3:1
- AAA基準 — 標準テキスト ≥ 7:1、大きいテキスト ≥ 4.5:1
ヒント：カラーホイール上をドラッグして色を選択するか、直接値を入力してください。入力フィールドはHEX、RGB、HSL、CMYK、CSS色名を自動判別します。変換された値をクリックするとクリップボードにコピーできます。