CodeKitHubMi ez az eszköz?
Az árnyalatskála egy szín különböző világossági szinteken lévő variációinak sorozata, amelyet a UI-tervezésben gyakran használnak olyasmihez, mint hover állapotok, letiltott állapotok, szegélyek és háttérszínek, amelyeknek kapcsolódniuk kell egy márkaszínhez anélkül, hogy azonosak lennének vele.
Ez az eszköz az alapszínedet HSL-re konvertálja, a színárnyalatot és telítettséget rögzítve tartja, és a világosságot körülbelül 95%-tól (majdnem fehér tónus) körülbelül 10%-ig (majdnem fekete árnyalat) lépteti, az eredeti színed pedig a skála közepén, a természetes pozíciójában helyezkedik el.
Miért érdemes használni?
- Dizájnrendszer-stílusú skálát generál (mint a Tailwind 50/100/200.../900-as skálája) bármely egyetlen színből, nem csak egy rögzített előre beállított palettából.
- Válassz 7, 9 vagy 11 lépést attól függően, milyen finom felbontású skálára van szükséged.
- Minden lépés megjeleníti a pontos HEX kódot és a világosság-százalékot — kattints a másoláshoz.
- A színárnyalatot és telítettséget állandóan tartja a teljes skálán, így minden árnyalat egyértelműen kapcsolódik az alapszínhez, ahelyett hogy szürke felé sodródna.
- Ingyenes, azonnali és teljesen helyi.
Használati útmutató
- Válaszd ki az alapszíned a színválasztóval vagy egy HEX kód beírásával.
- Válaszd ki, hány lépést szeretnél a skálán (7, 9 vagy 11).
- Olvasd le minden árnyalat HEX kódját és világosság-százalékát közvetlenül a mintáján.
- Kattints bármelyik mintára a HEX kódjának másolásához.
Példa
Bemenet
#3B82F6 (közepes kék), 9 lépésKimenet
9 árnyalat egy majdnem fehér tónustól (~95% világosság) egy majdnem fekete árnyalatig (~10% világosság), a #3B82F6 maga a középső lépésként elhelyezveA színárnyalat és telítettség mind a 9 lépésben állandó marad — csak a világosság változik —, így minden árnyalat egyértelműen ugyanazon színcsalád részének tűnik.
Gyakori kérdések
Ez ugyanaz a rendszer, amit a Tailwind CSS használ a színskáláihoz?
Ugyanaz az alapötlet (rögzített színárnyalat/telítettség, változó világosság), de nem pontos másolata a Tailwind konkrét palettájának — a Tailwind 50-900-as skáláit tervezők kézzel finomhangolták, nem egyetlen képlet generálta. Ez az eszköz hasonló struktúrát ad neked bármely általad választott színből generálva, ami hasznos, ha az alapszíned nem a Tailwind egyik előre beállított színe.
Miért néz ki majdnem egyformán a színem két szomszédos lépésnél?
Ez a skála nagyon világos vagy nagyon sötét végei közelében fordulhat elő, ahol az érzékelt világosság lassabban változik, mint amit a számszerű százalék sugall (az emberi színészlelés ismert tulajdonsága, nem az eszközre jellemző). Kevesebb lépés választása (7 a 11 helyett) jobban szétteríti a világosság-értékeket, és csökkenti a szinte azonos mintákat.
Használhatom ezeket az árnyalatokat közvetlenül CSS egyéni tulajdonságokként?
Igen — másold ki az egyes HEX kódokat, és illeszd be a CSS változóidba (pl. --color-brand-100-tól --color-brand-900-ig), a skála pozícióját a projekted által használt elnevezési skálához igazítva.
Ezt vagy a Színkeverőt használjam?
Ha egy szín világosabb és sötétebb változatait készíted — hover állapotok, finom hátterek, márkaszínhez kapcsolódó szegélyek —, használd ezt az árnyalatgenerátort. Ha viszont két különböző szín közötti színre van szükséged (mondjuk egy lépés az elsődleges kéked és a másodlagos narancsod között), használd a Színkeverőt, amely két szín RGB csatornáit interpolálja bármilyen arányban, ahelyett hogy egy szín világosságát változtatná.
Mi történik, ha az alapszínem már nagyon világos vagy nagyon sötét?
Az alapszín mindig a középső sorban ül, a tónusok felette körülbelül 95%-os világosságig lépkednek, az árnyalatok pedig alatta körülbelül 10%-ig. Ha az alapszíned már majdnem fehér, a skála tónus-fele szűk világossági tartományba szorul (szinte azonos sorok), míg az árnyalat-fele szélesen szétterül — és fordítva egy nagyon sötét alapszín esetén. A legegyenletesebben elosztott skálához kezdj a színed közepes világosságú változatával (nagyjából 40-60%-os világosság).
Tudnak tónusokat (szürkével kevert színt) is generálni?
Nem — ez az eszköz csak a világosságot változtatja a telítettség rögzítése mellett, ami tónusokat és árnyalatokat eredményez, de nem szürkével kevert tónusokat. Ha visszafogottabb skálát szeretnél, előbb csökkentsd az alapszíned telítettségét (válassz szürkésebb változatot a színválasztóban), és abból generáld a skálát; minden lépés örökölni fogja az alacsonyabb telítettséget.