ToolStack

CSS カラー生成ツール

ベースカラーから10段階のカラースケールを生成し、CSS 変数として出力。

100% プライベート——すべてブラウザ内で動作

広告

使い方

  1. 1

    ベースカラーを入力するか、カラーピッカーで選びます。

  2. 2

    50（最も明るい）から 900（最も暗い）までの10段階スケールが即座に生成されます。

  3. 3

    任意のスウォッチをクリックすると、その HEX 値だけをコピーできます。

  4. 4

    CSS カスタムプロパティのブロック全体をコピーしてプロジェクトで使えます。

使用例

#3B82F6 からスケール生成

入力

#3B82F6

出力

--color-50 #F5F9FF … --color-500 #3B82F6 … --color-900 #112445

CSS での使用

入力

コピーしたブロックを貼り付け

出力

:root { --color-500: #3B82F6; … }

よくある質問

スケールはどう生成されますか？

50～400 は白に、600～900 は黒に混ぜて生成され（トーンとシェード）、500 はベースカラーのままです。

生成した変数の使い方は？

ブロックをスタイルシートの先頭に貼り付け、CSS 内で var(--color-500) のように参照します。

色はサーバーに送信されますか？

いいえ、スケールはブラウザ内でローカルに生成されます。

関連ツール

グラデーション生成ツールCSS の線形・放射状グラデーションを視覚的に作成し、CSS コードをコピー。カラーピッカー好きな色を選んで HEX、RGB、HSL、HSV の値をワンクリックでコピー。コントラストチェッカーテキスト色と背景色の WCAG コントラスト比を即座にチェック。HEXからRGBHEX カラーコードを RGB 値に即座に変換。無料・プライバシー安全。RGBからHEXRGB 値を HEX カラーコードに即座に変換。無料・プライバシー安全。カラーコンバーターHEX・RGB・HSL・HSV・HWB の色形式を相互に変換。