CodeKitHubMi ez az eszköz?
A színkeverő lineárisan interpolál két szín piros, zöld és kék csatornája között a kiválasztott arányban — ugyanaz a matematika, amit egy gradiens belsőleg használ. 0%-nál az eredmény az A szín, 100%-nál a B szín, 50%-nál pedig az egyes RGB csatornák számtani középértéke.
Ez különbözik a fizikai festékek keverésétől (ami szubtraktív, és a pigmentektől függ), és nem egyezik meg a HSL térben történő átlagolással sem — az RGB lineáris interpoláció az, amit a CSS gradiensek, a tervezőeszközök és a legtöbb „szín két szín között” eszköz használ, így az eredmény megegyezik azzal, amit egy böngészőben egy azonos két szín közötti gradiensben látnál.
Miért érdemes használni?
- Találj egy természetesnek ható hover vagy aktív állapot színt, amely az alapszíned és egy kiemelő szín között helyezkedik el — ahelyett, hogy találomra próbálgatnál egy módosítást.
- Lásd a pontos HEX kódot bármely aránynál, ne csak becsüld meg egy gradiens képernyőképéről.
- A 11 lépéses skála egyetlen kattintással teljes palettát ad az egyik színtől a másikig, ami hasznos adatvizualizációhoz vagy több megállási pontú gradienshez.
- Kattints bármelyik lépésre a HEX kód azonnali másolásához.
- Ingyenes, azonnali, és teljesen helyben fut — nincs feltöltés, nincs fiók.
Használati útmutató
- Válaszd ki az A és B színt a színválasztókkal, vagy írj be egy HEX kódot.
- Húzd az arány csúszkát, hogy beállítsd, mennyi B színt keverjünk bele.
- Olvasd le a kapott HEX és RGB értékeket a minta felett.
- Kattints bármelyik mintára az alábbi 11 lépéses skálán a HEX kód másolásához.
Példa
Bemenet
A szín #3B82F6 (kék), B szín #F59E0B (borostyán), arány 50%Kimenet
#9B9E7D — rgb(155, 158, 125)Pontosan 50%-nál minden RGB csatorna a két bemeneti szín csatornáinak számtani átlaga.
Gyakori kérdések
Miért nem egyezik ez azzal, amit valódi festék keverésekor kapnék?
A festékkeverés szubtraktív (a pigmentek elnyelik a fényt), és a felhasznált konkrét pigmentektől függ — kék és sárga festék keverése például zöldet ad. Ez az eszköz a fényt (RGB csatornákat) additív/lineáris módon keveri, ahogy azt a kijelzők, CSS gradiensek és a legtöbb digitális tervezőeszköz is teszi. A két rendszer eleve eltérő eredményt ad, ez nem hiba.
Ugyanaz ez, mint egy CSS linear-gradient a két szín között?
Igen — egy CSS linear-gradient(colorA, colorB) ugyanúgy interpolálja az RGB csatornákat, mint ez az eszköz, így a gradiens középpontjában látott szín megegyezik az itt kapott 50%-os eredménnyel.
Miért tűnik néha piszkosnak vagy szürkésnek a kevert szín?
Két telített, de nagyon eltérő árnyalat (mint a kék és a narancs, amelyek majdnem komplementerek) RGB térben történő keverése gyakran alacsony telítettségű, szürkésbarna középértéket ad — ez az RGB interpoláció valós tulajdonsága, nem hiba. Ha élénkebb keveréket szeretnél, próbálj a színkörön közelebb eső színeket keverni, vagy keverj HSL térben a színárnyalat módosításával, magas telítettséget megtartva (ezt ez az egyszerű RGB keverő nem teszi meg).
Kevertethetek egyszerre kettőnél több színt?
Egyetlen lépésben nem — az eszköz pontosan két színt kever. Három szín kombinálásához keverd össze az első kettőt a kívánt arányban, másold ki az eredményt, és illeszd be új A színként a harmadik szín mellé. A szakaszos megoldás azt is lehetővé teszi, hogy szabályozd a súlyozást, amit egy egyszerű háromtényezős átlag nem tenne lehetővé.
Ezt vagy a Színárnyalat-generátort használjam?
Ha két különböző szín közötti árnyalatra van szükséged — mondjuk egy átmeneti árnyalatra a márkakéked és egy kiemelő borostyánszín között —, használd ezt a keverőt. Ha egyetlen szín világosabb és sötétebb változataira van szükséged (hover állapotok, hátterek, Tailwind-stílusú 50–900 skála), inkább a Színárnyalat-generátort használd: az rögzített színárnyalatot és telítettséget tart, csak a világosságot változtatja, így minden eredmény egyértelműen ugyanabba a színcsaládba tartozik marad.
Milyen színformátumokat írhatok be a mezőkbe?
A szövegmezők 6 jegyű HEX kódokat fogadnak el, kezdő #-tel vagy anélkül (pl. 3B82F6 vagy #3B82F6). A rövidített 3 jegyű hex, az rgb() jelölés és a CSS színnevek itt nem kerülnek feldolgozásra — de bármelyik színt kiválaszthatod vizuálisan az egyes mezők mellett található natív színválasztóval, és a HEX mező automatikusan frissül.