Color picker

O nástroji

Tento color picker umožňuje rychle zjistit barvu v různých formátech, jako jsou: HEX, RGB, RGBA, HSL, HSLA, CMYK.

• Import barvy z textu – vložením HEX či RGB se barevné prostory mezi sebou automaticky převedou.
• Podpora průhlednosti (neboli: alfa kanál či transparentnost) – takže si můžete snadno doladit barvu s různou mírou průsvitnosti.
• Manuální dolaďování pomocí čísel – Pokud je potřeba, lze barvu jemně doladit pomocí změn RGB hodnot.
• Kapátko i mimo okno prohlížeče – Pokud používáte prohlížeč na bázi Chromium (např. Chrome, Edge, Opera), nástroj vám zobrazí tlačítko kapátka. Díky tomuto kapátku můžete získat barvu i mimo okno prohlížeče s přesností na jednotlivé pixely.

Barevné prostory

Barva není jen vizuální vjem. V digitálním světě je to hlavně číslo, které může mít více formátů. Každý barevný prostor či model, má jiný způsob jak barvu zapsat, zobrazit a chápat. Barevné prostory jsou matematické způsoby, jak barvu popsat v určitém kontextu, třeba na monitoru, v tisku nebo v editoru.

RGB

RGB (Red, Green, Blue) je model založený na světle. Takto barvy „vnímá“ displej, mícháním červené, zelené a modré vznikají ostatní odstíny. Existuje ještě varianta RGBA, která je rozšířena o alfa kanál, tedy průhlednost (Red, Green, Blue, Alpha). Barevný prostor RGB se používá nejčastěji v oblasti výpočetní techniky, pro digitální zobrazování, kde je potřeba přesná kontrola nad jednotlivými barevnými složkami.

• Formát: rgb(255, 0, 0)
• Formát s průhledností: rgba(255, 0, 0, 0.5)
• Hodnoty barev od 0 do 255
• Průhlednost se udává v rozmezí 0 – 1, zapisuje se tedy v desetinných místech
• Kombinace světla = čím více se hodnoty blíží k 255, tím je výsledná barva světlejší.

HEX

HEX je zkrácený zápis RGB barvy ve šestnáctkové soustavě. Vznikl hlavně pro webové použití, protože je kompaktní a každý trochu zkušený vývojář pozná #FF0000 jako červenou.

• Formát: #RRGGBB
• Pokud je potřeba průhlednost tak je formát: #RRGGBBAA
• Každá složka má 2 hexadecimální čísla (00 až FF, tedy 0 až 255)
• Např.: #00FF00 = čistě zelená

HSL

HSL (Hue, Saturation, Lightness) je barevný model, který popisuje barvy způsobem, který je člověku přirozenější než RGB. Hodí se třeba při navrhování grafiky, UI/UX či pro designery. Je intuitivní a umožňuje snadno tvořit různé varianty barev (tmavší, světlejší, vybledlé, syté)…

• Hue – odstín na barevném kruhu (0–360° – 0° = červená, 120° = zelená, 240° = modrá atd.).
• Saturation – jak moc je barva sytá (100% = plná barva, 0% = stupně šedi)
• Lightness – jak moc je barva světlá nebo tmavá (0% = černá, 50% = plná barva, 100% = bílá)

CMYK

CMYK (Cyan, Magenta, Yellow, blacK) je barevný model používaný hlavně v tisku. Oproti RGB, které vychází ze světla, CMYK vychází z pigmentů, které barvu odebírají (subtraktivní model). Tento barevný prostor se využívá především při tisku letáků, plakátů obalů atd. Zkrátka všude, kde se netiskne jen černobíle.

• Cyan, Magenta, Yellow – základní tiskové barvy
• K vytištění černé se používá extra kanál K (black), protože CMY nedá úplně sytou černou
• Hodnoty se zapisují v procentech: cmyk(0%, 0%, 100%, 0%)  = čistá žlutá
• Nevýhodou je, že z RGB do CMYK nelze barvy nikdy 1:1 převést. Některé barvy, které září na monitoru, prostě na papíře nikdy nebudou vypadat stejně.

Závěrem k převodům a barvám

Převod mezi modely není vždy 1:1. Např. RGB → CMYK je přibližný, protože monitor umí jiné barvy než tiskárna. Stejně tak HEX → HSL není přesný přepis, ale matematický výpočet. Proto se může stát, že dvě hodnoty v různých prostorech znamenají vizuálně trochu jinou barvu. Záleží na zařízení, profilu (např. sRGB) i způsobu interpretace.

Barevné modely nejsou jen různé způsoby zápisu – jsou to různé způsoby myšlení o barvě. Webaři řeší hlavně HEX a RGB, designéři HSL, a tiskaři nedají dopustit na CMYK. Každý barevný prostor má své místo a primární účel použití.