上部のカラースウォッチをクリックするとカラーピッカーが開きます。HEXコードを直接入力して選択することもできます。HEX・RGB・HSL を各 copy ボタンで1クリックコピー。CSS名前付きカラーに一致する場合はバッジが表示されます。

選んだ色をベースに補色・類似色・3色配色・分裂補色を自動生成。各スウォッチをクリックするとその色に切り替わります。

選んだ色のティント（明るい版）5段階 + ベース + シェード（暗い版）5段階を表示。クリックで選択できます。

選んだ色と白・黒テキストのコントラスト比をWCAG基準（AA：4.5:1以上 / AAA：7:1以上）で確認。大きいテキスト（18pt以上）は基準が異なります。

2色を選んでグラデーションをプレビュー。方向ボタンで切り替え、CSSコードをそのままコピーできます。色1は選択中のカラーと連動します。

CSS標準の140色を一覧表示。名前で検索でき、クリックするとそのカラーを選択できます。