Výběr barev (HEX, RGB, HSL, OKLCH)
Vyberte barvu na čtverci sytosti a jasu nebo zadejte HEX, RGB, HSL či OKLCH. Všechny formáty zůstanou synchronní, se stupnicí tint/shade, kapátkem (Chromium) a exportem palet do CSS a JSON.
Jak vybrat a exportovat barvy
1. Táhněte po čtverci a posuvníku odstínu, nebo vložte HEX/RGB/HSL/OKLCH.
2. Čtěte synchronizované HEX, RGB, HSL a OKLCH v liště.
3. Klikněte na odstín nebo vzorek harmonie a prozkoumejte příbuzné barvy.
4. Zkopírujte hodnotu, odkaz ?hex= nebo exportujte CSS proměnné / JSON.
Příklady výběru barev
Značková terracotta #8F665E
HSV výběr drží odstín, když barvu ztmavíte pro hover. Exportujte --color a --shade-* jako CSS proměnné.
Analogická paleta dashboardu
Zvolte Analogická pro odstíny ±30° a ±60°. Zkopírujte pruh jako custom properties pro karty a grafy.
OKLCH pro rovnoměrné kroky
Rampa mění světlost OKLCH, rovnoměrněji než míchat HEX s bílou. Použijte oklch() v moderním CSS.
Kdy tento nástroj použít
• Když vybíráte barvy UI a potřebujete HEX, RGB, HSL i OKLCH najednou.
• Když z jednoho značkového odstínu tvoříte hover/muted stupně.
• Když exportujete malou paletu (harmonie + rampa) do CSS proměnných.
Harmonie pro palety UI
Doplňkové barvy leží 180° od sebe — silný kontrast, na CTA střídmě. Analogické (±30–60°) sjednotí dashboard. Triády a tetrády dají víc rozmanitosti; snižte sytost doplňků, ať primary vede. Text ověřte v testeru kontrastu WCAG.
Časté dotazy
HEX vs RGB vs HSL vs OKLCH?
HEX a RGB jsou stejná sRGB barva. HSL se hodí na odstín a světlost. OKLCH je percepční: podobné kroky L působí rovnoměrněji a oklch() je platné moderní CSS.
Funguje kapátko v každém prohlížeči?
API EyeDropper je v Chromiu (Chrome, Edge). Jinde zadejte hodnotu nebo použijte vizuální výběr.
Mohu barvu sdílet?
Ano. URL se aktualizuje o ?hex=RRGGBB. Zkopírujte odkaz a otevřete stejnou barvu.
Jdou barvy na server?
Ne. Převod, harmonie a export běží lokálně v prohlížeči.