Конверторът приема всеки CSS hex формат: 6-цифрен #3366cc, 3-цифрото съкращение #36c, както и 4- и 8-цифрените форми с алфа канал, с или без диеза #. Показва низа hsl() или hsla(), отделните стойности и разбивка по компоненти - а също и ред HSL към HEX за обратната посока. Всичко работи в браузъра ви - без качване, без акаунт, без ограничения.
HEX към HSL конвертор
Работи изцяло в браузъра - без качване и без регистрация.
CSS
hsl(220, 60%, 50%)Как се конвертира
Тон220
Наситеност60%
Светлина50%
Търсите обратното? HSL към HEX
#3366ccКак се конвертира HEX в HSL?
Първо hex кодът се разчита като червено, зелено и синьо (0-255), а после същият цвят се записва през тон, наситеност и светлина. Тонът е ъгъл по цветното колело (0-360), наситеността показва колко жив е цветът (0-100%), а светлината - колко светъл е (0-100%). #3366cc става hsl(220, 60%, 50%). Инструментът го прави мигновено, докато пишете.
Как се използва
- 1Въведете hex код. Напишете или поставете hex цвят като #3366cc (или #36c), или изберете от цветовата палитра. Диезът # е незадължителен.
- 2Прочетете стойността HSL. Низът hsl(), обикновените стойности и визуалният преглед на цвета се обновяват, докато пишете, заедно с разбивка по компоненти за тон, наситеност и светлина.
- 3Копирайте нужния формат. Кликнете Copy до низа hsl() или до суровите стойности. Трябва ли обратното? Въведете тон, наситеност и светлина по-долу, за да получите hex кода.
За кого е
- Front-end разработчици, които превръщат hex код в hsl(), за да променят светлината при hover и focus състояния, без да избират изцяло нов цвят.
- Дизайнери, изграждащи палитри, които запазват тона фиксиран и стъпково променят наситеността и светлината, за да получат нюанси и сенки от един брандов цвят.
- Автори на теми и дизайн токени, съхраняващи цветовете като HSL, защото се чете и коригира на ръка много по-лесно от hex низ.
- Всеки, съгласуващ цветове между инструменти, където единият очаква hex (Figma, повечето CSS), а другият - HSL (SCSS помощници, някои цветови системи).
Често задавани въпроси
Безплатен ли е този конвертор от HEX към HSL?
Да - напълно безплатен е, без регистрация и без ограничения. Работи изцяло в браузъра ви.
Качват ли се някъде моите цветове?
Не. Конвертирането е обикновен JavaScript, изпълняван на вашето устройство - нищо не се изпраща към сървър и продължава да работи офлайн, след като страницата се зареди.
Какво е HSL?
HSL означава тон, наситеност и светлина (hue, saturation, lightness). Тонът е ъгъл от 0 до 360 градуса по цветното колело, наситеността показва колко жив е цветът от 0 до 100 процента, а светлината върви от 0 процента (черно) през чистия цвят при 50 процента до 100 процента (бяло).
Как се конвертира HEX в HSL на ръка?
Превърнете hex кода в червено, зелено и синьо и разделете всяко на 255. Вземете максимума и минимума от трите: светлината е тяхната средна стойност, наситеността е (макс - мин) разделено на (1 - |2L - 1|), а тонът зависи от това кой канал е максимумът, мащабиран до 0-360 градуса.
Поддържа ли 3-цифрено съкращение като #36c?
Да. В CSS съкращението всяка цифра се дублира, така че #36c се разширява до #3366cc и се конвертира в hsl(220, 60%, 50%). 4-цифрената форма работи по същия начин, като последната цифра е алфа.
Как обработва прозрачността (HSLA)?
8-цифреният hex код носи алфа в последната двойка. Този байт (0-255) се дели на 255, за да се получи стойността алфа 0-1, която очаква hsla(), закръглена до три знака - така #3366cc80 става hsla(220, 60%, 50%, 0.502).
Може ли да конвертира HSL обратно в HEX?
Да. Използвайте реда HSL към HEX под резултата: въведете тон (0-360), както и наситеност и светлина (0-100%), и той връща hex кода мигновено. Стойности извън диапазона се ограничават.
Защо HSL е по-полезен от hex?
HSL се чете от човек: можете да изсветлите цвят, като повишите L, да го приглушите, като намалите S, или да смените семейството му, като промените H - без да гадаете hex цифри. Това го прави идеален за изграждане на съгласувани палитри, hover състояния и дизайн токени.