Generátor odtieňov a tieňov
21 farby
#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é podrobnosti
Ako funguje generátor odtieňov a tieňov
Čo nástroj robí
Generátor odtieňov a tieňov vytvára svetlejšie odtiene (zmiešané s bielou) a tmavšie tiene (zmiešané s čiernou) z ľubovoľnej základnej farby. Zadajte farbu a vyberte počet krokov na vygenerovanie plynulého prechodu variácií. Každý krok zobrazuje hodnoty HEX, RGB a percento miešania, vďaka čomu je jednoduché vytvárať konzistentné farebné škály pre dizajn UI, branding a dátovú vizualizáciu.
Bežné prípady použitia pre vývojárov
Vývojári používajú generátory odtieňov a tieňov pri tvorbe škál dizajnových tokenov (napr. blue-100 až blue-900), vytváraní stavov hover a active pre interaktívne prvky, navrhovaní prístupných farebných hierarchií a tvorbe konzistentných farieb pozadí a povrchov pre svetlé a tmavé témy. Nástroj je nevyhnutný pri tvorbe vlastných farebných paliet pre Tailwind CSS alebo farebných systémov Material Design.
Ako fungujú odtiene a tiene
Odtieň vzniká zmiešaním farby s bielou, čím sa zvýši jej svetlosť. Tieň vzniká zmiešaním s čiernou, čím sa svetlosť zníži. Vzorec pre odtiene je: new = base + (255 - base) × factor. Pre tiene: new = base × (1 - factor). Kroky sú rovnomerne rozložené medzi základnou farbou a čistou bielou (odtiene) alebo čistou čiernou (tiene), čím vzniká lineárny gradient farebných hodnôt.
Bežné úskalia a okrajové prípady
Lineárne miešanie s bielou alebo čiernou môže pri niektorých odtieňoch vytvárať vyblednuté odtiene alebo „zablatené“ tiene. Žlté môžu pri stmavovaní pôsobiť nazelenalo a modré môžu pri zosvetľovaní strácať živosť. Pre perceptuálne rovnomerné škály zvážte použitie farebných priestorov OKLCH alebo CIELAB. Vždy overte, že vaše najsvetlejšie odtiene a najtmavšie tiene si zachovávajú dostatočný kontrast voči zamýšľaným pozadiam.
Kedy použiť tento nástroj vs. kód
Tento nástroj v prehliadači používajte na rýchle skúmanie a generovanie farebných škál počas dizajnérskej práce. Pre produkčné dizajnové systémy generujte odtiene a tiene programovo pomocou farebných knižníc ako chroma.js alebo culori, ktoré podporujú perceptuálne rovnomerné farebné priestory a dokážu exportovať dizajnové tokeny v ľubovoľnom formáte.