Generátor farebných zosvetlení
Vytvárajte svetlejšie verzie farby jej rovnomerným miešaním s bielou. Zadajte jednu farbu v ľubovoľnom formáte CSS, vyberte 2 až 20 krokov a priestor miešania. Získate tabuľku s hodnotami HEX, RGB, HSL a OKLCH pre každé zosvetlenie, počnúc pôvodnou farbou. Miešanie v sRGB zodpovedá klasickým nástrojom na zosvetľovanie farieb a Sass, zatiaľ čo OKLab vytvára rovnomerné kroky z hľadiska vnímania. Ideálne pre pozadia, stavy pri podržaní kurzora a škály.
Často kladené otázky
Čo je zosvetlenie?
Zosvetlenie je farba zmiešaná s bielou. Zachováva si svoj farebný tón a stáva sa svetlejšou a bledšou, na rozdiel od odtieňa, ktorý sa mieša s čiernou, alebo tónovania, pri ktorom sa mieša so sivou.
Ako sú kroky rozložené?
Pri N krokoch sa v riadku k zmieša farba s podielom bielej (k - 1) / N. Pri 10 krokoch teda získate 0 %, 10 %, 20 % a tak ďalej až po 90 %. Prvý riadok vždy obsahuje pôvodnú farbu a čistá biela v zozname nikdy nie je.
Aký je rozdiel medzi miešaním v sRGB a OKLab?
Pri miešaní v sRGB sa spriemerujú hodnoty kanálov s gama kódovaním, čo robia aj Sass mix() s bielou a väčšina klasických generátorov zosvetlenia. Miešanie v OKLab prebieha v percepčnom priestore, takže kroky svetlosti vyzerajú rovnomernejšie a svetlé farby sa nevyblednú tak rýchlo.
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 zosvetlení môžem vytvoriť?
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 podiel bielej, 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?
Priehľadnosť vstupu sa zachová pri každom zosvetlení, pretože biela sa primiešava s rovnakou úrovňou priehľadnosti. Hexadecimálne kódy potom majú 8 číslic a funkcie CSS končia hodnotou priehľadnosti za lomkou.
Čo sa stane s farbami mimo sRGB?
Pri miešaní sa používa celá farba, ale HEX, RGB a HSL dokážu zobraziť iba sRGB, preto sa v týchto stĺpcoch farby mimo gamutu prevedú do sRGB pomocou algoritmu CSS Color 4. Stĺpec OKLCH zachováva hodnotu bez tohto prevodu.
Ako môžem použiť zosvetlenia v CSS?
Skopírujte hodnoty hexadecimálnych kódov alebo oklch() do vlastných vlastností, napríklad --brand-100 a --brand-200. Ak chcete miešať farby priamo v prehliadači, color-mix(in oklab, var(--brand) 80%, white) vytvorí rovnaké 20 % zosvetlenie ako nastavenie OKLab.
Môžem na svetlom zosvetlení použiť biely text?
Zvyčajne nie, pretože svetlé farby majú voči bielej nízky kontrast. Na svetlých farbách používajte tmavý text a každý pár skontrolujte nástrojom na kontrolu kontrastu; bežný text potrebuje na splnenie WCAG AA aspoň 4.5:1.