CodeKitHubČo je tento nástroj?
Výber farby premieňa vizuálnu voľbu — tento odtieň modrej, presne ten pixel v logu — na číselné kódy, ktorým rozumie softvér. Tá istá farba má viacero rovnocenných zápisov: HEX (#3b82f6) dominuje v CSS a pri odovzdávaní dizajnov, RGB (59, 130, 246) zodpovedá tomu, ako obrazovky a kód reprezentujú farbu, a HSL (217°, 91 %, 60 %) opisuje odtieň, sýtosť a jas spôsobom, s ktorým dokážu ľudia lepšie uvažovať.
Druhou polovicou nástroja je kvapkadlo pre obrázky. Nahrajte snímku obrazovky, logo alebo fotku a kliknutím na ľubovoľný bod odoberte farbu pod kurzorom — štandardný spôsob, ako odpovedať na otázku „aká presná farba je toto?“. Tam, kde to prehliadač podporuje, sa použije natívna lupa API EyeDropper; v iných prehliadačoch nástroj číta hodnotu pixelu z kópie obrázka na canvase. V oboch prípadoch je spracovanie lokálne: obrázok sa nikdy nenahráva.
Prečo ho používať?
- Tri formáty naraz: každá vybraná farba sa zobrazí ako HEX, RGB a HSL súčasne, každý s tlačidlom na kopírovanie jedným kliknutím — bez samostatného kroku prevodu.
- Výber z obrázka: nahrajte ľubovoľný obrázok a kliknutím odoberte presnú farbu pixelu — ideálne na extrakciu firemných farieb z loga alebo zhodu farby zo snímky obrazovky.
- Používa natívne kvapkadlo prehliadača s lupou, ak je k dispozícii, a inak sa spolieha na presné čítanie pixelov z canvasu.
- Živá vzorka náhľadu zobrazuje aktuálnu farbu na prvý pohľad, takže si výber môžete overiť pred kopírovaním.
- Zadarmo, okamžite a úplne lokálne: farby sa počítajú a obrázky čítajú vo vašom prehliadači — nič sa nenahráva, neukladá ani nezaznamenáva.
Ako sa používa
- Vyberte farbu pomocou poľa farby alebo vložte/upravte hodnotu priamo.
- Ak chcete odobrať farbu z obrázka, nahrajte ho a kliknite na bod, ktorého farbu chcete.
- Prečítajte si hodnoty HEX, RGB a HSL zobrazené spolu so vzorkou náhľadu naživo.
- Kliknite na tlačidlo kopírovania vedľa formátu, ktorý potrebujete — HEX pre CSS, RGB alebo HSL pre kód.
Príklad
Vstup
Kliknutie na modrú oblasť nahraného logaVýstup
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Všetky tri riadky opisujú identickú farbu. Použite HEX v štýlopisoch a dizajnérskych nástrojoch, RGB tam, kde kód očakáva hodnoty kanálov, a HSL, keď chcete odvodiť svetlejšie alebo tmavšie varianty zmenou len posledného čísla.
Ktorý formát farby na akú prácu
Moderné CSS prijíma všetky tri formáty všade, kde je farba povolená, takže výber závisí od pracovného postupu, nie od kompatibility. Tímy zvyčajne štandardizujú HEX v dizajnových tokenoch a potom pri skúšaní variácií používajú HSL — zmenou jasu o 10–15 bodov získate použiteľný hover stav bez posunutia odtieňa.
| Formát | Príklad | Najlepšie na |
|---|---|---|
| HEX | #3b82f6 | CSS, dizajnérske nástroje, zdieľanie farieb v chate a špecifikáciách |
| RGB | rgb(59, 130, 246) | Kód manipulujúci s kanálmi, kreslenie na canvas, priehľadnosť cez rgba() |
| HSL | hsl(217, 91%, 60%) | Tvorba svetlejších/tmavších/hover variantov, budovanie paliet |
Od vybranej farby k hotovému CSS
Odber farby je zvyčajne prvým krokom úlohy štylizovania. Ak potrebujete tú istú farbu v iných zápisoch — CMYK pre tlač alebo hodnotu OKLCH pre CSS so širokým gamutom — Prevodník farieb pokračuje tam, kde tento výber končí.
Vybraná farba často putuje priamo do vizuálneho efektu: Generátor tieňov boxu prijíma hodnotu HEX pre realistické tiene a zaoblené karty vytvorené pomocou Generátora zaoblenia rohov dotvoria vzhľad.
→ Prevodník farieb · Generátor box-shadow · Generátor border-radius
Časté otázky
Aký je rozdiel medzi HEX, RGB a HSL?
Ide o tri zápisy toho istého farebného modelu. HEX pakuje kanály červenej, zelenej a modrej do šiestich šestnástkových číslic (#3b82f6) a je najbežnejším tvarom v CSS a dizajnérskych nástrojoch. RGB uvádza tie isté tri kanály ako desiatkové čísla od 0 do 255. HSL vyjadruje farbu ako odtieň (0–360°), sýtosť a jas — oveľa intuitívnejšie, keď chcete „tú istú farbu, len svetlejšiu“. Prevod medzi nimi farbu nikdy nemení.
Ako funguje výber farby z obrázka?
Nahraný obrázok sa vykreslí na neviditeľný canvas vo vašom prehliadači. Pri kliknutí nástroj prečíta hodnoty červenej, zelenej a modrej pixelu na danej presnej pozícii a prevedie ich na HEX, RGB a HSL. V prehliadačoch podporujúcich API EyeDropper (Chrome a Edge na počítači) sa namiesto toho otvorí natívna zväčšovacia lupa, aby ste mohli vyberať s presnosťou na pixel kdekoľvek na obrazovke.
Nahráva sa môj obrázok niekam?
Nie. Obrázok otvára priamo váš prehliadač a číta sa lokálne z canvasu; žiadny súbor ani farebné dáta sa nikdy neprenášajú ani neukladajú. Môžete si stránku načítať, prejsť do offline režimu a výber aj kvapkadlo z obrázka budú fungovať ďalej — čo ho robí bezpečným aj pre nezverejnené návrhy a interné snímky obrazovky.
Prečo sa vybraná farba presne nezhoduje s tým, čo vidím na obrazovke?
Dva bežné dôvody. Vyhladzovanie hrán (anti-aliasing): pixely na okrajoch textu a tvarov sú zmiešané s pozadím, takže kliknutie o jeden pixel vedľa dá medzihodnotu — namiesto toho odoberajte vzorku z plnej strednej časti oblasti. Správa farieb: súbory JPG/PNG s nezvyčajnými farebnými profilmi sa môžu na rôznych obrazovkách zobrazovať mierne odlišne; nástroj uvádza hodnotu pixelu tak, ako je uložená v súbore, čo je hodnota, ktorú chcete pre dizajnérsku prácu.
Ktorý formát mám kopírovať pre CSS?
HEX je najbezpečnejšia predvoľba — prijíma ho každý prehliadač a nástroj. HSL použite, ak plánujete vytvárať varianty pre hover alebo tmavý režim, pretože úprava len zložky jasu zachová odtieň a sýtosť konzistentné. RGB je užitočný najmä vtedy, keď kód zostavuje farby z číselných kanálov, alebo pri pridávaní priehľadnosti, kde rgba(59, 130, 246, 0.5) pôsobí čitateľnejšie než osemmiestny HEX.