Výběr barvy
Vyberte libovolnou barvu z obrázku a okamžitě získejte kódy HEX, RGB, HSL, HSV a CMYK.
Nahrajte obrázek a vyberte barvu
Přetáhněte, vložte nebo vyberte — PNG, JPG, WEBP nebo GIF
Tip: obrázek můžete také vložit pomocí Ctrl/Cmd + V
Kódy barvy
Nejbližší název barvy: Royal Blue
Barevné harmonie
Kontrola kontrastu (WCAG)
Ukázkový text
Uložené barvy
Zatím žádné uložené barvy — vyberte barvu a klepněte na „Uložit barvu“.
Výběr barvy (color picker) je nástroj, který vám umožní z libovolného obrázku, fotografie nebo grafiky vybrat konkrétní barvu a okamžitě zjistit její přesnou hodnotu v různých barevných modelech. Stačí nahrát obrázek, kliknout pipetou na požadovaný pixel a hned uvidíte kódy HEX, RGB, HSL, HSV i CMYK. Výběr barvy se hodí při webdesignu, front-endovém vývoji, přípravě tiskovin i při zajišťování přístupnosti, kde je nutné hlídat dostatečný kontrast textu vůči pozadí.
Tento nástroj je zcela zdarma a běží celý ve vašem prohlížeči — obrázky se nikam neodesílají, takže vaše soubory zůstávají soukromé. Kromě odečtu hodnot HEX, RGB, HSL, HSV a CMYK dokáže z obrázku automaticky extrahovat celou paletu barev, vygenerovat barevné harmonie (komplementární, analogické, triadické a další) a zkontrolovat kontrastní poměr podle standardu WCAG. Výslednou paletu si můžete uložit a exportovat do CSS, JSON nebo PNG.
Jak vybrat barvu z obrázku
- 1
Nahrajte nebo přetáhněte obrázek
Vyberte soubor ze zařízení, přetáhněte jej do okna nástroje, nebo obrázek jednoduše vložte pomocí Ctrl/Cmd + V. Podporovány jsou formáty PNG, JPG, WEBP i GIF.
- 2
Klikněte pipetou na pixel
Najeďte kurzorem nad obrázek a klikněte na místo, jehož barvu chcete zjistit. Pro přesné zacílení použijte zvětšení, které vám ukáže konkrétní pixel pod kurzorem.
- 3
Přečtěte a zkopírujte barevné kódy
V panelu s hodnotami se okamžitě zobrazí kódy HEX, RGB, HSL, HSV a CMYK. Jedním kliknutím kterýkoli z nich zkopírujete do schránky a vložíte do CSS, návrhového nástroje nebo dokumentu.
- 4
Extrahujte paletu z obrázku
Nechte nástroj automaticky vytáhnout nejvýraznější barvy z celého obrázku. Získáte tak ucelenou paletu, která přesně odpovídá dané fotografii nebo grafice.
- 5
Vygenerujte barevné harmonie
Z vybrané barvy si nechte vytvořit komplementární, analogické, triadické, tetradické, dělené komplementární nebo monochromatické harmonie a rychle najděte ladící kombinace.
- 6
Zkontrolujte kontrast a uložte paletu
Ověřte si kontrastní poměr textu vůči pozadí podle standardu WCAG (AA i AAA), uložte si oblíbené barvy a celou paletu exportujte do CSS, JSON nebo PNG.
HEX, RGB, HSL, HSV a CMYK vysvětleny
Stejnou barvu lze zapsat několika způsoby a každý z modelů se hodí do jiné situace. HEX a RGB se používají na obrazovkách a webu, HSL a HSV usnadňují intuitivní úpravy odstínu a jasu, zatímco CMYK je určen pro tisk. Níže najdete přehled jednotlivých modelů s příkladem zápisu a typickým využitím.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web a CSS |
| RGB | rgb(59, 130, 246) | Obrazovky a displeje |
| HSL | hsl(217, 91%, 60%) | Intuitivní úpravy barvy |
| HSV | hsv(217, 76%, 96%) | Návrhové a designové nástroje |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Tisk |
Webový a UI design
Vytvořte konzistentní barevnou paletu pro web nebo aplikaci. Vyberte barvy z inspiračního obrázku nebo screenshotu, vygenerujte ladící harmonie a sestavte tak jednotný vizuální styl pro tlačítka, pozadí, texty i akcenty.
Front-endový vývoj
Získejte přesné kódy HEX a RGB připravené k vložení přímo do CSS. Barvy si můžete uložit a exportovat jako proměnné CSS (custom properties), takže je snadno použijete v celém projektu a udržíte design systém pod kontrolou.
Tisk a branding
Připravujete letáky, vizitky nebo firemní materiály? Odečtěte hodnoty CMYK, které jsou určené pro tiskárny, a zajistěte tak, aby barvy loga i vizuálního stylu vypadaly na papíře stejně jako na obrazovce.
Přístupnost
Ověřte, že text je čitelný pro všechny uživatele. Nástroj spočítá kontrastní poměr mezi textem a pozadím a ukáže, zda barvy splňují úrovně AA a AAA podle standardu WCAG — klíčové pro přístupný a bezbariérový web.
Porovnání
Jak si náš výběr barvy stojí ve srovnání s běžnými nástroji, jako je imagecolorpicker.com? Kromě základního odečtu barvy z obrázku nabízíme navíc více barevných modelů, hodnoty CMYK pro tisk, kontrolu kontrastu WCAG i generování barevných harmonií — a to bez rušivých reklam.
| Barevné modely | HEX, RGB, HSL, HSV i CMYK | Většinou jen HEX a RGB |
| CMYK pro tisk | Ano | Obvykle ne |
| Kontrola kontrastu WCAG | Ano (AA i AAA) | Ne |
| Barevné harmonie | Ano, 6 typů | Omezené nebo žádné |
| Reklamy | Žádné | Časté reklamy |
Časté dotazy
Jak vybrat barvu z obrázku?
Nahrajte obrázek do nástroje, klikněte pipetou na místo, jehož barvu chcete zjistit, a okamžitě se vám zobrazí její kódy HEX, RGB, HSL, HSV a CMYK. Kterýkoli z kódů pak jedním kliknutím zkopírujete do schránky.
Co je kód barvy HEX?
HEX je šestimístný kód začínající znakem #, například #3B82F6, který v šestnáctkové soustavě zapisuje množství červené, zelené a modré složky. Používá se hlavně na webu a v CSS, protože je krátký a jednoznačně určuje konkrétní barvu.
Jak převést RGB na HEX?
Náš nástroj převod provede automaticky — jakmile vyberete barvu, uvidíte vedle sebe hodnoty RGB i odpovídající kód HEX. Nemusíte tak nic ručně přepočítávat, stačí zkopírovat formát, který zrovna potřebujete.
Jak vytvořit paletu z fotografie?
Nahrajte fotografii a použijte funkci extrakce palety. Nástroj z obrázku automaticky vybere nejvýraznější barvy a sestaví z nich ucelenou paletu, kterou si můžete uložit a exportovat do CSS, JSON nebo PNG.
Jak zkontrolovat kontrast barev kvůli přístupnosti?
Zvolte barvu textu a barvu pozadí v kontrole kontrastu. Nástroj vypočítá kontrastní poměr a ukáže, zda kombinace splňuje úrovně AA a AAA podle standardu WCAG, takže snadno zajistíte čitelnost pro všechny uživatele.
Je nástroj zdarma a jsou moje obrázky v soukromí?
Ano, výběr barvy je zcela zdarma a bez registrace. Veškeré zpracování probíhá přímo ve vašem prohlížeči — obrázky se nenahrávají na žádný server, takže vaše soubory zůstávají plně soukromé.
