Инструмент за избор на цвят - Конвертиране на RGB, Hex, CMYK и HSV цветови кодове

Какво представлява инструментът за избор на цвят?

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

Как се използва инструментът за избор на цвят

Има три начина за избор на цвят.

Щракнете на произволно място в спектралното поле, за да изберете нюанс и наситеност. Хоризонталната позиция определя нюанса (цветовата група, например червено или синьо). Вертикалната позиция определя наситеността (доколко цветът изглежда ярък или избледнял). Плъзгачът под спектъра управлява яркостта — от черно вляво до пълна яркост вдясно.

Въвеждането на точни стойности също работи. Полето за шестнадесетичен код приема кодове като #2ECC71, със или без #. Всяко RGB поле приема цяло число от 0 до 255. Всяко CMYK поле приема цяло число от 0 до 100. Стойност, въведена над допустимия диапазон, се ограничава до максималната.

До всеки цветови формат има бутон за копиране. При щракване стойността се копира в клипборда и се показва кратко съобщение „Копирано!“.

Обяснение на цветовите модели

RGB

RGB описва цвета като смес от червена, зелена и синя светлина — същите три цвята, които екранът използва, за да създаде всеки пиксел. Всеки канал е в диапазона от 0 до 255. RGB(255, 0, 0) е чисто червено, а RGB(0, 0, 0) е черно. Браузърите, приложенията и софтуерът за видео използват RGB, защото този модел съответства на начина, по който работят екраните.

Шестнадесетичен

Шестнадесетичният код записва RGB цвят в бройна система с основа 16 вместо с основа 10. #2ECC71 има три двойки знаци: 2E за червеното, CC за зеленото и 71 за синьото. Всяка двойка е в диапазона от 00 до FF. Шестнадесетичните кодове са често срещани в уеб дизайна, защото CSS ги приема директно и са по-кратки за изписване от rgb(). Съществува и съкратен запис с три знака: #0F0 означава същото като #00FF00.

CMYK

CMYK се използва при печат. Принтерът изгражда цвета, като нанася слоеве циан, магента, жълто и черно мастило върху бяла хартия, затова моделът работи чрез изваждане на светлина, а не чрез добавянето ѝ. Всеки канал е процент от 0 до 100. CMYK(0, 0, 0, 0) означава пълна липса на мастило, при което се вижда бялата хартия. CMYK не може да възпроизведе всеки цвят, който екранът показва; някои ярки цветове от екрана, особено определени сини и зелени, изглеждат по-бледи след отпечатване.

HSV

HSV описва поотделно нюанса, наситеността и стойността. Нюансът е цветовата група и се задава в градуси от 0° до 360°, като 0° е червено, 120° е зелено, а 240° е синьо. Наситеността показва доколко цветът е ярък — от 0% (сиво) до 100% (напълно наситен цвят). Стойността показва яркостта — от 0% (черно) до 100% (пълна яркост). HSV е близък до начина, по който хората естествено описват цветовете, затова спектърът и плъзгачът за яркост в този инструмент са изградени на тази основа.

Формула за преобразуване на RGB в HEX

Всеки RGB канал, число от 0 до 255, се преобразува в двуцифрено шестнадесетично число, след което трите двойки се съединяват с # отпред.

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

Формула за преобразуване от RGB в CMYK

Първо всеки RGB канал се мащабира до дроб между 0 и 1. Черното (K) се определя от най-големия канал. След това цианът, магентата и жълтото се изчисляват от останалите канали и K.

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

Когато K е равно на 1 (цветът е чисто черен), C, M и Y се задават на 0, за да се избегне деление на нула.

Формула за преобразуване от RGB в HSV

Първо RGB се мащабира до дроби между 0 и 1. Нека $C_{max}$ е най-голямата от трите стойности, $C_{min}$ — най-малката, а $\Delta$ — разликата между тях.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ в противен случай } \frac{\Delta}{C_{max}}\times 100\%$

Нюансът зависи от това кой канал е най-голям:

0° & \Delta = 0 \\ 60°\times\left(\dfrac{G'-B'}{\Delta}\bmod 6\right) & C_{max}=R' \\ 60°\times\left(\dfrac{B'-R'}{\Delta}+2\right) & C_{max}=G' \\ 60°\times\left(\dfrac{R'-G'}{\Delta}+4\right) & C_{max}=B' \end{cases}$$ ## Пример с решение Нека започнем с RGB(46, 204, 113), нюанс на зеленото. **Шестнадесетичен формат:** 46 в шестнадесетичен формат е `2E`, 204 е `CC`, а 113 е `71`, което дава `#2ECC71`. **CMYK:** След мащабиране R′ = 0,180, G′ = 0,800, B′ = 0,443. Най-голямата стойност е G′, затова K = 1 − 0,800 = 0,20, което означава 20% черно. След това C = (1 − 0,180 − 0,20) / 0,800 × 100 ≈ 77%, M = (1 − 0,800 − 0,20) / 0,800 × 100 = 0%, а Y = (1 − 0,443 − 0,20) / 0,800 × 100 ≈ 45%. Резултатът е CMYK(77, 0, 45, 20). **HSV:** $C_{max}$ = 0,800 (зелено), $C_{min}$ = 0,180, следователно Δ = 0,620. Стойността = 80%. Наситеността = 0,620 / 0,800 × 100 ≈ 77%. Тъй като зеленият канал е най-голям, H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0,443 − 0,180) / 0,620 + 2) ≈ 145°. Резултатът е HSV(145°, 77%, 80%). ## Достъпност при избора на цветове Приблизително [1 на 12 мъже](https://www.nei.nih.gov/eye-health-information/eye-conditions-and-diseases/color-blindness) и около 1 на 200 жени имат някаква форма на нарушено цветоусещане, най-често намалена способност да различават червено от зелено. Дизайн, който разчита само на цвета, за да предаде значение, например червено съобщение за грешка без икона или надпис, не е подходящ за тези потребители. Добавянето на текстов надпис, икона или шарка до цвета решава проблема. Текстът също се нуждае от достатъчен контраст спрямо фона си. Насоките за достъпност на уеб съдържанието (WCAG) препоръчват контрастно отношение [най-малко 4,5:1 за нормален текст и 3:1 за едър текст](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html). За измерването му е нужна специална проверка на контраста, тъй като този инструмент не изчислява контрастни отношения. ## Често задавани въпроси **Каква е разликата между RGB и CMYK?** RGB е предназначен за екрани и изгражда цвета чрез добавяне на червена, зелена и синя светлина. CMYK е предназначен за печат и изгражда цвета чрез нанасяне на слоеве мастило върху хартия, което вместо това изважда светлина. RGB може да създава по-ярки цветове от CMYK, защото мастилото не може да възпроизведе диапазона от цветове, който екранът излъчва. **Защо отпечатаните цветове изглеждат различно от тези на екрана?** Екранът излъчва светлина директно, а отпечатаната страница само отразява светлината, която пада върху нея. Мастилото CMYK също покрива по-малък диапазон от цветове в сравнение със светлината RGB, затова някои ярки цветове от екрана не могат да бъдат възпроизведени точно върху хартия. **Какво означава символът # в шестнадесетичен код?** Той обозначава следващите знаци като шестнадесетичен цветови код — конвенция, произлязла от ранните версии на HTML и CSS. Без него браузърът няма да разпознае стойността като цвят. **Защо някои шестнадесетични кодове съдържат само три знака?** Кодът с три знака е съкратен запис на код с шест знака, при който всяка двойка повтаря една и съща цифра. `#0F0` се разширява до `#00FF00`. **Точни ли са преобразуванията между форматите?** Преобразуването от RGB в шестнадесетичен формат е точно, тъй като това са същите числа, записани в различна бройна система. Преобразуването от RGB в CMYK е приблизително, защото преобразува между светлина и мастило, които са различни физически процеси с различни цветови диапазони. **Може ли този инструмент да избере цвят директно от изображение или уеб страница?** Не. Разширение за браузър или вграденият в операционната система инструмент за избор на цвят, например Digital Color Meter в macOS, може да прочете цвят от екрана; получената стойност след това може да се въведе в този инструмент за преобразуване. ## Източници 1. World Wide Web Consortium (W3C). *CSS Color Module Level 4*. [CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/) — шестнадесетичните цветове използват двойки от 00 до ff за червено, зелено и синьо; формата с 3 цифри удвоява всяка цифра, така че #123 е равно на #112233. 2. National Eye Institute. *Color Blindness*. [Color blindness](https://www.nei.nih.gov/eye-health-information/eye-conditions-and-diseases/color-blindness) — около 1 на 12 мъже имат нарушено цветоусещане, а при мъжете рискът е много по-висок, отколкото при жените. 3. World Wide Web Consortium (W3C). *Understanding Success Criterion 1.4.3: Contrast (Minimum)*. [Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) — текстът изисква контрастно отношение най-малко 4,5:1, а едрият текст — 3:1.