HEX, RGB и HSL — в чём разница
HEX (например, #2fd705) — самый компактный формат, привычный для CSS и графических редакторов, но по нему сложно на глаз понять, насколько цвет светлый или насыщенный. RGB (rgb(47, 215, 5)) описывает цвет через смешение красного, зелёного и синего света — удобен для программирования, но так же трудно читается интуитивно. HSL (hsl(107, 95%, 43%)) — самый «человеческий» формат: отдельно задаёт тон (оттенок по цветовому кругу), насыщенность и светлоту, поэтому проще всего получить, например, более тёмный или более бледный вариант того же цвета — достаточно подвинуть один ползунок.
Этот конвертер пересчитывает все три формата одновременно и в любую сторону: введите готовый HEX от дизайнера — сразу увидите его RGB для кода и HSL для тонкой настройки, либо подберите цвет ползунками HSL и получите готовый HEX для вставки в CSS.
Если исходный цвет нужно не ввести вручную, а взять с готового изображения — воспользуйтесь пипеткой цвета, а результат можно тут же перевести здесь в нужный формат. Подобранный фирменный цвет пригодится и для водяного знака на фото, и для набора иконок сайта через генератор favicon — везде, где нужно точное соответствие бренд-палитре.