カラーツールキット

Color Toolkitについて

Color Toolkitは、デザイナーや開発者向けの4つの機能を1つにまとめたカラーユーティリティです。「変換」タブでは、任意の色をHEX、RGB、HSL、HSV、CMYK、およびCSSのrgb()関数の構文という6つの形式に変換できます。 「Contrast」タブでは、前景色と背景色の組み合わせを、WCAG 2.1の4つの閾値（通常AA、通常AAA、大AA、大AAA）すべてに対して検証し、その組み合わせのライブプレビューを表示します。 「Palette」タブでは、任意のベースカラーから、補色、類似色、三色相、分割補色、四色相、単色という6種類の調和配色を生成します。「Shades」タブでは、白寄りの10種類のティントと、黒寄りの10種類のシェードを生成します。

使用方法

現在行っている作業に適したタブを選択してください。「Convert」、「Palette」、「Shades」では、カラースウォッチを使用してネイティブのカラーピッカーを開くか、テキストフィールドにHEXコードを直接入力してください。「coral」や「steelblue」のようなCSSの名称付き色も使用可能です。 「Contrast」タブでは、前景色と背景色を個別に設定し、「スワップ」ボタンを使用して2色の順序を入れ替えることができます。「Palette」または「Shades」タブで任意の色チップをクリックすると、そのHEXコードがクリップボードにコピーされます。「Convert」タブでは、各出力行に個別のコピーボタンがあります。

WCAGのコントラスト比は、「Webコンテンツアクセシビリティガイドライン（WCAG）2.1」の計算式に基づいています。4.5:1以上の比率はAAレベルの通常テキストの基準を満たし、7:1以上の比率はAAAレベルの基準を満たします。 大きなテキスト（18pt または 14pt 太字）の場合、AA レベルでは 3:1、AAA レベルでは 4.5:1 という、より低い閾値が適用されます。「パレット」タブを使用すると、デザインの方向性を素早く検討できます。チップをクリックしてその HEX コードをコピーし、エディタやデザインツールに貼り付けてください。