01
#FDFDF9Фон приложения
yellow-1
- RGB
- rgb(253 253 249)
- Чёрный текст
- 20,59:1
- Белый текст
- 1,02:1
← Назад к каталогу палитр
Калибровка внимания
Жёлтый — точный, а не случайный.
Проверенная по источнику шкала из двенадцати жёлтых оттенков для спокойных поверхностей, границ, заметных состояний и читаемого текста — в точном порядке источника.
- Ступени шкалы
- 01—12
- Цветовое пространство
- sRGB
- Версия
- 3.0.0
Нужно проверитьСмысл передают текст и значок, а жёлтый меняет акцент.
Внимание- 01Фон приложения
#FDFDF9 - 02Мягкий фон
#FEFCE9 - 03Фон элемента
#FFFAB8 - 04Элемент при наведении
#FFF394 - 05Активный элемент
#FFE770 - 06Мягкая граница
#F3D768 - 07Интерактивная граница
#E4C767 - 08Заметная граница или индикатор фокуса
#D5AE39 - 09Сплошной фон
#FFE629 - 10Сплошной фон при наведении
#FFDC00 - 11Текст с низким контрастом
#9E6C00 - 12Текст с высоким контрастом
#473B1F
Шаги 9 и 10 — сплошные акценты для тёмного переднего плана. Проверяйте реальный компонент, а не полагайтесь на яркость жёлтого.
Зафиксированное происхождение
Точный непрозрачный экспорт Yellow, версия 3.0.0.
Справочник содержит только Yellow 1–12 из непрозрачного светлого sRGB-экспорта @radix-ui/colors 3.0.0. Тёмные варианты, альфа-канал и P3 сюда не входят.
Hexees — независимый справочник, не связанный с WorkOS или Radix и не одобренный ими.
Измеренная таблица токенов
Двенадцать ролей и точные значения.
На каждой карточке собраны официальный шаг, роль, sRGB-значение, рассчитанный контраст с чёрным и белым текстом и форматы для копирования.
Открыть цвет ↗
02
#FEFCE9Мягкий фон
yellow-2
- RGB
- rgb(254 252 233)
- Чёрный текст
- 20,31:1
- Белый текст
- 1,03:1
Другие форматы
03
#FFFAB8Фон элемента
yellow-3
- RGB
- rgb(255 250 184)
- Чёрный текст
- 19,62:1
- Белый текст
- 1,07:1
Другие форматы
04
#FFF394Элемент при наведении
yellow-4
- RGB
- rgb(255 243 148)
- Чёрный текст
- 18,50:1
- Белый текст
- 1,14:1
Другие форматы
05
#FFE770Активный элемент
yellow-5
- RGB
- rgb(255 231 112)
- Чёрный текст
- 16,92:1
- Белый текст
- 1,24:1
Другие форматы
06
#F3D768Мягкая граница
yellow-6
- RGB
- rgb(243 215 104)
- Чёрный текст
- 14,73:1
- Белый текст
- 1,43:1
Другие форматы
07
#E4C767Интерактивная граница
yellow-7
- RGB
- rgb(228 199 103)
- Чёрный текст
- 12,66:1
- Белый текст
- 1,66:1
Другие форматы
08
#D5AE39Заметная граница или индикатор фокуса
yellow-8
- RGB
- rgb(213 174 57)
- Чёрный текст
- 9,94:1
- Белый текст
- 2,11:1
Другие форматы
09
#FFE629Сплошной фон
yellow-9
- RGB
- rgb(255 230 41)
- Чёрный текст
- 16,60:1
- Белый текст
- 1,26:1
Другие форматы
10
#FFDC00Сплошной фон при наведении
yellow-10
- RGB
- rgb(255 220 0)
- Чёрный текст
- 15,49:1
- Белый текст
- 1,36:1
Другие форматы
11
#9E6C00Текст с низким контрастом
yellow-11
- RGB
- rgb(158 108 0)
- Чёрный текст
- 4,60:1
- Белый текст
- 4,57:1
Другие форматы
12
#473B1FТекст с высоким контрастом
yellow-12
- RGB
- rgb(71 59 31)
- Чёрный текст
- 1,91:1
- Белый текст
- 10,98:1
Другие форматы
Вниманию нужна структура
Цвет подаёт сигнал, но не объясняет.
Страница индексируется, только пока все двенадцать опубликованных значений совпадают с зафиксированным набором. Страницы отдельных токенов остаются noindex.
Дополняйте жёлтый явным текстом, значком и программным состоянием. Проверяйте текст, границы, индикаторы клавиатурной навигации и соседние поверхности в готовом интерфейсе.