カラーShades生成ツール
ベースカラーからtint/shadeの段階を自動生成。HEX/RGB/HSL対応。CSSカスタムプロパティ出力。
ベースカラー
#3b82f6
段階数
カラースケール (11色)
カラー詳細
| 色 | HEX | RGB | HSL | ラベル |
|---|---|---|---|---|
| #0a1629 | rgb(10, 22, 41) | hsl(217, 61%, 10%) | 0% | |
| #142b52 | rgb(20, 43, 82) | hsl(218, 61%, 20%) | 10% | |
| #1e417b | rgb(30, 65, 123) | hsl(217, 61%, 30%) | 20% | |
| #2757a4 | rgb(39, 87, 164) | hsl(217, 62%, 40%) | 30% | |
| #316ccd | rgb(49, 108, 205) | hsl(217, 61%, 50%) | 40% | |
| #3b82f6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) | Base | |
| #5c97f8 | rgb(92, 151, 248) | hsl(217, 92%, 67%) | 60% | |
| #7cacf9 | rgb(124, 172, 249) | hsl(217, 91%, 73%) | 70% | |
| #9dc1fb | rgb(157, 193, 251) | hsl(217, 92%, 80%) | 80% | |
| #bed5fc | rgb(190, 213, 252) | hsl(218, 91%, 87%) | 90% | |
| #deeafe | rgb(222, 234, 254) | hsl(218, 94%, 93%) | 100% |
:root {
--color-0: #0a1629;
--color-100: #142b52;
--color-200: #1e417b;
--color-300: #2757a4;
--color-400: #316ccd;
--color-500: #3b82f6;
--color-600: #5c97f8;
--color-700: #7cacf9;
--color-800: #9dc1fb;
--color-900: #bed5fc;
--color-1000: #deeafe;
}使い方
- カラーピッカーまたはHEXコードでベースカラーを設定
- 段階数（5/10/20）を選択してスケールの細かさを調整
- 各色をクリックしてHEXコードをコピー
- 詳細テーブルでRGB・HSL値を確認
- CSSカスタムプロパティ形式でエクスポートしてデザインシステムに活用