Преобразуйте цветовые коды HEX, RGB и HSL, а затем упакуйте результат в удобные для копирования фрагменты, которыми вы сможете поделиться.
Передача токена бренда нормализуется в удобные для копирования HEX, RGB, HSL и фрагменты токенов.
Используйте темный текст на этом образце, чтобы добиться максимального контраста мелкого текста.
:root {
--brand-accent: #0EA5E9;
--brand-accent-rgb: 14 165 233;
}
{
"color": {
"accent": {
"value": "#0EA5E9",
"rgb": "14 165 233",
"hsl": "hsl(199, 89%, 48%)"
}
}
}
background-color: #0EA5E9; color: #111827;
Цвета в Интернете могут быть представлены в нескольких форматах. 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 (красный). Работает только тогда, когда каждая пара имеет одинаковые цифры.