Utilia
Kategoritë ▾
Gjuha: sq ▾

Gjenerator nuancash të çelura dhe të errëta

Gjenero nuanca të çelura dhe të errëta të çdo ngjyre me hapa 5, 10, 20 ose 25 %, të përziera në OKLCH ose sRGB, dhe eksportoji si variabla CSS ose Tailwind.

Nuanca të çelura (të përziera me të bardhë)

    Nuanca të errëta (të përziera me të zezë)

      Si ta përdorësh gjeneratorin e nuancave të çelura dhe të errëta

      1. Zgjidh një Ngjyrë bazë me mostrën, ose shkruaj një vlerë te Kodi i ngjyrës: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) ose një emër CSS si teal.
      2. Zgjidh një Hap: 5 %, 10 %, 20 % ose 25 %. Me 10 % merr nuanca të çelura në 10 %, 20 % … 100 % dhe të njëjtin numër nuancash të errëta.
      3. Zgjidh si ta Përziesh në: OKLCH (perceptuale) ose sRGB (klasike). Dy rreshtat përditësohen njëkohësisht: Nuanca të çelura (të përziera me të bardhë) dhe Nuanca të errëta (të përziera me të zezë), secili duke nisur nga baza.
      4. Kliko Kopjo nën çdo mostër për të kopjuar kodin e saj HEX.
      5. Te Eksporto si, zgjidh Variabla CSS, Konfigurim Tailwind (v3), Tailwind @theme (v4), Variabla SCSS ose JSON, cakto një Emër si primary ose brand, pastaj Kopjo ose Shkarko kodin.

      Nuanca të çelura, të errëta dhe tone

      Në teorinë e ngjyrave, një tint (nuancë e çelur) është një ngjyrë e përzier me të bardhë, një shade (nuancë e errët) është një ngjyrë e përzier me të zezë, dhe një ton është një ngjyrë e përzier me gri. Përqindja tregon sa e bardhë ose e zezë shtohet: një nuancë e çelur 30 % është 70 % ngjyrë bazë dhe 30 % e bardhë. Në 100 % arrin të bardhën ose të zezën e pastër, prandaj mostra e fundit e çdo rreshti është gjithmonë #FFFFFF ose #000000; shënon fundin e shkallës.

      Nuancat e çelura dhe të errëta janë mënyra më e shpejtë për të ndërtuar një shkallë të qëndrueshme nga një ngjyrë e vetme marke: sfonde të çelura e gjendje hover nga nuancat e çelura, korniza, gjendje të shtypura dhe tekst të errët nga ato të errëtat.

      Përzierje OKLCH apo sRGB?

      sRGB (klasike) i përzien drejtpërdrejt vlerat e kuqe, të gjelbër dhe blu. Kështu bëjnë shumica e gjeneratorëve më të vjetër dhe përputhet me CSS color-mix(in srgb, …). Formula për një nuancë të çelur është thjesht kanali + (255 − kanali) × p, dhe për një nuancë të errët kanali × (1 − p). Është e parashikueshme, por hapat nuk janë njëtrajtësisht perceptues: blutë priren të shkojnë drejt vjollcës ndërsa çelen, dhe nuancat e errëta shpesh duken të papastra.

      OKLCH (perceptuale) përzien në hapësirën e ngjyrave OKLCH të krijuar nga Björn Ottosson në 2020, si CSS color-mix(in oklch, …). Ndriçimi, kroma dhe nuanca interpolohen veçmas. E bardha dhe e zeza nuk kanë nuancë, prandaj nuanca bazë ruhet deri në fund, dhe çdo hap e ndryshon ndriçimin me një sasi vizualisht të ngjashme. Ngjyrat që do të binin jashtë gamës sRGB kthehen duke ulur kromën, jo duke prerë kanalet, kështu nuanca mbetet e qëndrueshme. Për sistemet e dizajnit, kjo zakonisht jep shkallë më të pastra e më të barabarta.

      Përdorimi i eksportit

      • Variablat CSS prodhojnë një bllok :root si --primary-tint-20 dhe --primary-shade-40, gati për t’u ngjitur në një stilesheet.
      • Konfigurimi Tailwind (v3) jep një objekt colors për theme.extend.colors; pastaj shkruan klasa si bg-primary-tint-20 ose text-primary-shade-60. DEFAULT mban bazën, kështu funksionon edhe bg-primary.
      • Tailwind @theme (v4) jep variabla --color-… për konfigurimin e Tailwind 4 që nis nga CSS.
      • Variablat SCSS dhe JSON u përshtaten mjeteve të tjera ndërtimi dhe token-eve të dizajnit.

      Emrat kalojnë në shkronja të vogla dhe hapësirat bëhen vija ndarëse, kështu “Brand Blue” bëhet brand-blue.

      Pyetje të shpeshta

      Cili është ndryshimi mes një nuance të çelur dhe një të errët?

      Nuanca e çelur shton të bardhë dhe e bën ngjyrën më të çelët; nuanca e errët shton të zezë dhe e bën më të errët. Shtimi i griut jep një ton, që ul ngopjen pa e ndryshuar shumë ndriçimin.

      Cilin hap duhet të zgjedh?

      10 % jep nëntë hapa të përdorshëm në secilën anë, mjaftueshëm për shumicën e ndërfaqeve. Përdor 20 % ose 25 % për një shkallë të shkurtër në një prezantim, dhe 5 % kur të duhen variacione shumë të holla hover ose kornizash.

      Pse nuancat e mia sRGB duken vjollcë?

      Përzierja e blusë me të bardhë në sRGB e zhvendos nuancën e perceptuar drejt vjollcës (efekt i njohur i hapësirës sRGB). Kalo te OKLCH (perceptuale) që nuanca të mbetet e qëndrueshme.

      A janë këto ngjyra të aksesueshme?

      Gjeneratori nuk e kontrollon kontrastin. Testo çiftet që do të përdorësh, si teksti mbi një nuancë të çelur, me një kontrollues kontrasti: WCAG kërkon 4,5:1 për tekst normal.

      A mund ta përdor daljen me shkallën 50–950 të Tailwind?

      Eksporti përdor emra me përqindje (tint-10, shade-30) që kuptimi të mbetet i qartë. Nëse preferon çelësa me numra, riemërto disa hapa në kodin e eksportuar, për shembull nuancën e çelur 90 % si 50 dhe nuancën e errët 80 % si 950.

      Mjete të ngjashme