RGB срещу HEX срещу HSL срещу CMYK: Най-доброто ръководство за цветови формат

Ако някога сте се опитвали да проектирате уебсайт, да създадете лого или да отпечатате визитна картичка, веднага сте се сблъскали с объркващата азбучна супа от цветни кодове: HEX, RGB, HSL и CMYK. Защо има толкова много начини да се опише прост нюанс на синьото?

Истината е, че компютрите и принтерите „виждат“ светлината по фундаментално различни начини. Освен това, начинът, по който компютрите обработват светлината, не е непременно начинът, по който човешкият мозък интерпретира цвета. Разбирането на тези формати не е просто теория – то ще ви спести от разполагането на уебсайтове с недостъпни контрастни съотношения или плащането на хиляди долари за маркетингови листовки, които се разпечатват, изглеждайки кални и тъмни.

Адитивна срещу субтрактивна светлина

Преди да се потопим в кода, трябва да установим физическата разлика между екрани и хартия.

• Екраните излъчват светлина (добавка). Ако изключите всички пиксели, екранът е черен. За да направи бяло, екранът излъчва червена, зелена и синя светлина с максимален интензитет.
• Хартията отразява светлината (субтрактивно). Празният лист хартия вече е бял (той отразява цялата светлина). За да направи черно, принтерът наслоява синьо, магента и жълто мастило едно върху друго, за да абсорбира цялата светлина.

1. RGB (червено, зелено, синьо)

RGB е родният език на монитора на вашия компютър. Той определя цвят, като казва на екрана точно колко червена, зелена и синя светлина да излъчва. Всеки канал е представен с цяло число от 0 (изключено) до 255 (максимален интензитет).

Например, чисто червено е rgb(255, 0, 0). Чисто бялото е rgb(255, 255, 255).

Най-добро за: Редактиране на изображения (Photoshop) и цифрова фотография. Той директно манипулира хардуерните пиксели.

2. HEX (шестнадесетичен)

HEX кодовете, като #FF5733, са точно същото като RGB. Единствената разлика е математиката. Вместо да използва числа с основа 10 (0-255), той използва шестнадесетични числа с основа 16 (00 до FF). Първите две букви диктуват червено, средните две зелено, а последните две синьо.

Защо уеб разработчиците използват HEX? Защото е по-къс. Писането на #FFF е много по-бързо за CSS програмист, отколкото писането на rgb(255, 255, 255).

Най-добро за: Твърдо кодиране на маркови цветове в CSS. Той е кратък и лесно се копира между инструменти за проектиране като Figma и редактори на код.

3. HSL (Hue, Saturation, Lightness)

RGB и HEX са ужасни за хората. Ако ви покажа кода #4A90E2, не можете лесно да познаете какъв е цветът му. Ако ви помоля да „направите това синьо с 20% по-тъмно“, извършването на математиката в HEX е почти невъзможно.

HSL е проектиран за човешки мозъци. Той определя цвета в 360-градусово цветно колело.

• Нюанс (0-360): Действителният цвят. 0 е червено, 120 е зелено, 240 е синьо.
• Наситеност (0-100%): Колко интензивен е цветът. 0% е сиво, 100% е жизнено.
• Светлота (0-100%): Колко тъмно или ярко е. 0% е черно, 100% е бяло.

Ако синьото на вашата марка е hsl(210, 100%, 50%) и искате по-тъмен нюанс за ефект на задържане на бутон, просто променяте последното число: hsl(210, 100%, 40%). Това е магия за CSS архитектурата.

4. CMYK (циан, магента, жълто, ключ/черно)

CMYK е само за физическия свят. Той диктува как принтерът смесва физическо мастило. Тъй като мастилото абсорбира светлина, цветовото пространство е физически по-малко от RGB. Има живи неоново зелени, които екранът може да излъчва (в RGB), които принтерът физически не може да отпечата (в CMYK).

Златното правило: Никога не изпращайте RGB файл на търговски печатник. Принтерът принудително ще го преобразува в CMYK, в резултат на което живите ви цветове ще изглеждат кални и избелени. Винаги преобразувайте дизайните си в CMYK, преди да ги изпратите в печатницата.

Сравнителна матрица

Format	Environment	Readability	Primary Use Case
HEX	Digital	Low	Standard web design, copying from Figma
RGB	Digital	Medium	Manipulating alpha transparency (rgba)
HSL	Digital	High	Dynamic CSS theming, Dark Modes
CMYK	Physical Print	N/A	Business cards, flyers, packaging

Често задавани въпроси (FAQ)