はい、完全無料です。会員登録も不要で、すべての機能を制限なくご利用いただけます。

データは安全ですか？

すべての処理はお使いのブラウザ内で完結します。入力データがサーバーに送信されることは一切ありません。

カラースケールとは何ですか？

カラースケールとは、ベースカラーから明度を段階的に変化させた色のセットです。Tailwind CSSやMaterial Designでは50から900までの10段階が一般的です。

デザイントークンは、デザインシステムで色やサイズなどを変数として管理する仕組みです。CSS変数やJSONとして出力することで、一貫性のあるデザインを実現できます。

はい、生成されたスケールはライトモードとダークモードの両方に活用できます。50-200をダークモードの背景、700-900をライトモードのテキストに使うのが一般的です。

カラースケール/トークン生成は、ブランドカラーから段階的なカラースケールとデザイントークンを無料で作成できるツールです。登録不要・ブラウザ完結で、入力データがサーバーに送信されることはありません。

50-900スケール出力

Tailwind CSS風の段階的なカラースケールを自動生成

CSS変数/JSON出力

デザイントークンとしてそのまま使える形式で出力

完全無料・登録不要

会員登録なしで今すぐ利用可能

UIデザイナー

ブランドカラーからデザインシステムのカラースケールを作成する場面

ベースカラー1色から50〜900の10段階スケールを瞬時に生成。Tailwind CSS形式でそのまま使えます

フロントエンドエンジニア

プロジェクトのCSS変数やデザイントークンを整備する場面

CSS変数・JSON形式でワンクリックコピー。手動で明度調整する手間がなくなります

スタートアップ経営者

ブランドカラーを決めたが、UIで使うバリエーションが必要な場面

デザイナーに依頼せずとも、ブランドカラーから統一感のある配色バリエーションを自動生成

無料ですか？: はい、完全無料です。会員登録も不要で、すべての機能を制限なくご利用いただけます。
データは安全ですか？: すべての処理はお使いのブラウザ内で完結します。入力データがサーバーに送信されることは一切ありません。
カラースケールとは何ですか？: カラースケールとは、ベースカラーから明度を段階的に変化させた色のセットです。Tailwind CSSやMaterial Designでは50から900までの10段階が一般的です。
デザイントークンとは？: デザイントークンは、デザインシステムで色やサイズなどを変数として管理する仕組みです。CSS変数やJSONとして出力することで、一貫性のあるデザインを実現できます。
ダークモードにも使えますか？: はい、生成されたスケールはライトモードとダークモードの両方に活用できます。50-200をダークモードの背景、700-900をライトモードのテキストに使うのが一般的です。