Generátor farebných tónov
Generujte odtiene farby jej miešaním s neutrálnou sivou v rovnomerných krokoch, čím znížite sýtosť a zachováte odtieň. Zadajte jednu farbu v ľubovoľnom formáte CSS, vyberte 2 až 20 krokov a priestor miešania. Zobrazí sa tabuľka hodnôt HEX, RGB, HSL a OKLCH pre každý odtieň, počnúc pôvodnou farbou. Užitočné pri tvorbe tlmených paliet, neaktívnych stavov, jemných plôch a pokojnejších variantov značky.
Často kladené otázky
Čo je tón?
Tón je farba zmiešaná so sivou. Zachová si svoj odtieň a stane sa tlmenejšou, na rozdiel od zosvetleného odtieňa, ktorý sa mieša s bielou, alebo stmaveného odtieňa, ktorý sa mieša s čiernou.
Aká sivá sa používa?
Stredná sivá sRGB #808080, rgb(128 128 128). Svetlé farby preto pri približovaní k nej mierne stmavnú a tmavé mierne zosvetlia. Ak chcete miešať s inou sivou, použite miešač farieb a zadajte vlastnú sivú.
Ako sú kroky rozložené?
Pri N krokoch sa v riadku k farba mieša so sivou v pomere (k - 1) / N, takže pri 10 krokoch získate 0 %, 10 %, 20 % a tak ďalej až po 90 %. Prvý riadok vždy obsahuje pôvodnú farbu a čistá sivá sa v zozname nikdy nenachádza.
Ako sa tón líši od zníženia sýtosti HSL?
Zníženie sýtosti HSL zachováva svetlosť HSL, zatiaľ čo miešanie so sivou zároveň posúva svetlosť smerom k strednej hodnote. Tóny preto vyzerajú, akoby ste sa na farbu pozerali cez sivý filter, čo sa hodí na tlmené pozadia a neaktívne stavy.
Aký je rozdiel medzi miešaním v sRGB a OKLab?
Miešanie v sRGB spriemeruje hodnoty kanálov kódované gama korekciou, čo je klasický prístup pri maľovaných tónových škálach a Sass mix(). Miešanie v OKLab prebieha v percepčnom priestore, takže sýtosť klesá rovnomernejšie pri každom kroku.
Ktoré vstupné formáty môžem použiť?
Hexadecimálne kódy s # alebo bez neho, CSS názvy farieb, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() a cmyk(). Pri každom spustení zadajte jednu farbu.
Koľko tónov môžem vygenerovať?
Od 2 do 20 pri jednom spustení, predvolene 10. Počet zahŕňa pôvodnú farbu v prvom riadku.
Ktoré hodnoty zobrazuje tabuľka?
Pre každý krok sa zobrazí podiel sivej, hexadecimálny kód, rgb(), hsl() a oklch() v modernej syntaxi CSS. Kanály RGB sú celé čísla, percentá HSL majú najviac dve desatinné miesta a svetlosť a sýtosť OKLCH najviac štyri.
Čo sa stane s priehľadnými farbami a farbami so širokým farebným rozsahom?
Vstupná alfa hodnota sa zachová pre každý tón, takže hexadecimálne kódy majú 8 číslic. Kroky mimo rozsahu farieb sa v stĺpcoch HEX, RGB a HSL prevedú do sRGB algoritmom CSS Color 4, zatiaľ čo stĺpec OKLCH zachováva hodnotu bez prevodu.
Ako vytvorím rovnaký tón v CSS?
Skopírujte hexadecimálnu hodnotu alebo hodnotu oklch(), prípadne nechajte prehliadač namiešať 30 % tón v nastavení OKLab pomocou color-mix(in oklab, var(--brand) 70%, #808080). color-mix() funguje vo všetkých aktuálnych hlavných prehliadačoch.