Color Picker

Vyberte barvy a pracujte bez zbytečných komplikací

Color Picker jsme vytvořili v roce 2025, protože nás unavovaly těžkopádné aplikace a složité nástroje pro barvy. Jako front-end vývojáři a ilustrátoři jsme potřebovali něco, čím barvu rychle vezmeme, doladíme a jdeme dál. Z interní pomůcky se rychle stal oblíbený nástroj kolegů, tak jsme ho vyladili a dali na web pro všechny. Bez účtů, bez křivky učení – stačí otevřít stránku, vybrat odstín a zkopírovat kódy HEX, RGB, HSL nebo HSV.

Proč mají lidé náš Color Picker rádi?

Pokud jste někdy zírali na design a přemýšleli, jak trefit ten správný odstín, oceníte jednoduchost Color Pickeru. Rozhraní jsme záměrně udrželi minimalistické:

• Kliknete a máte barvu – klepněte kamkoli do palety a nástroj hned vypíše přesné hodnoty. Chcete vzorek z fotky nebo screenshotu? Přetáhněte ho na stránku a použijte kapátko.
• Přechody snadno – vytvářejte hedvábně plynulé přechody přidáváním a posouváním zarážek na liště. Přepínejte mezi lineárním a radiálním, dolaďte úhel a průhlednost a zkopírujte CSS.
• Bez limitů, bez poplatků – Color Picker běží v každém moderním prohlížeči na počítači, tabletu i telefonu. Není co instalovat a nic nestojí.
• Rozšíření, když je potřebujete – naše volitelná rozšíření pro Chrome a Edge přinesou kapátko přímo do prohlížeče, takže můžete brát barvy z libovolné stránky a mít historii po ruce.

K čemu se hodí

Různí lidé používají Color Picker různými způsoby:

• Designéři a produktové týmy po něm sahají při náčrtcích rozhraní nebo brandových palet. Je rychlé zkoumat kombinace a kopírovat potřebné CSS pro přechody.
• Ilustrátoři a umělci používají kapátko k inspiraci barvami z fotografií a maleb. Nástroj přechodů pomáhá plánovat plynulé stínování a barevné přechody.
• Front-end vývojáři se na něj spoléhají při generování konzistentních barevných hodnot napříč projekty. Rozšíření usnadňuje snímání barev z existujících webů.
• Kdokoli, kdo řeší přístupnost si může prohlížet barvy v různých modelech a upravovat průhlednost, aby splnily zásady kontrastu.

Začínáme

Návod nepotřebujete, ale tady je stručný přehled:

• Vyberte barvu – klikněte kamkoli do palety. Hned uvidíte hodnoty HEX, RGB a HSV. Pomocí posuvníků dolaďte odstín, sytost, jas a průhlednost.
• Vzorkujte z obrázku – přetáhněte soubor na stránku nebo ho vyberte. Klikněte na požadovaný pixel a zobrazí se barevné kódy.
• Vytvořte přechod – kliknutím do lišty přechodu přidejte zarážky a tažením je posouvejte; přepínejte mezi lineárním a radiálním stylem. Upravte úhel a průhlednost, dokud nebudete spokojeni.
• Kopírujte a znovu použijte – vaše barvy a přechody se ukládají automaticky. Zkopírujte kódy nebo CSS a vložte je do projektu, případně je sdílejte s týmem.