Generator de tonuri deschise și închise

Cum folosești generatorul de tonuri deschise și închise

1. Alege o Culoare de bază cu eșantionul sau scrie o valoare în Codul culorii: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) sau un nume CSS precum teal.
2. Alege un Pas: 5 %, 10 %, 20 % sau 25 %. Cu 10 % obții tonuri deschise la 10 %, 20 % … 100 % și același număr de tonuri închise.
3. Alege cum se face Amestec în: OKLCH (perceptual) sau sRGB (clasic). Cele două rânduri se actualizează deodată: Tonuri deschise (amestecate cu alb) și Tonuri închise (amestecate cu negru), fiecare pornind de la culoarea de bază.
4. Apasă Copiază sub orice eșantion ca să îi copiezi codul HEX.
5. La Exportă ca, alege Variabile CSS, Configurație Tailwind (v3), Tailwind @theme (v4), Variabile SCSS sau JSON, setează un Nume precum primary sau brand, apoi Copiază sau Descarcă codul.

Tonuri deschise, tonuri închise și tonuri de gri

În teoria culorii, un ton deschis (tint) este o culoare amestecată cu alb, un ton închis (shade) este o culoare amestecată cu negru, iar un ton (tone) este o culoare amestecată cu gri. Procentul arată cât alb sau negru se adaugă: un ton deschis de 30 % înseamnă 70 % culoarea de bază și 30 % alb. La 100 % ajungi la alb pur sau la negru pur, de aceea ultimul eșantion din fiecare rând este mereu #FFFFFF sau #000000; el marchează capătul scalei.

Tonurile deschise și cele închise sunt cea mai rapidă cale de a construi o scară coerentă dintr-o singură culoare de brand: fundaluri deschise și stări hover din tonurile deschise, borduri, stări apăsate și text închis din cele închise.

Amestec OKLCH sau sRGB?

sRGB (clasic) amestecă direct valorile de roșu, verde și albastru. Așa fac majoritatea generatoarelor mai vechi și corespunde cu color-mix(in srgb, …) din CSS. Formula pentru un ton deschis este pur și simplu canal + (255 − canal) × p, iar pentru un ton închis canal × (1 − p). Este previzibil, dar pașii nu sunt uniformi perceptual: albastrurile tind să alunece spre violet pe măsură ce se deschid, iar tonurile închise arată adesea tulburi.

OKLCH (perceptual) amestecă în spațiul de culoare OKLCH, conceput de Björn Ottosson în 2020, ca color-mix(in oklch, …) din CSS. Luminozitatea, cromaticitatea și nuanța sunt interpolate separat. Albul și negrul nu au nuanță, deci nuanța de bază este păstrată pe tot parcursul, iar fiecare pas schimbă luminozitatea cu o valoare vizual asemănătoare. Culorile care ar ieși din gama sRGB sunt aduse înapoi reducând cromaticitatea, nu tăind canalele, deci nuanța rămâne stabilă. Pentru sisteme de design, aceasta dă de obicei scări mai curate și mai uniforme.

Cum folosești exportul

• Variabile CSS produc un bloc :root cu variabile precum --primary-tint-20 și --primary-shade-40, gata de lipit într-o foaie de stil.
• Configurație Tailwind (v3) dă un obiect colors pentru theme.extend.colors; apoi scrii clase precum bg-primary-tint-20 sau text-primary-shade-60. DEFAULT conține culoarea de bază, deci merge și bg-primary.
• Tailwind @theme (v4) dă variabile --color-… pentru configurarea CSS-first din Tailwind 4.
• Variabile SCSS și JSON se potrivesc altor instrumente de build și tokenurilor de design.

Numele sunt convertite în litere mici, iar spațiile devin cratime, deci „Brand Blue” devine brand-blue.