カラーパレット＆グラデーションスタジオ
調和のとれたパレット作成、CSSグラデーション設計、アクセシビリティのコントラスト確認まで、すべてブラウザ内で。
パレット生成
CSS／Tailwindトークンの書き出しはPro機能です。
グラデーション作成
background: linear-gradient(90deg, #4f46e5, #ec4899);コントラストチェッカー（WCAG）
Aa
比率: 17.74AA ✓AAA ✓
パレットをそのままコードへ
買い切り。パレットをCSS変数・Tailwind設定・JSONで書き出せます。永久に。
デザイナーのためのカラーツール
賢い配色
任意のベースカラーから補色・類似色・トライアド・モノクロのパレットを生成します。
はじめからアクセシブル
WCAG AA/AAAのコントラストを確認し、誰にとっても読みやすい文字に。
コピーできるCSS
HEXコードやグラデーションCSSをワンクリックで取得できます。
よくある質問
このカラーツールは無料ですか？
はい。パレット・グラデーション・コントラスト確認はずっと無料です。Proでコード書き出しが加わります。
どのカラーモデルを使っていますか？
配色は知覚的に均一になるようHSLで計算し、HEXで出力します。
コントラストチェッカーは何を測りますか？
2色間のWCAGコントラスト比を、AA（4.5）とAAA（7）の合否表示付きで測定します。
Tailwindに書き出せますか？
はい。CSS変数・Tailwind設定・JSONの書き出しはProに含まれます。