Конвертер кольорів

Три записи одного кольору

HEX, RGB і HSL описують той самий колір, просто різними координатами.

HEX - те, що дає дизайнер: #ff2d20. Три пари шістнадцяткових цифр - червоний, зелений, синій.

RGB - те саме числами 0-255. Зручний, коли треба додати прозорість: rgb(255 45 32 / 0.5).

HSL - відтінок, насиченість, світлість. Незамінний, коли треба похідний колір: та сама кнопка, але темніша на ховері - це зміна однієї цифри в HSL замість підбору нового HEX.

/* Однакова гама з одного відтінку - саме те, для чого існує HSL */
--brand:       hsl(3 100% 56%);
--brand-hover: hsl(3 100% 46%);
--brand-light: hsl(3 100% 96%);

Контраст за WCAG

Два числа під конвертером - коефіцієнт контрасту кольору з білим і чорним тлом. Це не естетика, а вимірювана характеристика читабельності.

Практичний висновок: фірмовий колір рідко годиться для тексту. Laravel-червоний #ff2d20 дає 3.72 на білому - цього досить для великого заголовка чи кнопки, але замало для абзацу. Тому на цьому сайті посилання в тексті темніші за логотип.

У Tailwind

/* Tailwind 4: кольори теми - звичайні CSS-змінні */
@theme {
    --color-laravel: #ff2d20;
    --color-laravel-dark: #e01b0f;
}

<!-- Далі використовуються як звичайні утиліти -->
<a class="text-laravel hover:text-laravel-dark">Посилання</a>

Сучасний CSS уміє рахувати похідні кольори сам, без препроцесора:

/* Той самий колір, на 20% темніший */
color: color-mix(in oklch, var(--color-laravel), black 20%);

Про oklch

Якщо ви бачили oklch() у чужому CSS - це те саме, що HSL, але в перцептивному просторі: однакова зміна світлості виглядає однаково для будь-якого відтінку. У HSL так не працює - жовтий на 50% світлості виглядає значно яскравішим за синій на тих самих 50%.

Для нових проєктів oklch кращий вибір для темізації; HEX і RGB лишаються мовою обміну з дизайнерами й браузерами.