Инструмент за избор на цвят - Конвертиране на 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 на (2,5 cm) 12 мъже и около 1 на (2,5 cm) 200 жени имат някаква форма на цветова недостатъчност, най-често намалена способност да различават червено от зелено. Дизайн, който разчита само на цвета за предаване на смисъл, например съобщение за грешка в червено без икона или етикет, няма да работи за тези потребители. Добавянето на текстов етикет, икона или шарка наред с цвета решава проблема. Текстът също трябва да има достатъчен контраст с фона. Насоките за достъпност на уеб съдържанието (WCAG) препоръчват контрастно съотношение най-малко 4,5:1 за обикновен текст и 3:1 за голям текст. За измерването му е необходим специален инструмент за проверка на контраста, тъй като този инструмент не изчислява сам контрастни съотношения. ## Често задавани въпроси **Каква е разликата между RGB и CMYK?** RGB е предназначен за екрани и изгражда цвета чрез добавяне на червена, зелена и синя светлина. CMYK е предназначен за печат и изгражда цвета чрез нанасяне на слоеве мастило върху хартия, което вместо това изважда светлина. RGB може да създава по-ярки цветове от CMYK, защото мастилото не може да възпроизведе диапазона от цветове, който екранът излъчва. **Защо отпечатаните цветове изглеждат различно от тези на екрана?** Екранът излъчва светлина директно, а отпечатаната страница само отразява светлината, която пада върху нея. Мастилото CMYK също покрива по-малък диапазон от цветове в сравнение със светлината RGB, затова някои ярки цветове от екрана не могат да бъдат възпроизведени точно върху хартия. **Какво означава символът # в шестнадесетичен код?** Той обозначава следващите знаци като шестнадесетичен цветови код — конвенция, произлязла от ранните версии на HTML и CSS. Без него браузърът няма да разпознае стойността като цвят. **Защо някои шестнадесетични кодове съдържат само три знака?** Кодът с три знака е съкратен запис на код с шест знака, при който всяка двойка повтаря една и съща цифра. `#0F0` се разширява до `#00FF00`. **Точни ли са преобразуванията между форматите?** Преобразуването от RGB в шестнадесетичен формат е точно, тъй като това са същите числа, записани в различна бройна система. Преобразуването от RGB в CMYK е приблизително, защото преобразува между светлина и мастило, които са различни физически процеси с различни цветови диапазони. **Може ли този инструмент да избере цвят директно от изображение или уеб страница?** Не. Разширение за браузър или вграденият в операционната система инструмент за избор на цвят, например Digital Color Meter в macOS, може да прочете цвят от екрана; получената стойност след това може да се въведе в този инструмент за преобразуване.