カラー → デザインシステム

色を1つ入力するだけで、パレット、グラデーション、およびAA/AAAコントラストチェックを自動生成します。

カラー → デザインシステム — 接続されたカラーパイプライン：1つのHEXがパレットジェネレータに流れ込み、そのベースカラーと補色がコントラストチェッカー（AA/AAA）とCSSグラデーションビルダーに同時に送られます。色を1つ選ぶだけで、デザインシステム全体が手に入ります。

含まれるツール

カラー変換ツール

色を HEX、RGB、HSL の間で変換し、リアルタイムでプレビューします。

カラーパレット生成ツール

1 つの基準 HEX 色から濃淡・色合いや調和する色を生成し、それぞれ HEX 値をコピーできます。

カラーコントラストチェッカー

前景色と背景色の WCAG コントラスト比をチェックし、通常テキストと大きいテキストで AA と AAA に適合するかを確認します。

CSS グラデーション生成ツール

色の停止点と角度を指定して線形・放射・円錐の CSS グラデーションを作り、リアルタイムに確認して background ルールをコピーできます。