01
#FDFCFEФон приложения
violet-1
Radix Violet 1- RGB
rgb(253 252 254)- Чёрный текст
- 20,53:1
- Белый текст
- 1,02:1
← Назад к каталогу цветов
Карта глубины интерфейса
Radix Violet: слои по назначению.
Проверенная по источнику шкала из двенадцати фиолетовых оттенков выстроена по глубине интерфейса: от спокойного холста и границ компонентов до сплошного акцента и читаемого текста.
- Ступени шкалы
- 01—12
- Описанные роли
- 12
- Версия
- 3.0.0
- 01Фон приложения
#FDFCFE - 02Ненавязчивый фон
#FAF8FF - 03Фон компонента
#F4F0FE - 04Компонент при наведении
#EBE4FF - 05Активный компонент
#E1D9FF - 06Ненавязчивая граница
#D4CAFE - 07Интерактивная граница
#C2B5F5 - 08Выраженная граница или фокус
#AA99EC - 09Сплошной фон
#6E56CF - 10Сплошной фон при наведении
#654DC4 - 11Текст с мягким контрастом
#6550B9 - 12Текст с высоким контрастом
#2F265F
Шаг 9 — слой сплошного акцента. Шаги 11 и 12 переходят к тексту; каждую реальную пару нужно проверять.
Зафиксированное происхождение
Точный непрозрачный экспорт Violet, версия 3.0.0.
Справочник содержит только Violet 1–12 из непрозрачного светлого sRGB-экспорта @radix-ui/colors 3.0.0. Тёмные варианты, альфа-канал и P3 сюда не входят.
Hexees — независимый справочник, не связанный с WorkOS или Radix и не одобренный ими.
- Версия
- @radix-ui/colors 3.0.0
- Лицензия
- MIT
Компактный реестр слоёв
Двенадцать слоёв с точными измерениями.
Исходный порядок сохранён в группах поверхностей, границ и переднего плана. В каждой компактной карточке есть одно прямое действие для HEX, точные sRGB-данные и рассчитанный контраст текста.
Холст и поверхности · 01—05
Открыть цвет
02
#FAF8FFНенавязчивый фон
violet-2
Radix Violet 2- RGB
rgb(250 248 255)- Чёрный текст
- 19,94:1
- Белый текст
- 1,05:1
Другие форматы
03
#F4F0FEФон компонента
violet-3
Radix Violet 3- RGB
rgb(244 240 254)- Чёрный текст
- 18,74:1
- Белый текст
- 1,12:1
Другие форматы
04
#EBE4FFКомпонент при наведении
violet-4
Radix Violet 4- RGB
rgb(235 228 255)- Чёрный текст
- 17,07:1
- Белый текст
- 1,23:1
Другие форматы
05
#E1D9FFАктивный компонент
violet-5
Radix Violet 5- RGB
rgb(225 217 255)- Чёрный текст
- 15,57:1
- Белый текст
- 1,35:1
Другие форматы
Границы и элементы · 06—08
06
#D4CAFEНенавязчивая граница
violet-6
Radix Violet 6- RGB
rgb(212 202 254)- Чёрный текст
- 13,68:1
- Белый текст
- 1,54:1
Другие форматы
07
#C2B5F5Интерактивная граница
violet-7
Radix Violet 7- RGB
rgb(194 181 245)- Чёрный текст
- 11,22:1
- Белый текст
- 1,87:1
Другие форматы
08
#AA99ECВыраженная граница или фокус
violet-8
Radix Violet 8- RGB
rgb(170 153 236)- Чёрный текст
- 8,48:1
- Белый текст
- 2,48:1
Другие форматы
Действие и передний план · 09—12
09
#6E56CFСплошной фон
violet-9
Фиолетовый Radix 9- RGB
rgb(110 86 207)- Чёрный текст
- 3,90:1
- Белый текст
- 5,39:1
Другие форматы
10
#654DC4Сплошной фон при наведении
violet-10
Radix Violet 10- RGB
rgb(101 77 196)- Чёрный текст
- 3,41:1
- Белый текст
- 6,15:1
Другие форматы
11
#6550B9Текст с мягким контрастом
violet-11
Radix Violet 11- RGB
rgb(101 80 185)- Чёрный текст
- 3,40:1
- Белый текст
- 6,17:1
Другие форматы
12
#2F265FТекст с высоким контрастом
violet-12
Radix Violet 12- RGB
rgb(47 38 95)- Чёрный текст
- 1,56:1
- Белый текст
- 13,43:1
Другие форматы
Используйте доказательно
Глубина — это система, а не свойство одного цвета.
Коллекция индексируется только при совпадении всех двенадцати опубликованных значений с зафиксированным манифестом. Страницы отдельных токенов остаются noindex.
Проверяйте текст, рамки фокуса, выбранные состояния и соседние слои в готовом интерфейсе. Один фиолетовый не передаёт иерархию или действие: добавляйте подписи, форму и программно доступное состояние.