Árnyalat- és tónusgenerátor
21 szín
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)Technikai részletek
Hogyan működik az Árnyalatok és tónusok generátora
Mit csinál az eszköz
Az Árnyalatok és tónusok generátora bármilyen alapszínből világosabb tónusokat (fehérrel keverve) és sötétebb árnyalatokat (feketével keverve) hoz létre. Adj meg egy színt, és válaszd ki a lépések számát, hogy a variációk sima átmenetét generáld. Minden lépés megjeleníti a HEX- és RGB-értékeket, valamint a keverési százalékot, így könnyű egységes színskálákat építeni UI-tervezéshez, arculathoz és adatvizualizációhoz.
Gyakori fejlesztői felhasználási esetek
A fejlesztők tónus- és árnyalatgenerátorokat használnak design token skálák építésekor (pl. blue-100-tól blue-900-ig), interaktív elemek hover és active állapotainak kialakításakor, akadálymentes színhierarchiák tervezésekor, valamint egységes háttér- és felületszínek előállításakor világos és sötét témákhoz. Az eszköz elengedhetetlen egyedi Tailwind CSS színpaletták vagy Material Design színrendszerek felépítéséhez.
Hogyan működnek a tónusok és árnyalatok
A tónus úgy jön létre, hogy egy színt fehérrel keverünk, növelve a világosságát. Az árnyalat úgy jön létre, hogy feketével keverjük, csökkentve a világosságot. A tónusok képlete: new = base + (255 - base) × factor. Az árnyalatoké: new = base × (1 - factor). A lépések egyenletesen oszlanak el az alapszín és a tiszta fehér (tónusok), illetve a tiszta fekete (árnyalatok) között, így a színértékek lineáris gradiensét kapjuk.
Gyakori buktatók és szélső esetek
A fehérrel vagy feketével történő lineáris keverés egyes árnyalatoknál fakó tónusokat vagy „sáros” árnyalatokat eredményezhet. A sárgák sötétítéskor zöldesnek tűnhetnek, a kékek pedig világosításkor veszíthetnek az élénkségükből. Észlelés szempontjából egyenletes skálákhoz érdemes az OKLCH vagy a CIELAB színtereket használni. Mindig ellenőrizd, hogy a legvilágosabb tónusok és a legsötétebb árnyalatok elegendő kontrasztot biztosítanak-e a tervezett hátterükön.
Mikor érdemes ezt az eszközt használni a kód helyett
Használd ezt a böngészős eszközt gyors felfedezéshez és színskálák generálásához a tervezési munka során. Éles, gyártási design rendszerekhez a tónusokat és árnyalatokat programozottan generáld olyan színkönyvtárakkal, mint a chroma.js vagy a culori, amelyek támogatják az észlelés szempontjából egyenletes színtereket, és bármilyen formátumban képesek design tokeneket előállítani.