Прикладная проверка цвета HIF
Создавайте цвет без гадания
Задайте один исходный цвет. Colour Lab построит сдержанные семантические системы, отклонит варианты с нарушениями и подготовит светлые и тёмные токены для реализации.
Фирменный цвет направляет цветовой тон, но не становится автоматически текстом, статусом или большой поверхностью.
Схема предпросмотра
Профиль выразительности
Выбранная цветовая система
HIF Colour LabСпокойный
Прикладная проверка цвета HIF
Спокойный интерфейс с одним ясным решением
Поверхности передают структуру. Цвет получает определённую роль и не конкурирует с содержанием.
Изменения сохранены
Одно решение требует проверки
Исходные шкалы
OkLCH → sRGB
Нейтральная
50
#f8f8f8100
#eeeeef200
#d7d7d9300
#b6b7b9400
#97989a500
#797a7d600
#5c5e60700
#414244800
#28292a900
#111213950
#020203Акцентная
50
#f4f9ff100
#e6effd200
#c6d9f4300
#9db9e3400
#779acc500
#567cb1600
#3a5e92700
#214271800
#0e284d900
#031129950
#000209Поддерживающая
50
#f6f9fd100
#eceff3200
#d2d8e1300
#afb8c6400
#8e99a9500
#6f7b8c600
#535e6f700
#394352800
#212935900
#0d1219950
#020204Информация
Успех
Предупреждение
Опасность
Семантические токены
| Роль | Светлая | Тёмная |
|---|---|---|
| canvas | #f8f8f8 | #020203 |
| surface | #eeeeef | #111213 |
| text.primary | #111213 | #eeeeef |
| text.secondary | #414244 | #97989a |
| border | #797a7d | #5c5e60 |
| accent | #3a5e92 | #779acc |
| on-accent | #ffffff | #090b10 |
| support | #535e6f | #8e99a9 |
| on-support | #ffffff | #090b10 |
| focus | #567cb1 | #779acc |
| status.success | #2f4a30 | #a7bfa7 |
| status.warning | #514018 | #c5b696 |
| status.danger | #62322f | #d8aba6 |
Обязательные пары готового представления
- Aalight-text-primary17.66:1 / 7:1PASS
- Aalight-text-secondary9.47:1 / 4.5:1PASS
- Aalight-control-boundary4.04:1 / 3:1PASS
- Aalight-accent-boundary6.19:1 / 3:1PASS
- Aalight-accent-content6.57:1 / 4.5:1PASS
- Aalight-support-boundary6.18:1 / 3:1PASS
- Aalight-support-content6.57:1 / 4.5:1PASS
- Aalight-focus4.02:1 / 3:1PASS
- Aalight-info8.58:1 / 4.5:1PASS
- Aalight-success8.50:1 / 4.5:1PASS
- Aalight-warning8.66:1 / 4.5:1PASS
- Aalight-danger8.99:1 / 4.5:1PASS
- Aadark-text-primary17.89:1 / 7:1PASS
- Aadark-text-secondary7.18:1 / 4.5:1PASS
- Aadark-control-boundary3.18:1 / 3:1PASS
- Aadark-accent-boundary7.19:1 / 3:1PASS
- Aadark-accent-content6.82:1 / 4.5:1PASS
- Aadark-support-boundary7.19:1 / 3:1PASS
- Aadark-support-content6.82:1 / 4.5:1PASS
- Aadark-focus7.19:1 / 3:1PASS
- Aadark-info9.43:1 / 4.5:1PASS
- Aadark-success9.51:1 / 4.5:1PASS
- Aadark-warning9.42:1 / 4.5:1PASS
- Aadark-danger9.30:1 / 4.5:1PASS
Порог высокой цветности и расстояние почти одинаковых цветов являются инженерной диагностикой HIF, а не критериями соответствия WCAG. Роли компонентов, площадь, состояния, принудительные системные цвета и понимание людьми всё равно требуют проверки. Открыть цветовую конституцию