Gjenerator palete ngjyrash

Si ta përdorësh gjeneratorin e paletave të ngjyrave

1. Zgjidh një Ngjyrë bazë me mostrën e ngjyrës, ose shkruaj çdo kod te Kodi i ngjyrës bazë (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), një emër CSS…).
2. Zgjidh një Harmoni: Plotësuese, Analoge, Triadike, Plotësuese e ndarë, Tetradike (drejtkëndësh), Katrore ose Monokromatike.
3. Zgjidh Rrotën e ngjyrave: HSL (klasike) ose OKLCH (perceptuale). Paleta përditësohet sa herë që ndryshon një opsion; Gjenero paletën e rifreskon gjithashtu.
4. Kopjo një ngjyrë të vetme me butonin Kopjo nën mostrën e saj, ose zgjidh një format te Eksporto si (Listë HEX, Variabla CSS, Variabla SCSS, Varg JSON ose Ngjyra Tailwind) dhe përdor Kopjo ose Shkarko për të gjithë paletën.

Çdo mostër shfaq kodin e vet HEX me të zezë ose të bardhë, cilado ka kontrast më të mirë, dhe pozicionin e saj në raport me ngjyrën bazë (për shembull +120°).

Harmonitë e ngjyrave

Harmonitë e ngjyrave janë kënde të fiksuara në rrotën e ngjyrave. Duke nisur nga nuanca bazë, mjeti e rrotullon nuancën dhe i ruan ngopjen e ndriçimin e bazës.

• Plotësuese (0°, 180°): ngjyra e kundërt. Kontrast maksimal, e shkëlqyer për një buton thirrjeje për veprim përballë ngjyrës kryesore të markës.
• Analoge (−60°, −30°, 0°, +30°, +60°): fqinjët në rrotë. Kombinime të qeta, natyrale, që shkojnë mirë për sfonde dhe ilustrime.
• Triadike (0°, 120°, 240°): tri nuanca me largësi të barabartë. Të gjalla e të ekuilibruara; zakonisht një ngjyrë mbizotëron dhe dy të tjerat janë theksime.
• Plotësuese e ndarë (0°, 150°, 210°): dy fqinjët e plotësueses. Kontrast i fortë me më pak tension se një çift plotësues i pastër.
• Tetradike (drejtkëndësh) (0°, 60°, 180°, 240°): dy çifte plotësuese. Palete të pasura që kërkojnë një ngjyrë mbizotëruese për të mbetur koherente.
• Katrore (0°, 90°, 180°, 270°): katër nuanca me largësi të barabartë.
• Monokromatike: një nuancë në pesë hapa ndriçimi, nga e errëta te e çelura. Ideale për gjendje UI, grafikë dhe dizajne të holla.

Rrota HSL apo OKLCH?

Rrota HSL (klasike) është ajo tradicionale që përdorin shumica e mjeteve të dizajnit dhe udhëzuesve. Mangësia e saj është që këndet e barabarta nuk duken njësoj të ndritshme: e verdha në 60° duket shumë më e çelët se blu në 240° me të njëjtin ndriçim HSL.

Rrota OKLCH (perceptuale) e rrotullon nuancën në modelin e ngjyrave Oklab, të krijuar që ndriçimi të duket i qëndrueshëm. Paletat e ndërtuara mbi të kanë ngjyra me peshë vizuale të ngjashme, gjë që ndihmon kontrastin e aksesueshëm. Disa ngjyra të rrotulluara mund të bien jashtë asaj që mund të shfaqë një ekran; atëherë mjeti ua ul paksa kromën që të mbeten të shfaqshme.

Përdorimi i paletës së eksportuar

Variablat CSS prodhojnë një bllok :root me --color-1, --color-2… që mund ta ngjitësh në një stilesheet. Variablat SCSS japin rreshta $color-1: …;, Vargu JSON jep një listë me vargje HEX për skriptet, dhe Ngjyrat Tailwind japin një objekt colors me çelësa 100, 200, 300… për ta ngjitur në konfigurimin e Tailwind.

Para se ta publikosh, kontrollo kontrastin e tekstit: një harmoni garanton nuanca të këndshme, jo tekst të lexueshëm. Përdor neutrale të errëta ose të çelura për tekstin kryesor dhe ruaji ngjyrat e ngopura të paletës për theksime, butona dhe grafika.