Világosabb és sötétebb árnyalatok generátora

A világosabb és sötétebb árnyalatok generátorának használata

1. Válassz Alapszínt a színmintával, vagy írj be egy értéket a Színkód mezőbe: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) vagy CSS-színnév, például teal.
2. Válassz Lépést: 5%, 10%, 20% vagy 25%. 10%-nál a világosabb árnyalatokat 10%, 20% … 100% értéknél kapod, és ugyanennyi sötétebb árnyalatot.
3. Válaszd ki, miben történjen a Keverés színtérben: OKLCH (észlelési) vagy sRGB (klasszikus). A két sor egyszerre frissül: a Világosabb árnyalatok (fehérrel keverve) és a Sötétebb árnyalatok (feketével keverve), mindkettő az alapszíntől indul.
4. Bármelyik színminta alatt a Másolás gombra kattintva kimásolhatod a HEX-kódját.
5. Az Exportálás mint alatt válassz CSS-változókat, Tailwind-konfiguráció (v3)-at, Tailwind @theme (v4)-et, SCSS-változókat vagy JSON-t, adj meg egy Névet, például primary vagy brand, majd Másolás vagy Letöltés a kódot.

Tint, shade és tone

A színelméletben a tint a fehérrel kevert szín (világosabb árnyalat), a shade a feketével kevert szín (sötétebb árnyalat), a tone pedig a szürkével kevert szín. A százalék megmutatja, mennyi fehéret vagy feketét adunk hozzá: egy 30%-os világosabb árnyalat 70% alapszín és 30% fehér. A 100%-nál tiszta fehéret vagy tiszta feketét kapsz, ezért minden sor utolsó színmintája mindig #FFFFFF vagy #000000; ez jelzi a skála végét.

A világosabb és sötétebb árnyalatok a leggyorsabb módja egy következetes skála építésének egyetlen márkaszínből: világos hátterek és hover állapotok a világosabb árnyalatokból, szegélyek, lenyomott állapotok és sötét szöveg a sötétebbekből.

OKLCH vagy sRGB keverés?

Az sRGB (klasszikus) közvetlenül keveri a vörös, zöld és kék értékeket. Ezt teszi a legtöbb régebbi generátor, és megegyezik a CSS color-mix(in srgb, …) függvénnyel. A világosabb árnyalat képlete egyszerűen csatorna + (255 − csatorna) × p, a sötétebbé csatorna × (1 − p). Kiszámítható, de a lépések észlelés szerint nem egyenletesek: a kékek világosodáskor hajlamosak lilába tolódni, a sötét árnyalatok pedig gyakran sárosnak tűnnek.

Az OKLCH (észlelési) a Björn Ottosson által 2020-ban tervezett OKLCH színtérben kever, mint a CSS color-mix(in oklch, …). A világosságot, a krómát és az árnyalatot külön interpolálja. A fehérnek és a feketének nincs színárnyalata, ezért az alap árnyalata végig megmarad, és minden lépés vizuálisan hasonló mértékben változtatja a világosságot. Az sRGB-tartományon kívül eső színeket a króma csökkentésével hozza vissza, nem a csatornák levágásával, így az árnyalat stabil marad. Dizájnrendszerekhez ez általában tisztább és egyenletesebb skálákat ad.

Az export használata

• A CSS-változók egy :root blokkot adnak, például --primary-tint-20 és --primary-shade-40 változókkal, amelyet beilleszthetsz egy stíluslapba.
• A Tailwind-konfiguráció (v3) egy colors objektumot ad a theme.extend.colors alá; ezután olyan osztályokat írsz, mint a bg-primary-tint-20 vagy a text-primary-shade-60. A DEFAULT az alapot tartalmazza, így a bg-primary is működik.
• A Tailwind @theme (v4) --color-… változókat ad a Tailwind 4 CSS-alapú konfigurációjához.
• Az SCSS-változók és a JSON más buildeszközökhöz és dizájntokenekhez valók.

A nevek kisbetűssé alakulnak, a szóközök kötőjellé, így a „Brand Blue” brand-blue lesz.