Színkeverő
Keverjen össze két színt tetszőleges arányban, a kiválasztott színtérben, ahogyan a CSS color-mix() teszi. Adjon meg két színt bármilyen CSS formátumban, állítsa be a második szín arányát 0 és 100 százalék között, majd válasszon az OKLab, OKLCH, Lab, LCH, sRGB, lineáris sRGB, Display P3, HSL, HWB vagy XYZ közül. Az eredmény HEX, RGB, HSL és OKLCH formátumban jelenik meg, valamint kap egy kész color-mix() kifejezést a stíluslapjához.
Gyakran ismételt kérdések
Hogyan működik a mennyiség?
A mennyiség a 2. szín arányát jelenti a keverékben. A 0% az 1. színt adja vissza, a 100% a 2. színt, az 50% pedig a két szín közötti középpontot adja a kiválasztott színtérben. A color-mix(in space, color1 (100 - p)%, color2 p%) kifejezésnek felel meg.
Melyik színteret válasszam?
Az alapértelmezett OKLab perceptuálisan egyenletes, és elkerüli a zavaros vagy sötét köztes színeket. Az sRGB a gamma-kódolt csatornákat keveri, ahogy a régebbi böngészők és a Sass, ezért a telített színek keveréke sötétebb és tompább lesz. A Lab a régebbi CIE perceptuális színtér, viselkedése hasonló az OKLabéhoz, de a kékek kevésbé egyenletesek.
Mit csinálnak a színárnyalat-alapú színterek?
Az OKLCH, LCH, HSL és HWB a színárnyalatot a színkör rövidebb ívén interpolálja, ami a CSS alapértelmezett beállítása; így a köztes szín megőrzi telítettségét, és élénkebb lehet bármelyik bemeneti színnél. Ha az egyik szín semleges, színárnyalat nélküli szürke, a rendszer a másik szín színárnyalatát használja.
Mire való a lineáris sRGB és az XYZ?
Mindkettő lineárisan keveri a fényerősségeket, mint az egymást átfedő fénysugarak, ezért a köztes szín világosabbnak tűnik, mint sRGB-ben. Fizikai alapú hatásokhoz és az elmosott vagy kevert pixelek megjelenésének utánzásához hasznosak.
Hogyan kezeli az átlátszóságot?
A CSS color-mix() működéséhez hasonlóan a keverő előre szorzott alfával interpolál, így egy átlátszó szín nem húzza a keveréket a fekete felé. Maga az alfa is ugyanilyen arányban interpolálódik, és megjelenik a 8 számjegyű hex kódban, valamint a CSS függvényekben a perjel után.
Milyen bemeneti formátumokat használhatok?
Hex kódok # jellel vagy anélkül, CSS színnevek, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() színterek, például a display-p3, valamint cmyk(), tetszőleges kombinációban. Minden szín legfeljebb 100 karakter hosszú lehet.
Mi történik, ha az eredmény kívül esik az sRGB színtéren?
A Display P3, OKLCH vagy LCH színtérben történő keverés olyan színeket eredményezhet, amelyeket az sRGB nem tud megjeleníteni. A HEX, RGB és HSL értékeket ilyenkor a CSS Color 4 algoritmus az sRGB színtérbe képezi le, és az eredményhez megjegyzés társul, míg az OKLCH érték a le nem képezett színt őrzi meg.
Hogyan használhatom a color-mix() kifejezést?
Illessze be bármely olyan CSS tulajdonságba, amely színt fogad. A bemeneteket hex kód vagy széles színtartományú bemenetek esetén oklch() alapján nevezi meg, így a böngésző újraszámítja ugyanazt a keveréket. A color-mix() a Chrome, az Edge, a Firefox és a Safari minden jelenlegi verziójában működik.
Mennyire pontos az eredmény?
A mennyiség egész százalék, a keverék pedig teljes pontossággal, a culori könyvtárral számítódik ki. A RGB csatornák egész számra, a HSL százalékok két tizedesjegyre, az OKLCH világossági és színtelítettségi értékei pedig négy tizedesjegyre kerekítődnek, ezért a böngészők az utolsó számjegyben egy lépéssel eltérhetnek.
Hogyan hozhatok létre több köztes lépést két szín között?
Futtassa a keverőt különböző mennyiségekkel, például 25%, 50% és 75% értékkel. A fehér, fekete vagy szürke felé tartó teljes színskálát a Színárnyalat-, Színváltozat- és Tónusgenerátorok készítik el egyetlen táblázatban.