CodeKitHubCo je tento nástroj?
Výběr barvy proměňuje vizuální volbu — tento odstín modré, přesně tento pixel v logu — na číselné kódy, kterým software rozumí. Stejná barva má několik ekvivalentních zápisů: HEX (#3b82f6) dominuje v CSS a při předávání návrhů, RGB (59, 130, 246) odpovídá tomu, jak obrazovky a kód barvu reprezentují, a HSL (217°, 91%, 60%) popisuje odstín, sytost a jas způsobem, o kterém člověk umí logicky uvažovat.
Druhá polovina nástroje je kapátko z obrázku. Nahrajte screenshot, logo nebo fotku a klikněte na libovolný bod, abyste nasnímali barvu pod kurzorem — standardní způsob, jak zjistit "jaká je to přesně barva?". Tam, kde to prohlížeč podporuje, se použije nativní API EyeDropper se zvětšující lupou; v ostatních prohlížečích nástroj čte hodnotu pixelu z kopie obrázku na plátně. V obou případech probíhá zpracování lokálně: obrázek se nikdy nenahrává.
Proč ho používat?
- Tři formáty najednou: každá vybraná barva se zobrazí jako HEX, RGB a HSL současně, každá s tlačítkem pro kopírování jedním klikem — bez zvláštního kroku převodu.
- Výběr z obrázku: nahrajte jakýkoli obrázek a klikněte, čímž nasnímáte přesnou barvu daného pixelu — ideální pro extrakci barev značky z loga nebo shodu s barvou viděnou na screenshotu.
- Používá nativní EyeDropper prohlížeče s lupou, pokud je dostupný, a jinde přechází na přesné čtení pixelů z plátna.
- Živá náhledová dlaždice ukazuje aktuální barvu na první pohled, takže si výběr můžete ověřit před kopírováním.
- Zdarma, okamžité a plně lokální: barvy se počítají a obrázky čtou ve vašem prohlížeči — nic se nenahrává, neukládá ani neloguje.
Jak se používá
- Vyberte barvu pomocí barevného pole, nebo hodnotu vložte/upravte přímo.
- Pro snímání z obrázku nahrajte obrázek a klikněte na bod, jehož barvu chcete.
- Přečtěte si hodnoty HEX, RGB a HSL zobrazené spolu s živou náhledovou dlaždicí.
- Klikněte na tlačítko kopírovat u formátu, který potřebujete — HEX pro CSS, RGB nebo HSL pro kód.
Příklad
Vstup
Kliknutí na modrou oblast nahraného logaVýstup
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Všechny tři řádky popisují identickou barvu. HEX používejte ve stylopisech a návrhářských nástrojích, RGB tam, kde kód očekává hodnoty kanálů, a HSL, když chcete odvodit světlejší nebo tmavší varianty změnou pouze posledního čísla.
Který barevný formát pro jakou úlohu
Moderní CSS přijímá všechny tři formáty všude, kde je barva povolená, takže volba je otázkou workflow, ne kompatibility. Týmy obvykle standardizují HEX v design tokenech a při hledání variant pak používají HSL — změňte jas o 10–15 bodů, čímž získáte použitelný hover stav bez posunu odstínu.
| Formát | Příklad | Nejlepší pro |
|---|---|---|
| HEX | #3b82f6 | CSS, návrhářské nástroje, sdílení barev v chatu a specifikacích |
| RGB | rgb(59, 130, 246) | Kód manipulující kanály, kreslení na plátně, průhlednost přes rgba() |
| HSL | hsl(217, 91%, 60%) | Vytváření světlejších/tmavších/hover variant, stavba palet |
Od vybrané barvy k hotovému CSS
Snímání barvy bývá obvykle prvním krokem stylingu. Pokud potřebujete stejnou barvu v jiných zápisech — CMYK pro tisk nebo hodnotu OKLCH pro CSS s širokým gamutem — Konvertor barev pokračuje tam, kde tento výběr barvy končí.
Vybraná barva se často rovnou použije na vizuální efekt: Generátor Box Shadow přijímá hodnotu HEX pro realistické stíny a zaoblené karty vytvořené pomocí Generátoru Border Radius dokreslí výsledný vzhled.
→ Konvertor barev · Generátor box-shadow · Generátor border-radius
Časté dotazy
Jaký je rozdíl mezi HEX, RGB a HSL?
Jsou to tři zápisy stejného barevného modelu. HEX zabalí kanály červené, zelené a modré do šesti hexadecimálních číslic (#3b82f6) a je nejběžnější formou v CSS a návrhářských nástrojích. RGB uvádí stejné tři kanály jako desítková čísla od 0 do 255. HSL vyjadřuje barvu jako odstín (0–360°), sytost a jas — mnohem intuitivnější, když chcete "stejnou barvu, jen světlejší". Převod mezi nimi nikdy barvu nemění.
Jak funguje výběr barvy z obrázku?
Nahraný obrázek se vykreslí na neviditelné plátno ve vašem prohlížeči. Když kliknete, nástroj přečte hodnoty červené, zelené a modré u pixelu na přesně dané pozici a převede je na HEX, RGB a HSL. V prohlížečích podporujících API EyeDropper (Chrome a Edge na desktopu) se místo toho otevře nativní zvětšovací lupa, takže lze vybírat s přesností na pixel kdekoli na obrazovce.
Nahrává se můj obrázek někam?
Ne. Obrázek otevírá přímo váš prohlížeč a čte se lokálně z plátna; žádný soubor ani barevná data se nikdy neodesílají ani neukládají. Můžete stránku načíst, přejít do offline režimu a výběr barvy i kapátko z obrázku dál fungují — což je bezpečné pro nezveřejněné návrhy a interní screenshoty.
Proč vybraná barva přesně neodpovídá tomu, co vidím na obrazovce?
Dva časté důvody. Vyhlazování hran (anti-aliasing): pixely na okrajích textu a tvarů jsou smíchané s pozadím, takže kliknutí o pixel vedle vrátí přechodovou barvu — vzorkujte raději z plné střední části plochy. Správa barev: soubory JPG/PNG s neobvyklými barevnými profily se mohou na různých displejích vykreslovat mírně odlišně; nástroj vrací hodnotu pixelu tak, jak je uložená v souboru, což je hodnota, kterou pro návrhovou práci chcete.
Který formát zkopírovat pro CSS?
HEX je nejbezpečnější výchozí volba — přijímá ho každý prohlížeč i nástroj. HSL použijte, když plánujete vytvořit varianty pro hover nebo tmavý režim, protože úprava pouze složky jasu zachovává konzistentní odstín a sytost. RGB je užitečný hlavně tam, kde kód sestavuje barvy z číselných kanálů, nebo při přidávání průhlednosti, kde rgba(59, 130, 246, 0.5) čte lépe než osmiznakový HEX.