Алатка за одабир боја - Конвертовање RGB, Hex, CMYK и HSV Color кодова

Шта је бирач боје?

Бирач боје је алат за избор боје и приказ њене вредности у различитим форматима боја. Овај бирач истовремено приказује боју у форматима RGB (црвена, зелена, плава), хексадекадном, CMYK (цијан, магента, жута, црна) и HSV (нијанса, засићеност, вредност). Промена било ког формата тренутно ажурира остале.

Како се користи бирач боје

Боја се може изабрати на три начина.

Кликните било где у оквиру спектра да бисте изабрали нијансу и засићеност. Хоризонтални положај одређује нијансу, односно групу боја, као што су црвена или плава. Вертикални положај одређује засићеност, односно колико боја изгледа живо или испрано. Клизач испод спектра контролише осветљеност, од црне са леве стране до пуне осветљености са десне.

Функционише и унос тачних вредности. Поље за хексадекадну вредност прихвата кодове као што је #2ECC71, са знаком # или без њега. Свако RGB поље прихвата цео број од 0 до 255. Свако CMYK поље прихвата цео број од 0 до 100. Вредност унетa изнад дозвољеног опсега ограничава се на највећу дозвољену вредност.

Сваки формат боје има дугме за копирање поред себе. Кликом на њега та вредност се копира у клипборд и приказује се кратка порука „Копирано!“.

Објашњење модела боја

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 у хексадекадни запис

Сваки 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, може да очита боју са екрана; добијена вредност се затим може унети у овај алат ради претварања.