Color Palette Generator
Generate a complete 10-shade color palette from any base color in Tailwind CSS style.
50#f0f6fergb(240, 246, 254)hsl(217, 91%, 97%)
100#dde9fdrgb(221, 233, 253)hsl(217, 91%, 93%)
200#b6d1fcrgb(182, 209, 252)hsl(217, 91%, 85%)
300#7bacf9rgb(123, 172, 249)hsl(217, 91%, 73%)
400#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
500#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
600#0b60eargb(11, 96, 234)hsl(217, 91%, 48%)
700#094cb9rgb(9, 76, 185)hsl(217, 91%, 38%)
800#063888rgb(6, 56, 136)hsl(217, 91%, 28%)
900#042458rgb(4, 36, 88)hsl(217, 91%, 18%)
Об этом инструменте
Экстрактор цветовых палитр генерирует 10-ступенчатую шкалу дизайн-системы из любого базового цвета, соответствующую соглашениям об оттенках 50–900, используемым в Tailwind CSS, Material Design и аналогичных фреймворках.
Каждый образец в сгенерированной шкале отображает значения hex, RGB и HSL. Цвет текста автоматически переключается между белым и тёмным в зависимости от яркости.
Как использовать
- Выберите базовый цвет с помощью цветовой палитры или введите hex-значение.
- 10-ступенчатая шкала (50–900) генерируется мгновенно, охватывая весь диапазон яркости.
- Используйте hex-, RGB- или HSL-значения в своей дизайн-системе или CSS-переменных.
Случаи использования
Команды дизайн-систем генерируют полные цветовые шкалы для расширений конфигурации Tailwind или CSS-переменных. Frontend-разработчики создают доступные UI-компоненты.
Частые вопросы
- Чем эта шкала отличается от «оттенков» в других инструментах? — Этот инструмент создаёт фиксированную 10-ступенчатую шкалу (50, 100, 200, … 900) с конкретными значениями яркости, соответствующую общим соглашениям дизайн-систем.
- Влияет ли изменение насыщенности на шкалу? — Насыщенность базового цвета сохраняется на всех ступенях — меняется только яркость.
- Можно использовать эти цвета напрямую в Tailwind CSS? — Да. Скопируйте hex-значения каждого уровня и добавьте их в tailwind.config.js под theme.extend.colors, используя номера оттенков как ключи.