Generátor odstínů a stínů
21 barvy
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)Technické detaily
Jak funguje generátor odstínů a tónů
Co nástroj dělá
Generátor odstínů a tónů vytváří světlejší odstíny (přimícháním bílé) a tmavší tóny (přimícháním černé) z libovolné základní barvy. Zadejte barvu a zvolte počet kroků pro vygenerování plynulého přechodu variant. Každý krok zobrazuje hodnoty HEX, RGB a procento míchání, takže je snadné vytvářet konzistentní barevné škály pro UI design, branding a datovou vizualizaci.
Běžné případy použití pro vývojáře
Vývojáři používají generátory odstínů a tónů při tvorbě škál design tokenů (např. blue-100 až blue-900), vytváření stavů hover a active pro interaktivní prvky, navrhování přístupných barevných hierarchií a vytváření konzistentních barev pozadí a povrchů pro světlá i tmavá témata. Nástroj je zásadní pro tvorbu vlastních barevných palet v Tailwind CSS nebo barevných systémů Material Design.
Jak fungují odstíny a tóny
Odstín vzniká smícháním barvy s bílou, čímž se zvýší její světlost. Tón vzniká smícháním s černou, čímž se světlost sníží. Vzorec pro odstíny je: new = base + (255 - base) × factor. Pro tóny: new = base × (1 - factor). Kroky jsou rovnoměrně rozdělené mezi základní barvu a čistě bílou (odstíny) nebo čistě černou (tóny), čímž vzniká lineární gradient barevných hodnot.
Běžné nástrahy a okrajové případy
Lineární míchání s bílou nebo černou může u některých odstínů vytvářet vybledlé odstíny nebo kalné tóny. Žluté mohou při ztmavení působit nazelenale a modré mohou při zesvětlení ztrácet živost. Pro perceptuálně rovnoměrné škály zvažte použití barevných prostorů OKLCH nebo CIELAB. Vždy ověřte, že vaše nejsvětlejší odstíny a nejtmavší tóny zachovávají dostatečný kontrast vůči zamýšleným pozadím.
Kdy použít tento nástroj vs. kód
Tento nástroj v prohlížeči použijte pro rychlé zkoumání a generování barevných škál během designové práce. Pro produkční design systémy generujte odstíny a tóny programově pomocí barevných knihoven jako chroma.js nebo culori, které podporují perceptuálně rovnoměrné barevné prostory a umí exportovat design tokeny v libovolném formátu.