Color

HEX、RGB、HSLの間で色を変換できるライブピッカー付きの無料のオンラインカラーコンバーターに加え、任意の前景色と背景色の組み合わせについてAAとAAAの合否を報告する組み込みのWCAGコントラストチェッカーを備えています。対応するいずれかの形式で色を入力すると、他の形式を即座に取得でき、ピッカーで視覚的に微調整し、CSSに必要な正確な値をコピーできます。コントラストチェッカーはアクセシビリティを当て推量から明確な結果へと変えます。コントラスト比と、テキストと背景の組み合わせが通常テキストと大きいテキストのWCAG基準を満たすかどうかを表示します。すべてがブラウザ内で実行されます。

主な用途

• CSSで使うため、HEXのブランドカラーをRGBやHSLに変換します。
• アクセシビリティのため、テキストと背景の色がWCAG AAのコントラストを満たすか確認します。
• ピッカーで色を微調整し、必要な形式で値をコピーします。
• 出荷前に、デザインシステムの色の組み合わせがAAAを満たすか検証します。
• デザイナーのHSL値を、コードベースが必要とするHEXに変換します。

よくある質問

どの色の形式の間で変換できますか?

HEX、RGB、HSLです。これらのいずれかの形式で色を入力すると、他の形式へ変換されます。

どのコントラストレベルをチェックしますか?

コントラスト比と、その組み合わせが通常テキストと大きいテキストの両方についてWCAG AAおよびAAAを満たすかどうかを報告します。

WCAGを満たすにはどのコントラスト比が必要ですか?

WCAG AAは通常テキストで少なくとも4.5:1、大きいテキストで3:1を要求します。AAAはそれぞれ7:1と4.5:1を要求します。チェッカーは比率と、それぞれの合否を表示します。

HEX、RGB、HSLの違いは何ですか?

これらは同じ色を異なる方法で表します。HEXとRGBは赤・緑・青のチャンネルを指定し、HSLは色相、彩度、明度を使います。HSLは手作業で色合いを調整するのが容易なことが多いです。

私の色データはどこかにアップロードされますか?

いいえ。変換とコントラストチェックは完全にブラウザ内で実行されます。