Четырнадцать палитр дизайн-систем, разобранных из официальных файлов — Tailwind, Material, Bootstrap, Ant Design, Radix, Fluent и другие. Откройте систему, чтобы увидеть все оттенки, скопировать точные значения и перейти в нужный инструмент.
14дизайн-систем
1,915значений
100%официальные
Дизайн-системы
14
Тоны Material Design
89 цветов
Material Web v0.192 · md-ref-paletteОткрыть палитру
Палитра Tailwind CSS
286 цветов
Tailwind CSS v4 · theme.cssОткрыть палитру
Палитра UnoCSS
264 цветов
UnoCSS preset-mini · Tailwind v3 + WindiОткрыть палитру
Токены Panda CSS
242 цветов
Panda CSS · @pandacss/preset-pandaОткрыть палитру
Тема Vanilla Extract
3 цветов
vanilla-extract · createTheme docs exampleОткрыть палитру
Токены StyleX
6 цветов
StyleX · defineVars docs exampleОткрыть палитру
Палитра Bootstrap
29 цветов
Bootstrap v5.3.8 · _variables.scssОткрыть палитру
Палитра Ant Design
130 цветов
Ant Design · @ant-design/colors 7.2.1Открыть палитру
Open Color
130 цветов
Open Color 1.9.1 · open-color.jsОткрыть палитру
Палитра Chakra UI
100 цветов
Chakra UI · @chakra-ui/theme 3.4.1Открыть палитру
Radix Colors
360 цветов
Radix Colors 3.0.0 · light scalesОткрыть палитру
Цвета Fluent UI
64 цветов
Fluent UI · @fluentui/tokens brandColorsОткрыть палитру
Палитра Primer
20 цветов
Primer · @primer/primitives 11.10.0 lightОткрыть палитру
Палитра Polaris
192 цветов
Shopify Polaris · polaris-tokens 9.4.2Открыть палитру
Кратко
Каждая палитра ниже разобрана из официального пакета, который публикует команда системы; ничего не приближено и не сгенерировано.
| Система | Цветов | Структура | Официальный источник |
|---|---|---|---|
| Тоны Material Design | 89 | 6 семейств × 13 ступеней | Material Web v0.192 · md-ref-palette |
| Палитра Tailwind CSS | 286 | 26 семейств × 11 ступеней | Tailwind CSS v4 · theme.css |
| Палитра UnoCSS | 264 | 24 семейств × 11 ступеней | UnoCSS preset-mini · Tailwind v3 + Windi |
| Токены Panda CSS | 242 | 22 семейств × 11 ступеней | Panda CSS · @pandacss/preset-panda |
| Тема Vanilla Extract | 3 | 3 семантических токенов | vanilla-extract · createTheme docs example |
| Токены StyleX | 6 | 6 семантических токенов | StyleX · defineVars docs example |
| Палитра Bootstrap | 29 | 29 семантических токенов | Bootstrap v5.3.8 · _variables.scss |
| Палитра Ant Design | 130 | 13 семейств × 10 ступеней | Ant Design · @ant-design/colors 7.2.1 |
| Open Color | 130 | 13 семейств × 10 ступеней | Open Color 1.9.1 · open-color.js |
| Палитра Chakra UI | 100 | 10 семейств × 10 ступеней | Chakra UI · @chakra-ui/theme 3.4.1 |
| Radix Colors | 360 | 30 семейств × 12 ступеней | Radix Colors 3.0.0 · light scales |
| Цвета Fluent UI | 64 | 4 семейств × 16 ступеней | Fluent UI · @fluentui/tokens brandColors |
| Палитра Primer | 20 | 20 семантических токенов | Primer · @primer/primitives 11.10.0 light |
| Палитра Polaris | 192 | 12 семейств × 16 ступеней | Shopify Polaris · polaris-tokens 9.4.2 |
Как пользоваться палитрами
1
Согласуйте с кодовой базой
Выберите палитру, которую продукт уже использует, чтобы токены совпали с вашими CSS-переменными.
2
Копируйте точное значение
Каждый образец открывает страницу цвета с HEX, RGB, HSL, OKLCH и проверкой контраста.
3
Проверьте контраст
Прежде чем закреплять пару текста и фона, прогоните два цвета через инструмент контраста.
Частые вопросы
Откуда эти значения цветов?
Каждая палитра разобрана из пакета, который публикует сама дизайн-система — theme.css для Tailwind, файлы токенов для Material, Bootstrap, Ant Design и других. Оценочных значений нет.
Почему где-то семейства, а где-то токены?
Шкальные системы вроде Tailwind дают 11 ступеней на семейство; токенные вроде Primer — осмысленные имена. Страница показывает реальную структуру.
Можно ли использовать в коммерческих проектах?
Палитры публикуются под свободными лицензиями (чаще MIT или Apache-2.0). Проверьте лицензию выбранной системы.
Нужен аккаунт или API-ключ?
Нет. Все значения видны на странице, и те же данные доступны через бесплатный API.