Utilia
Kategorije ▾
Jezik: sr ▾

Generator svetlijih i tamnijih nijansi boje

Generiši svetlije i tamnije nijanse boje u koracima od 5, 10, 20 ili 25 %, mešane u OKLCH ili sRGB, i izvezi ih kao CSS promenljive ili Tailwind konfiguraciju.

Svetlije nijanse (mešane sa belom)

    Tamnije nijanse (mešane sa crnom)

      Kako se koristi generator svetlijih i tamnijih nijansi

      1. Izaberi Osnovna boja uzorkom ili upiši vrednost u Kod boje: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) ili CSS naziv poput teal.
      2. Izaberi Korak: 5 %, 10 %, 20 % ili 25 %. Sa 10 % dobijaš svetlije nijanse na 10 %, 20 % … 100 % i isti broj tamnijih.
      3. Izaberi način mešanja u Mešanje u: OKLCH (perceptivno) ili sRGB (klasično). Oba reda se ažuriraju odjednom: Svetlije nijanse (mešane sa belom) i Tamnije nijanse (mešane sa crnom), svaki počinje od osnove.
      4. Klikni Kopiraj ispod bilo kog uzorka da kopiraš njegov HEX kod.
      5. U odeljku Izvezi kao izaberi CSS promenljive, Tailwind konfiguracija (v3), Tailwind @theme (v4), SCSS promenljive ili JSON, postavi Naziv poput primary ili brand, pa Kopiraj ili Preuzmi kod.

      Alat radi u tvom pregledaču. Ništa što upišeš ne šalje se na server.

      Svetlije nijanse, tamnije nijanse i tonovi

      U teoriji boja, tint (svetlija nijansa) je boja pomešana sa belom, shade (tamnija nijansa) je boja pomešana sa crnom, a ton je boja pomešana sa sivom. Procenat kaže koliko se bele ili crne dodaje: tint od 30 % je 70 % osnovne boje i 30 % bele. Na 100 % stižeš do čiste bele ili čiste crne, zato je poslednji uzorak svakog reda uvek #FFFFFF ili #000000: označava kraj skale.

      Svetlije i tamnije nijanse su najbrži način da od jedne boje brenda napraviš doslednu skalu: svetle pozadine i stanja prelaska mišem iz svetlijih nijansi, ivice, stanja pritiska i tamni tekst iz tamnijih.

      OKLCH ili sRGB mešanje?

      sRGB (klasično) meša vrednosti crvene, zelene i plave direktno. To rade i većina starijih generatora i poklapa se sa CSS-om color-mix(in srgb, …). Formula za svetliju nijansu je prosto kanal + (255 − kanal) × p, a za tamniju kanal × (1 − p). Predvidivo je, ali koraci nisu perceptivno ravnomerni: plave sa posvetljivanjem teže ka ljubičastoj, a tamne nijanse često deluju mutno.

      OKLCH (perceptivno) meša u prostoru boja OKLCH koji je Björn Ottosson osmislio 2020, kao CSS color-mix(in oklch, …). Svetlina, hroma i ton interpoliraju se odvojeno. Bela i crna nemaju ton, pa se osnovni ton zadržava do kraja, a svaki korak menja svetlinu za vizuelno sličnu količinu. Boje koje bi pale van sRGB gamuta vraćaju se smanjivanjem hrome, a ne odsecanjem kanala, pa ton ostaje stabilan. Za dizajn sisteme ovo obično daje čistije i ravnomernije skale.

      Korišćenje izvoza

      • CSS promenljive daju blok :root poput --primary-tint-20 i --primary-shade-40, spreman za lepljenje u stilski fajl.
      • Tailwind konfiguracija (v3) daje objekat colors za theme.extend.colors. Zatim pišeš klase kao bg-primary-tint-20 ili text-primary-shade-60. DEFAULT sadrži osnovu, pa radi i bg-primary.
      • Tailwind @theme (v4) daje promenljive --color-… za CSS-first konfiguraciju Tailwinda 4.
      • SCSS promenljive i JSON odgovaraju drugim alatima za izradu i dizajnerskim tokenima.

      Nazivi se pišu malim slovima, a razmaci postaju crtice, pa „Brand Blue“ postaje brand-blue.

      Česta pitanja

      Koja je razlika između svetlije i tamnije nijanse?

      Svetlija nijansa dodaje belu i čini boju svetlijom, a tamnija dodaje crnu i čini je tamnijom. Dodavanje sive daje ton, koji snižava zasićenost bez velike promene svetline.

      Koji korak da izaberem?

      10 % daje devet upotrebljivih koraka sa svake strane, dovoljno za većinu interfejsa. Koristi 20 % ili 25 % za kratku skalu u prezentaciji, a 5 % kad ti trebaju veoma fine varijacije za prelazak mišem ili ivice.

      Zašto mi sRGB svetlije nijanse izgledaju ljubičasto?

      Mešanje plave sa belom u sRGB-u pomera opaženi ton ka ljubičastom (poznat efekat sRGB prostora). Prebaci na OKLCH (perceptivno) da ton ostane stabilan.

      Da li su ove boje pristupačne?

      Generator ne proverava kontrast. Parove koje planiraš da koristiš, kao što je tekst na svetlijoj nijansi, testiraj alatom za proveru kontrasta: WCAG traži 4,5:1 za običan tekst.

      Mogu li izlaz da koristim sa Tailwindovom skalom 50–950?

      Izvoz koristi nazive sa procentima (tint-10, shade-30) da značenje ostane jasno. Ako više voliš numerisane ključeve, preimenuj nekoliko koraka u izvezenom kodu, na primer svetliju nijansu od 90 % u 50, a tamniju od 80 % u 950.

      Srodni alati