CodeKitHubCe este acest instrument?
O rampă de nuanțe este o serie de variații ale unei culori la diferite niveluri de luminozitate, folosită în design-ul de interfețe pentru lucruri precum stările de hover, stările dezactivate, borduri și fundaluri care trebuie să se raporteze la o culoare de brand fără a fi identice cu aceasta.
Acest instrument convertește culoarea de bază în HSL, păstrează nuanța și saturația fixe și modifică luminozitatea de la aproximativ 95% (ton aproape alb) până la aproximativ 10% (nuanță aproape neagră), cu culoarea originală poziționată natural la mijlocul rampei.
De ce să-l folosești?
- Generează o rampă în stil sistem de design (precum scala 50/100/200.../900 a Tailwind) din orice culoare unică, nu doar dintr-o paletă prestabilită fixă.
- Alege 7, 9 sau 11 pași în funcție de cât de fină trebuie să fie rampa.
- Fiecare pas afișează codul HEX exact și procentul de luminozitate — click pentru copiere.
- Menține nuanța și saturația constante pe toată rampa, astfel încât toate nuanțele să pară clar legate de culoarea de bază, în loc să devieze spre gri.
- Gratuit, instant și complet local.
Cum se folosește
- Alege culoarea de bază folosind selectorul de culori sau introducând un cod HEX.
- Alege câți pași dorești în rampă (7, 9 sau 11).
- Citește codul HEX și procentul de luminozitate al fiecărei nuanțe direct pe eșantionul ei.
- Click pe orice eșantion pentru a copia codul HEX.
Exemplu
Intrare
#3B82F6 (un albastru mediu), 9 pașiRezultat
9 nuanțe de la un ton aproape alb (~95% luminozitate) până la o nuanță aproape neagră (~10% luminozitate), cu #3B82F6 poziționat ca pasul din mijlocNuanța și saturația rămân fixe pe toți cei 9 pași — doar luminozitatea se schimbă — astfel încât fiecare nuanță pare clar parte din aceeași familie de culori.
Întrebări frecvente
Este acesta același sistem folosit de Tailwind CSS pentru scalele sale de culori?
Este aceeași idee de bază (nuanță/saturație fixă, luminozitate variabilă), dar nu o replică exactă a paletei specifice Tailwind — scalele 50-900 ale Tailwind au fost ajustate manual de designeri, nu generate printr-o singură formulă. Acest instrument îți oferă o structură comparabilă generată din orice culoare alegi, ceea ce este util atunci când culoarea ta de bază nu este una dintre valorile prestabilite ale Tailwind.
De ce culoarea mea arată aproape la fel la doi pași adiacenți?
Acest lucru se poate întâmpla aproape de capetele foarte deschise sau foarte închise ale rampei, unde luminozitatea percepută se schimbă mai lent decât sugerează procentul numeric (o proprietate cunoscută a percepției umane a culorii, nu specifică acestui instrument). Alegerea mai puțini pași (7 în loc de 11) răspândește valorile de luminozitate mai departe unele de altele și reduce eșantioanele aproape identice.
Pot folosi aceste nuanțe direct ca proprietăți CSS personalizate?
Da — copiază fiecare cod HEX și lipește-l în variabilele tale CSS (de ex. --color-brand-100 până la --color-brand-900), potrivind poziția din rampă cu orice scală de denumire folosește proiectul tău.
Ar trebui să folosesc acest instrument sau Color Mixer?
Dacă faci versiuni mai deschise și mai închise ale unei culori — stări de hover, fundaluri subtile, borduri legate de o culoare de brand — folosește acest generator de nuanțe. Dacă în schimb ai nevoie de culoarea dintre două culori diferite (să spunem, un pas între albastrul tău principal și un portocaliu secundar), folosește Color Mixer, care interpolează canalele RGB a două culori la orice raport, în loc să varieze luminozitatea unei singure culori.
Ce se întâmplă dacă culoarea mea de bază este deja foarte deschisă sau foarte închisă?
Culoarea de bază se află întotdeauna pe rândul din mijloc, cu tonuri care urcă până la aproximativ 95% luminozitate deasupra ei și nuanțe care coboară până la aproximativ 10% dedesubt. Dacă baza ta este deja aproape albă, jumătatea de tonuri a rampei se comprimă într-un interval îngust de luminozitate (rânduri aproape identice), în timp ce jumătatea de nuanțe se răspândește larg — și invers pentru o bază foarte închisă. Pentru cea mai uniform distribuită rampă, pornește de la o versiune cu luminozitate medie a culorii tale (aproximativ 40-60% luminozitate).
Poate genera și tonuri (culoarea amestecată cu gri)?
Nu — acest instrument variază doar luminozitatea, păstrând saturația fixă, ceea ce produce tonuri și nuanțe, dar nu și tonuri gri. Dacă vrei o rampă mai estompată, desaturează mai întâi culoarea de bază (alege o versiune mai gri a ei în selectorul de culori) și generează rampa din aceasta; fiecare pas va moșteni saturația mai scăzută.