Nástroj pro výběr barev - Převod RGB, Hex, CMYK a HSV barevných kódů

Co je výběr barvy?

Výběr barvy je nástroj pro volbu barvy a zobrazení její hodnoty v různých barevných formátech. Tento nástroj zobrazuje současně barvu v RGB (červená, zelená, modrá), hexadecimálním formátu, CMYK (azurová, purpurová, žlutá, černá) a HSV (odstín, sytost, jas). Změna kteréhokoli formátu okamžitě aktualizuje ostatní.

Jak používat výběr barvy

Barvu lze zvolit třemi způsoby.

Kliknutím kamkoli do pole spektra vyberete odstín a sytost. Vodorovná poloha určuje odstín (barevnou skupinu, například červenou nebo modrou). Svislá poloha určuje sytost (jak intenzivně nebo vybledle barva působí). Posuvník pod spektrem ovládá jas, od černé vlevo po plný jas vpravo.

Funguje také zadání přesných hodnot. Pole hexadecimálního kódu přijímá kódy jako #2ECC71, s # i bez něj. Každé pole RGB přijímá celé číslo od 0 do 255. Každé pole CMYK přijímá celé číslo od 0 do 100. Hodnota zadaná nad povolený rozsah se omezí na maximum.

U každého barevného formátu je tlačítko pro kopírování. Kliknutím se daná hodnota zkopíruje do schránky a zobrazí se krátká zpráva „Zkopírováno!“.

Vysvětlení barevných modelů

RGB

RGB popisuje barvu jako směs červeného, zeleného a modrého světla, tedy stejných tří barev, které obrazovka používá k vytvoření každého pixelu. Každý kanál nabývá hodnot od 0 do 255. RGB(255, 0, 0) je čistě červená a RGB(0, 0, 0) je černá. RGB používají prohlížeče, aplikace i software pro práci s videem, protože odpovídá fungování obrazovek.

Hexadecimální formát

Hexadecimální kód zapisuje barvu RGB v číselné soustavě o základu 16 místo soustavy o základu 10. #2ECC71 obsahuje tři dvojice znaků: 2E pro červenou, CC pro zelenou a 71 pro modrou. Každá dvojice nabývá hodnot od 00 do FF. Hexadecimální kódy jsou běžné ve webdesignu, protože CSS je přijímá přímo a zapisují se kratším způsobem než rgb(). Existuje také tříznaková zkrácená forma: #0F0 znamená totéž co #00FF00.

CMYK

CMYK se používá pro tisk. Tiskárna vytváří barvu vrstvením azurového, purpurového, žlutého a černého inkoustu na bílý papír, takže světlo spíše ubírá než přidává. Každý kanál je vyjádřen procentem od 0 do 100. CMYK(0, 0, 0, 0) znamená, že není použit žádný inkoust a prosvítá bílý papír. CMYK nedokáže reprodukovat všechny barvy, které může zobrazit obrazovka; některé jasné barvy obrazovky, zejména určité odstíny modré a zelené, vypadají po vytištění matněji.

HSV

HSV odděleně popisuje odstín, sytost a jas. Odstín je barevná skupina udávaná ve stupních od 0° do 360°, přičemž 0° je červená, 120° zelená a 240° modrá. Sytost určuje intenzitu barvy, od 0 % (šedá) do 100 % (plně sytá barva). Jas určuje, jak světlá barva je, od 0 % (černá) do 100 % (plný jas). HSV se blíží tomu, jak lidé barvy přirozeně popisují, proto jsou na něm založeny spektrum a posuvník jasu v tomto nástroji.

Převod RGB na hexadecimální formát

Každý kanál RGB, tedy číslo od 0 do 255, se převede na dvoumístné hexadecimální číslo a tři dvojice se spojí s úvodním znakem #.

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

Převod RGB na CMYK

Nejprve se každý kanál RGB převede na zlomek mezi 0 a 1. Černá (K) se určí podle kanálu s nejvyšší hodnotou. Azurová, purpurová a žlutá se poté vypočítají ze zbývajících kanálů a hodnoty 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\%$

Když se K rovná 1 (barva je čistě černá), C, M a Y se všechny nastaví na 0, aby se zabránilo dělení nulou.

Převod RGB na HSV

RGB se nejprve převede na zlomky mezi 0 a 1. Označme $C_{max}$ největší ze tří hodnot, $C_{min}$ nejmenší a $\Delta$ jejich rozdíl.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ jinak } \frac{\Delta}{C_{max}}\times 100\%$

Odstín závisí na tom, který kanál je největší:

undefined