Преобразуйте цветовые коды HEX, RGB и HSL, а затем упакуйте результат в удобные для копирования фрагменты, которыми вы сможете поделиться.
Проверка акцента пользовательского интерфейса нормализуется в удобные для копирования HEX, RGB, HSL и фрагменты токенов.
Используйте белый текст на этом образце, чтобы добиться максимального контраста мелкого текста.
:root {
--brand-accent: #7C3AED;
--brand-accent-rgb: 124 58 237;
}
{
"color": {
"accent": {
"value": "#7C3AED",
"rgb": "124 58 237",
"hsl": "hsl(262, 83%, 58%)"
}
}
}
background-color: #7C3AED; color: #FFFFFF;
Цвета в Интернете могут быть представлены в нескольких форматах. HEX использует шестнадцатеричную запись (#RRGGBB), RGB определяет компоненты красного, зеленого и синего (0–255), а HSL использует оттенок (0–360), насыщенность и яркость (0–100%). Каждый формат имеет преимущества для различных случаев использования, таких как дизайнерские работы или программные манипуляции с цветом.
Цвета HEX кодируют значения RGB в шестнадцатеричном формате (16–255 на канал). RGB напрямую определяет интенсивность цвета (0–255). HSL отделяет цвет (оттенок) от интенсивности (насыщенности/яркости), что делает его более интуитивным для создания цветовых вариаций. Все форматы могут отображать одни и те же 16,7 миллионов цветов.
HSL лучше подходит, когда вам нужно создать цветовые вариации (светлее, темнее, более/менее насыщенный), поскольку вы можете настроить один компонент. RGB лучше подходит для смешивания цветов и при работе с обработкой изображений.
В сокращении HEX используются 3 цифры вместо 6 (#RGB вместо #RRGGBB). Каждая цифра удваивается: #F00 становится #FF0000 (красный). Работает только тогда, когда каждая пара имеет одинаковые цифры.