Конвертер кольорів
Перетворюйте кольори між HEX, RGB, HSL і OKLCH із живим переглядом
Про цей інструмент
Введіть колір у будь-якому поширеному записі — #hex, rgb(), hsl() або іменований колір CSS — і отримайте всі формати одразу: HEX, RGB, HSL і OKLCH поруч із живим зразком. Альфа-канал зберігається між форматами, а вивід використовує сучасний синтаксис CSS (канали через пробіл), який чисто вставляється в теперішні стилі.
OKLCH включено, бо саме туди рухається колір у CSS: на відміну від HSL, його вісь світлості перцептивно однорідна, тож два кольори з однаковим L справді виглядають однаково яскравими, а зміна відтінку не змінює випадково сприйняту яскравість. Переведення наявної палітри в OKLCH — перший крок до побудови узгоджених колірних шкал.
Обчислення виконуються локально за опублікованими перетвореннями sRGB↔OKLab, і значення повертаються без втрат: RGB, який ви отримаєте з введеного HSL, — саме те, що обчислив би браузер.
Часті запитання
- Чому значення світлості в HSL і OKLCH не збігаються?
- Світлість у HSL — геометрична властивість значень RGB, а не людського зору: жовтий hsl(60 100% 50%) виглядає значно яскравішим за синій hsl(240 100% 50%) попри однаковий L. Вісь L в OKLCH спроєктована так, щоб відповідати сприйняттю, тож однаковий L означає однакову видиму яскравість. Ця розбіжність і є всією причиною існування OKLCH.
- Що означає значення альфа й де воно в кожному форматі?
- Альфа — це непрозорість, від 0 (прозоро) до 1 (непрозоро). У 8-значному hex це останній байт (#RRGGBBAA); у сучасному функційному синтаксисі воно йде після скісної риски: rgb(76 141 255 / 0.5). Цей конвертер автоматично проносить альфу крізь усі формати.
- Чи можна показати будь-який колір OKLCH у sRGB?
- Ні — OKLCH охоплює широкі гами, і деякі поєднання насиченості та світлості не мають відповідника в sRGB. Перетворення з sRGB (як робить цей інструмент) завжди лишається відтворюваним; у зворотний бік кольори поза гамою доводиться обрізати чи відображати, і саме тому яскраво-зелений із P3 виглядає тьмянішим на екрані sRGB.
- Чому rgb(76 141 255) через пробіли, а не через коми?
- CSS Color Module Level 4 стандартизував канали через пробіл із необов’язковою /альфою, і кожен сучасний браузер це підтримує. Форма з комами й досі працює, але саме пробільну використовують нові специфікації (і цей інструмент).