Generator de nuanțe & tonuri

Cum funcționează Generatorul de Tonuri și Nuanțe

Ce face instrumentul

Generatorul de Tonuri și Nuanțe creează tonuri mai deschise (amestecate cu alb) și nuanțe mai închise (amestecate cu negru) din orice culoare de bază. Introdu o culoare și alege numărul de pași pentru a genera un gradient lin de variații. Fiecare pas afișează valorile HEX, RGB și procentul de amestec, ceea ce face ușoară construirea unor scale de culori consecvente pentru design UI, branding și vizualizare de date.

Cazuri de utilizare comune pentru dezvoltatori

Dezvoltatorii folosesc generatoare de tonuri și nuanțe atunci când construiesc scale de token-uri de design (de ex., blue-100 până la blue-900), creează stări hover și active pentru elemente interactive, proiectează ierarhii de culori accesibile și produc culori de fundal și de suprafață consecvente pentru teme deschise și închise. Instrumentul este esențial pentru construirea paletelor de culori personalizate în Tailwind CSS sau a sistemelor de culori Material Design.

Cum funcționează Tonurile și Nuanțele

Un ton este creat prin amestecarea unei culori cu alb, crescându-i luminozitatea. O nuanță este creată prin amestecare cu negru, scăzând luminozitatea. Formula pentru tonuri este: new = base + (255 - base) × factor. Pentru nuanțe: new = base × (1 - factor). Pașii sunt distribuiți uniform între culoarea de bază și alb pur (tonuri) sau negru pur (nuanțe), producând un gradient liniar al valorilor de culoare.

Capcane frecvente și cazuri limită

Amestecarea liniară cu alb sau negru poate produce tonuri decolorate sau nuanțe tulburi pentru unele nuanțe cromatice. Galbenurile pot părea verzi când sunt închise, iar albastrurile își pot pierde vivacitatea când sunt deschise. Pentru scale uniforme perceptual, ia în considerare utilizarea spațiilor de culoare OKLCH sau CIELAB. Verifică întotdeauna că cele mai deschise tonuri și cele mai închise nuanțe mențin un contrast suficient față de fundalurile pentru care sunt destinate.

Când să folosești acest instrument vs cod

Folosește acest instrument din browser pentru explorare rapidă și generarea de scale de culori în timpul lucrului de design. Pentru sisteme de design în producție, generează tonuri și nuanțe programatic folosind biblioteci de culori precum chroma.js sau culori, care suportă spații de culoare uniforme perceptual și pot produce token-uri de design în orice format.