色をさまざまな形式に変換
#3B82F6や#38FのようなHEXコード、rgb()やrgba()、hsl()、tomatoのような色名など、任意のCSS形式で色を入力するか、カラーピッカーで選択してください。同じ色がHEX、RGB、HSL、HSV、CMYKで表示され、CSSやデザインツール、印刷設定にそのままコピーできます。
また、その色の上で白または黒の文字がどれだけ読みやすいかを、WCAGのコントラスト比で表示します。4.5:1以上であれば、通常のテキストでAAレベルを満たします。色はCSSと同じ方法でブラウザが正確に解釈します。
このカラーコード変換ツールを使う理由
- HEX、RGB、HSL、HSV、CMYKをまとめて表示
- すべてのCSSカラー形式と色名に対応
- 透明度（アルファ）に対応
- 白と黒の文字に対するWCAGコントラストを表示
色を変換する方法
- 色を入力または貼り付けるか、カラーピッカーで選択します
- プレビューの横に、すべての形式で色が表示されます
- 必要な形式の横にあるコピーボタンをクリックします
よくある質問
このカラーコード変換ツールは無料ですか？
はい、完全に無料で、ブラウザ内で動作します。
RGB、HSL、HSVの違いは何ですか？
RGBは赤、緑、青の光を混ぜ合わせます（それぞれ0～255）。HSLとHSVは同じ色を色相（0～360°）、彩度、そして輝度または明度で表すため、明るい色、暗い色、落ち着いた色のバリエーションを作りやすくなります。
コントラスト比とは何を意味しますか？
文字色と背景色の明るさを比較したものです（WCAG 2）。AAレベルでは、通常のテキストに4.5:1以上、大きなテキストに3:1以上の比率が求められます。値が大きいほど読みやすくなります。
サーバーに何か送信されますか？
いいえ。すべてブラウザ内で計算されます。