HEX vs RGB vs HSL — Полное руководство по цветовым форматам для веб-дизайна
Узнайте разницу между цветовыми форматами HEX, RGB и HSL. Поймите, когда использовать каждый формат и как конвертировать между ними.
Почему важно понимать цветовые форматы
Цвета — основа визуального дизайна. Создаёте ли вы веб-сайт, проектируете мобильное приложение или создаёте цифровые произведения искусства, вы постоянно сталкиваетесь с различными цветовыми форматами. Три наиболее распространённых формата в вебе — HEX, RGB и HSL.
Каждый формат представляет одни и те же цвета по-разному. Выбор зависит от вашего рабочего процесса, инструментов и целей.
Что такое HEX?
HEX (шестнадцатеричный) — самый распространённый цветовой формат в вебе. Он использует шестисимвольный код после символа решётки: #FF0000 для красного, #00FF00 для зелёного и #0000FF для синего.
Диапазон значений для каждого канала — от 00 (0 в десятичной системе) до FF (255). HEX — выбор по умолчанию для большинства веб-разработчиков благодаря компактности и универсальной поддержке.
Что такое RGB?
RGB расшифровывается как Red (красный), Green (зелёный), Blue (синий). В CSS чистый красный записывается как rgb(255, 0, 0). Каждое значение варьируется от 0 до 255.
RGB основан на аддитивной цветовой модели. Он также поддерживает альфа-канал для прозрачности: rgba(255, 0, 0, 0.5) создаёт полупрозрачный красный.
Что такое HSL?
HSL расшифровывается как Hue (оттенок), Saturation (насыщенность) и Lightness (светлота). Чистый красный записывается как hsl(0, 100%, 50%). Оттенок — это угол на цветовом круге от 0 до 360 градусов.
HSL — самый интуитивный формат для человека. Хотите темнее? Уменьшите светлоту. Хотите приглушённый тон? Снизьте насыщенность.
Сравнение: HEX vs RGB vs HSL
Все три формата могут представлять одни и те же 16,7 миллиона цветов. Разница в читаемости и рабочем процессе.
HEX самый компактный, но трудночитаемый. RGB соответствует тому, как экраны отображают цвет. HSL наиболее понятен для человека.
Когда использовать каждый формат?
HEX — для компактного стандартного CSS. RGB — когда нужна прозрачность или программная манипуляция цветами. HSL — для дизайн-систем, цветовых тем и динамических вариаций цветов.
Мгновенная конвертация между форматами
Вам не нужно запоминать формулы конвертации. Наш инструмент «Палитра цветов» позволяет выбрать любой цвет и мгновенно увидеть его значения в HEX, RGB, HSL, CMYK и других форматах. Попробуйте наши бесплатные инструменты для работы с цветом.