Színárnyalat-generátor
Sötétebb árnyalatokat hozhat létre egy színből úgy, hogy egyenletes lépésekben feketével keveri. 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 az eredeti színtől kezdve minden árnyalathoz tartalmazza a HEX-, RGB-, HSL- és OKLCH-értékeket. Az sRGB-keverés a klasszikus árnyalatgenerátorok és a Sass működését követi, míg az OKLab érzékelés szempontjából egyenletes lépéseket ad. Ideális UI színskálák készítéséhez.
Gyakran ismételt kérdések
Mi az a színárnyalat?
Az árnyalat feketével kevert szín. Megőrzi a színárnyalatát, miközben sötétebbé válik; ezzel szemben a tónus fehérrel, a színtónus pedig szürkével kevert szín.
Hogyan oszlanak el a lépések?
N lépés esetén a k. sorban a szín és (k - 1) / N rész fekete 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ínt tartalmazza, tiszta fekete pedig nem szerepel a listában.
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, ahogyan azt a Sass mix() feketével és a legtöbb klasszikus árnyalatgenerátor is teszi. Az OKLab-keverés érzékelési térben történik, ezért a lépések világossága egyenletesebbnek tűnik, a sötétebb árnyalatok pedig jobban megőrzik a színüket.
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 árnyalatot generálhatok?
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 a fekete arányát, a hex kódot, a rgb(), a hsl() és a oklch() értékeket modern CSS szintaxissal. A RGB csatornaértékei egész számok, a HSL százalékos értékei legfeljebb két tizedesjegyet tartalmaznak, az OKLCH világossága és színtelítettsége pedig legfeljebb négyet.
Mi történik az átlátszó színekkel?
A bemeneti szín alfaértéke minden árnyalatnál megmarad, mert a fekete ugyanazzal az alfaértékkel keveredik bele. A hex kódok így 8 jegyűek lesznek, a CSS függvények pedig a törtjel után tartalmazzák az alfaértéket.
Mi történik az sRGB-n kívüli színekkel?
A keverés a teljes színt használja, de a HEX, RGB és HSL csak az sRGB-t tudja megjeleníteni, ezért a színskálán kívül eső lépések ezekben az oszlopokban az CSS Color 4 algoritmussal sRGB-be képeződnek le. Az OKLCH-oszlop a le nem képezett értéket őrzi meg.
Hogyan használhatom az árnyalatokat a CSS-ben?
Másolja a hex- vagy oklch()-értékeket egyéni tulajdonságokba, például --brand-600 és --brand-700 néven. Ha inkább a böngészőben szeretné elvégezni a keverést, a color-mix(in oklab, var(--brand) 80%, black) ugyanazt a 20%-os árnyalatot adja, mint az OKLab beállítás.
A sötétebb árnyalatok automatikusan akadálymentesek?
Nem. Ellenőrizze a szöveg kontrasztját minden árnyalattal, mert egy sötétnek tűnő árnyalat kontrasztja egy másik sötét színnel vagy színes szöveggel szemben is 4.5:1 alá eshet.