Színtónus-generátor
Árnyalatokat hozhat létre úgy, hogy egy színt egyenletes lépésekben semleges szürkével kever, így csökkenti a telítettséget, miközben megőrzi a színárnyalatot. Adjon meg egy színt bármilyen CSS formátumban, válasszon 2–20 lépést és egy keverési színteret, majd kap egy táblázatot, amely minden árnyalathoz HEX, RGB, HSL és OKLCH értéket tartalmaz, az eredeti színtől kezdve. Hasznos visszafogott palettákhoz, letiltott állapotokhoz, finom felületekhez és nyugodtabb márkaváltozatokhoz.
Gyakran ismételt kérdések
Mi az a tónus?
A tónus szürkével kevert szín. Megőrzi a színárnyalatát, miközben visszafogottabbá válik; ezzel szemben az árnyalat fehérrel, a színváltozat pedig feketével keverve készül.
Milyen szürkét használ?
Az sRGB középszürkét használja: #808080, rgb(128 128 128). Ezért a világos színek kissé sötétebbé, a sötétek pedig kissé világosabbá válnak, ahogy közelednek hozzá; ha másik szürkével szeretne keverni, használja a Színkeverőt a saját szürkéjével.
Hogyan oszlanak el a lépések?
N lépés esetén a k. sorban a szín a szürke (k - 1) / N arányával keveredik, így 10 lépésnél 0%, 10%, 20% és így tovább, egészen 90%-ig. Az első sor mindig az eredeti szín, a tiszta szürke pedig soha nem szerepel a listában.
Miben különbözik a tónus a HSL telítettség csökkentésétől?
A HSL telítettség csökkentése megőrzi a HSL világosságot, míg a szürkével való keverés a világosságot is a középérték felé húzza. A tónusok ezért úgy hatnak, mintha a színt szürke szűrőn át néznénk; így jól illenek visszafogott hátterekhez és letiltott állapotokhoz.
Mi a különbség az sRGB- és az OKLab-keverés között?
Az sRGB-keverés a gamma-kódolt csatornaértékek átlagát veszi, ahogy a festékszerű tónustáblázatoknál és a Sass mix() esetében szokásos. Az OKLab-keverés perceptuális színtérben történik, ezért a színtelítettség lépésről lépésre egyenletesebben csökken.
Milyen bemeneti formátumokat használhatok?
Hex kódok #-szel vagy anélkül, CSS színnevek, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() és cmyk(). Futtatásonként egy színt adjon meg.
Hány tónust hozhatok létre?
Futtatásonként 2 és 20 között, alapértelmezés szerint 10-et. A darabszám az első sorban szereplő eredeti színt is tartalmazza.
Milyen értékeket jelenít meg a táblázat?
Minden lépésnél megjelenik a szürke aránya, a hex kód, a rgb(), a hsl() és a oklch() érték modern CSS szintaxissal. A RGB csatornák egész számok, a HSL százalékos értékek legfeljebb két tizedesjegyet kapnak, az OKLCH világossági és színtelítettségi értékei pedig legfeljebb négyet.
Mi történik az átlátszó és a széles színtartományú színekkel?
A bemeneti alfa minden tónusnál megmarad, ezért a hex kódok 8 számjegyűek lesznek. A színtartományon kívüli lépéseket a CSS Color 4 algoritmus az sRGB színtérbe képezi le a HEX, RGB és HSL oszlopokban, míg az OKLCH oszlop a le nem képezett értéket mutatja.
Hogyan állíthatok elő újra egy tónust CSS használatával?
Másolja ki a hex vagy oklch() értéket, vagy hagyja, hogy a böngésző a color-mix(in oklab, var(--brand) 70%, #808080) kifejezéssel keverje ki az OKLab beállítás 30%-os tónusát. A color-mix() minden jelenlegi fő böngészőben működik.