Akousaジェネレーター
カラーシェードジェネレーター
任意のベースカラーから11段階のシェードとティントを生成。CSS、Tailwind、SCSS、JSONでエクスポート。
Press Escape to reset, Ctrl+Enter to copy export.
Esc ResetCtrl+Enter Copy export
#1E417Brgb(30, 65, 123)hsl(217, 61%, 30%)
#234E94rgb(35, 78, 148)hsl(217, 62%, 36%)
#295BACrgb(41, 91, 172)hsl(217, 62%, 42%)
#2F68C5rgb(47, 104, 197)hsl(217, 61%, 48%)
#3575DDrgb(53, 117, 221)hsl(217, 71%, 54%)
#3B82F6rgb(59, 130, 246)hsl(217, 91%, 60%)
#4F8FF7rgb(79, 143, 247)hsl(217, 91%, 64%)
#629BF8rgb(98, 155, 248)hsl(217, 91%, 68%)
#76A8F9rgb(118, 168, 249)hsl(217, 92%, 72%)
#89B4FArgb(137, 180, 250)hsl(217, 92%, 76%)
#9DC1FBrgb(157, 193, 251)hsl(217, 92%, 80%)
:root {
--color-d50: #1e417b;
--color-d40: #234e94;
--color-d30: #295bac;
--color-d20: #2f68c5;
--color-d10: #3575dd;
--color: #3b82f6;
--color-l10: #4f8ff7;
--color-l20: #629bf8;
--color-l30: #76a8f9;
--color-l40: #89b4fa;
--color-l50: #9dc1fb;
}カラーシェードジェネレーターについて
カラーシェードジェネレーターは、任意のベースカラーから完全な11段階のシェードとティントスケールを生成します。シェードは黒を混ぜて暗くし、ティントは白を混ぜて明るくします。Tailwind CSSの組み込みカラーパレットに似たプロフェッショナルなカラースケールが得られます。
使い方
入力フィールドにHEXカラーコードを入力するか、カラーピッカーを使用します。ツールは即座に5段階の暗いシェードと5段階の明るいティントを元の色と共に生成します。スウォッチをクリックしてHEX値をコピーできます。エクスポートパネルでCSS変数、Tailwind設定、SCSS変数、JSONとしてダウンロードできます。
一般的な使用例
- デザインシステム用の完全なカラーパレットの作成
- Tailwind CSSカスタムカラースケールの生成
- 十分なコントラストを持つアクセシブルなUIカラーシステムの構築
- ブランドカラーのダークモードバリアントの設計
- CSSまたはSCSSデザインシステム用のカラートークンのエクスポート
Frequently Asked Questions About カラーシェードジェネレーター
What is カラーシェードジェネレーター?
カラーシェードジェネレーター is a free online tool on akousa.net, a platform with 559+ browser-based utilities. 任意のベースカラーから11段階のシェードとティントを生成。CSS、Tailwind、SCSS、JSONでエクスポート。 No installation is required.
How do I use カラーシェードジェネレーター?
Simply open カラーシェードジェネレーター on akousa.net, enter or upload your data, configure any options, and click the action button. Results appear instantly in your browser.
Is カラーシェードジェネレーター free?
Yes, the core カラーシェードジェネレーター experience is free to use without signup. All 559+ tools remain available for everyday use, while Akousa Pro adds optional premium platform features and ad-free browsing.