Палитра цветов
Цветовая палитра uStatic CSS основана на современной дизайн-системе. Нажмите на любой цвет, чтобы скопировать класс в буфер обмена.
Цветовая палитра
Серый (Gray)
50
100
200
300
400
500
600
700
800
900
| Класс | Токен | Описание |
|---|---|---|
bg-gray-50 | --color-gray-50 | Самый светлый |
bg-gray-100 | --color-gray-100 | Светлый фон |
bg-gray-200 | --color-gray-200 | Границы, разделители |
bg-gray-300 | --color-gray-300 | Вторичные элементы |
bg-gray-400 | --color-gray-400 | Неактивные состояния |
bg-gray-500 | --color-gray-500 | Средний тон |
bg-gray-600 | --color-gray-600 | Вторичный текст |
bg-gray-700 | --color-gray-700 | Основной текст |
bg-gray-800 | --color-gray-800 | Тёмный фон |
bg-gray-900 | --color-gray-900 | Самый тёмный |
Синий (Blue)
50
100
200
300
400
500
600
700
800
900
| Класс | Токен | Описание |
|---|---|---|
bg-blue-50 | --color-blue-50 | Самый светлый |
bg-blue-100 | --color-blue-100 | Светлый фон |
bg-blue-200 | --color-blue-200 | Границы, разделители |
bg-blue-300 | --color-blue-300 | Вторичные элементы |
bg-blue-400 | --color-blue-400 | Неактивные состояния |
bg-blue-500 | --color-blue-500 | Основной акцент |
bg-blue-600 | --color-blue-600 | Hover-состояние |
bg-blue-700 | --color-blue-700 | Активный элемент |
bg-blue-800 | --color-blue-800 | Тёмный фон |
bg-blue-900 | --color-blue-900 | Самый тёмный |
Зелёный (Green)
50
100
200
300
400
500
600
700
800
900
| Класс | Токен | Описание |
|---|---|---|
bg-green-50 | --color-green-50 | Самый светлый |
bg-green-100 | --color-green-100 | Светлый фон |
bg-green-200 | --color-green-200 | Границы, разделители |
bg-green-300 | --color-green-300 | Вторичные элементы |
bg-green-400 | --color-green-400 | Неактивные состояния |
bg-green-500 | --color-green-500 | Основной акцент |
bg-green-600 | --color-green-600 | Hover-состояние |
bg-green-700 | --color-green-700 | Активный элемент |
bg-green-800 | --color-green-800 | Тёмный фон |
bg-green-900 | --color-green-900 | Самый тёмный |
Красный (Red)
50
100
200
300
400
500
600
700
800
900
| Класс | Токен | Описание |
|---|---|---|
bg-red-50 | --color-red-50 | Самый светлый |
bg-red-100 | --color-red-100 | Светлый фон |
bg-red-200 | --color-red-200 | Границы, разделители |
bg-red-300 | --color-red-300 | Вторичные элементы |
bg-red-400 | --color-red-400 | Неактивные состояния |
bg-red-500 | --color-red-500 | Основной акцент |
bg-red-600 | --color-red-600 | Hover-состояние |
bg-red-700 | --color-red-700 | Активный элемент |
bg-red-800 | --color-red-800 | Тёмный фон |
bg-red-900 | --color-red-900 | Самый тёмный |
Жёлтый (Yellow)
50
100
200
300
400
500
600
700
800
900
| Класс | Токен | Описание |
|---|---|---|
bg-yellow-50 | --color-yellow-50 | Самый светлый |
bg-yellow-100 | --color-yellow-100 | Светлый фон |
bg-yellow-200 | --color-yellow-200 | Границы, разделители |
bg-yellow-300 | --color-yellow-300 | Вторичные элементы |
bg-yellow-400 | --color-yellow-400 | Неактивные состояния |
bg-yellow-500 | --color-yellow-500 | Основной акцент |
bg-yellow-600 | --color-yellow-600 | Hover-состояние |
bg-yellow-700 | --color-yellow-700 | Активный элемент |
bg-yellow-800 | --color-yellow-800 | Тёмный фон |
bg-yellow-900 | --color-yellow-900 | Самый тёмный |
Оранжевый (Orange)
50
100
200
300
400
500
600
700
800
900
| Класс | Токен | Описание |
|---|---|---|
bg-orange-50 | --color-orange-50 | Самый светлый |
bg-orange-100 | --color-orange-100 | Светлый фон |
bg-orange-200 | --color-orange-200 | Границы, разделители |
bg-orange-300 | --color-orange-300 | Вторичные элементы |
bg-orange-400 | --color-orange-400 | Неактивные состояния |
bg-orange-500 | --color-orange-500 | Основной акцент |
bg-orange-600 | --color-orange-600 | Hover-состояние |
bg-orange-700 | --color-orange-700 | Активный элемент |
bg-orange-800 | --color-orange-800 | Тёмный фон |
bg-orange-900 | --color-orange-900 | Самый тёмный |
Голубой (Sky)
50
100
200
300
400
500
600
700
800
900
| Класс | Токен | Описание |
|---|---|---|
bg-sky-50 | --color-sky-50 | Самый светлый |
bg-sky-100 | --color-sky-100 | Светлый фон |
bg-sky-200 | --color-sky-200 | Границы, разделители |
bg-sky-300 | --color-sky-300 | Вторичные элементы |
bg-sky-400 | --color-sky-400 | Неактивные состояния |
bg-sky-500 | --color-sky-500 | Основной акцент |
bg-sky-600 | --color-sky-600 | Hover-состояние |
bg-sky-700 | --color-sky-700 | Активный элемент |
bg-sky-800 | --color-sky-800 | Тёмный фон |
bg-sky-900 | --color-sky-900 | Самый тёмный |