CodeKitHubКакво представлява този инструмент?
Цветовете в уеб се записват в няколко еквивалентни формата, всички дефинирани в спецификацията за CSS цветове на MDN. HEX (#4f46e5) е компактната форма, използвана навсякъде в CSS и при предаване на дизайни. RGB (rgb(79, 70, 229)) задава директно червения, зеления и синия компонент, което често е нужно на кода. HSL (hsl(243, 75%, 59%)) описва тон, наситеност и светлота — най-интуитивният формат за коригиране на цвят, например да го направите по-тъмен или по-малко наситен.
И трите описват точно един и същ цвят; този инструмент конвертира между тях с точност и показва преглед, за да потвърдите, че е точно цветът, който имате предвид.
Защо да го използвате?
- Приема всякакъв формат на вход — HEX (3 или 6 цифри), RGB или HSL — и дава всички формати на изход.
- Мостра с преглед на живо, за да виждате цвета, а не само числа.
- Визуален избор на цвят, ако предпочитате да избирате на око.
- Копиране с един клик за всеки формат, готово за CSS или код.
- Безплатно, мигновено, без качване на файлове.
Как да го използвате
- Въведете или поставете цвят: #4f46e5, rgb(79, 70, 229) или hsl(243, 75%, 59%) — всички работят.
- Или щракнете върху избора на цвят и изберете визуално.
- Прочетете и трите формата в резултатите и проверете мострата за преглед.
- Натиснете „Копирай“ до формата, който ви трябва.
Пример
Вход
#4f46e5Резултат
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Три записа, един и същ цвят.
Кой формат трябва да използвате?
И трите описват точно един и същ цвят — изборът зависи от това кой формат е най-удобен за конкретната задача, а не от точността.
| Формат | Най-подходящ за | Защо |
|---|---|---|
| HEX (#4f46e5) | CSS, предаване на дизайни, бързо копиране-поставяне | Най-кратък за писане и поставяне; универсален формат в дизайнерски инструменти като Figma. |
| RGB (rgb(79,70,229)) | Код, който работи директно с каналите, canvas/работа с изображения | Съответства на начина, по който графичните API-та и пикселните данни на изображенията реално съхраняват цвета. |
| HSL (hsl(243,75%,59%)) | Коригиране на цвят — по-светъл, по-тъмен, по-наситен/по-малко наситен | Светлотата и наситеността са отделни числа, които можете да настройвате директно, за разлика от HEX/RGB, където всеки канал се променя. |
Чести случаи на употреба
- Визуален избор на цвят в дизайнерски инструмент, след което конвертиране до точната HEX или RGB стойност, необходима в CSS или код.
- Генериране на набор от свързани нюанси (по-светли/по-тъмни варианти) чрез конвертиране в HSL, коригиране на светлотата и конвертиране обратно.
- Съгласуване на цвят на бранда в различни инструменти, всеки от които очаква различен формат — лого файл в RGB, стилово ръководство в HEX, CSS променлива, която изисква HSL за темизиране.
- Проверка дали цвят, взет от екранна снимка или дизайнерски файл (често даден като RGB), съвпада с HEX стойността в стиловия лист.
Често задавани въпроси
Кога трябва да използвам HSL вместо HEX или RGB?
Когато искате да разсъждавате логично за цвета. Да направите цвят с 10% по-тъмен в HSL означава да намалите светлотата с 10 пункта; при HEX или RGB би трябвало да преизчислите всички канали. Дизайн системите често дефинират палитрите си в HSL точно по тази причина.
Поддържа ли инструментът съкратен HEX от 3 цифри като #fff?
Да. #fff е съкратен запис на #ffffff — всяка цифра се удвоява. И двете форми се приемат, а изходът показва пълната 6-цифрена форма.
Ами прозрачност (alpha)?
Този инструмент конвертира непрозрачни цветове (стойностите RGB/HSL). Ако ви трябва прозрачност, добавете алфа сами: rgba(79, 70, 229, 0.5) или #4f46e580 — самият цвят остава същият.
Защо стойностите ми в HSL се различават с 1 от друг инструмент?
Заради закръгляне. Конверсията HSL↔RGB дава дробни стойности и различните инструменти закръгляват по различен начин. Разлика от ±1 в тона или процента е невидима и напълно нормална.
Поддържат ли се имена на цветове като „red“?
Не и във Фаза 1 — инструментът се фокусира върху трите числови формата, които разработчиците конвертират най-често. Въведете HEX/RGB/HSL стойността на цвета или го изберете визуално с избора на цвят.
Кога трябва да използвам HEX, RGB или HSL?
Ако ви трябва прозрачност, използвайте 8-цифрен HEX (#RRGGBBAA) или rgba() — 6-цифреният HEX няма алфа канал. Ако искате по-светли или по-тъмни варианти на един и същ цвят, HSL е най-лесен: запазете тона и наситеността фиксирани и променяйте само стойността на светлотата. За обикновено копиране и поставяне в CSS или дизайнерски инструменти, 6-цифреният HEX остава най-универсално приетата форма.