カラーシェード生成
基準色から明るい色と暗い色の段階を作ります。
このツールについて
ボタン、背景、ボーダー、チャート、UI状態に使う色の段階を1つの基準色から生成します。
CSS変数やデザイントークンへ移しやすいよう、シンプルなHEX出力にしています。
段階 50
#F4F7FE
段階 100
#E5ECFD
段階 200
#C2D3F9
段階 300
#96B4F5
段階 400
#628FF1
段階 500
#2563EB
段階 600
#2157CF
段階 700
#1B49AE
段階 800
#153988
段階 900
#102A63
段階 950
#0A1A3D
使い方
- 1
必要な値を入力するか、テキストを貼り付けます。
- 2
オプションや単位を目的に合わせて調整します。
- 3
表示された結果を確認し、必要な場所へコピーして使います。
機能
即時結果
値を入力するとブラウザ内で結果がすぐに更新されます。
ブラウザ内処理
入力値はサーバーへアップロードせず、端末内で処理されます。
シンプルな入力
繰り返し使いやすい入力欄と見やすい結果を用意しています。
無料で利用
登録やインストールなしでそのまま使えます。
主な用途
- ›プロダクトUI用の小さなカラースケールを作ります。
- ›背景、ボーダー、hover、active色を準備します。
- ›基準色がインターフェース全体のパレットへ展開できるか確認します。