Generator de nuanțe de culoare

Toate instrumentele

Generează o gamă completă de tente și nuanțe dintr-o singură culoare — alege pasul de întunecare/luminare și numărul de nuanțe, apoi copiază orice valoare instant.

Culoare de bază
Pas
%
Cu cât se luminează/întunecă fiecare nuanță per pas (1–25%).
Număr de nuanțe
Câte tente și nuanțe să se genereze pe fiecare parte a culorii de bază.
Degradeu
Nuanțe generate

Alege o culoare de bază, un procent de pas și un număr — fiecare tentă și nuanță este calculată instant în browserul tău.

Despre Generator de nuanțe de culoare

Generatorul de Nuanțe de Culoare extinde o singură culoare într-o gamă completă de tonuri deschise și închise. Dă-i o culoare de bază și el produce tonuri progresiv mai deschise pe o parte și progresiv mai închise pe cealaltă — clasica rampă în stil 50-la-900 folosită în sistemele moderne de design.

Două controale modelează rezultatul: procentul pasului stabilește cât de deschisă sau închisă devine fiecare nuanță (1–25% per pas), iar numărul stabilește câte tonuri deschise și închise apar pe fiecare parte a bazei, până la zece. O bandă gradient previzualizează dintr-o privire întreaga rampă.

Generarea are loc instant în browser pe măsură ce tastezi — nimic nu este trimis către un server. Copiază orice valoare individuală, lista completă sau întreaga rampă ca variabile CSS, gata de introdus într-un fișier de token-uri de design sau o scală de culori în stil Tailwind.

Cum să utilizați Generator de nuanțe de culoare

  1. Alege o culoare de bază cu selectorul sau introdu o valoare; dă clic pe „Culoare aleatorie” pentru inspirație.
  2. Setează procentul pasului pentru a controla cât de puternic se deschide sau se închide fiecare nuanță.
  3. Alege numărul de nuanțe pentru a decide câte tonuri deschise și închise apar pe fiecare parte.
  4. Dă clic pe o nuanță pentru a o copia, sau folosește „Copiază tot” și „Copiază variabile CSS” pentru întreaga rampă.

Întrebări frecvente

Da, complet. Toate tonurile deschise și închise sunt calculate live în browser, deci nu există cost, cont sau limită la numărul de rampe pe care le generezi.

Un ton deschis este culoarea ta de bază amestecată spre alb (mai deschis), în timp ce un ton închis este baza amestecată spre negru (mai închis). Generatorul produce ambele direcții deodată, etichetate „Tonuri deschise (mai luminoase)” și „Tonuri închise (mai întunecate)” în jurul culorii tale de bază.

Setează numărul la 4 sau 5 pe fiecare parte, ca să obții nouă până la unsprezece nuanțe în total, cu baza ta la mijloc. Un pas de aproximativ 8–10% oferă de obicei o spațiere similară scalelor 50–900 folosite de framework-urile populare.

Pașii mici (3–6%) oferă variații subtile pentru hover și margini; pașii medii (8–12%) sunt potriviți pentru rampe complete de sistem de design; pașii mari (15–25%) creează seturi cu contrast ridicat, în stil poster. Urmărește previzualizarea gradientului — o rampă bună ar trebui să se întunece uniform, fără benzi.

Da. „Copiază variabile CSS” produce întreaga rampă ca proprietăți personalizate CSS denumite, iar „Copiază tot” îți oferă o listă simplă de valori pe care le poți lipi oriunde, de la hărți SCSS la obiecte de temă JavaScript.
Distribuiți
Instrumente conexe
Generator de palete de culori Construiește palete de culori armonioase dintr-o roată de culori interactivă — aplică reguli de armonie precum analogă, complementară sau triadă, apoi copiază orice valoare instant. Gratuit
Mixer de culori Amestecă o culoare de start cu una finală pe până la 10 pași — previzualizează degradeul, preia fiecare nuanță și copiază orice format instant. Gratuit
Exportator de palete Lipește sau importă un set de culori și exportă-le instant ca variabile CSS, SCSS, configurație Tailwind, JSON sau mostre SVG — pasul final pentru orice paletă. Gratuit
Extractor de culori din imagini Extrage o paletă de culori rafinată și gata de copiat din orice imagine. Gratuit
Paletă de culori web-safe Răsfoiește cele 216 culori web-safe clasice sub forma unei grile de mostre pe care poți da clic — sortează după nuanță sau ordinea cubului, filtrează după hex și copiază instant orice valoare HEX sau rgb(). Gratuit
Asocieri de fonturi și director Google Fonts Răsfoiește un director curatoriat de fonturi Google Fonts populare cu previzualizări live, filtrează după categorie și caută după nume, apoi copiază cod CSS gata de utilizat și explorează asocieri de fonturi sugerate — totul în browserul tău. Gratuit
Căutări populare
generator de nuanțe de culoare tente și nuanțe deschide și închide culoarea nuanțe ale unei culori generator de tente de culoare generează nuanțe de culoare
Ai nevoie de ajutor?
Ai întâmpinat o problemă cu acest instrument? Spune-ne.
Raportează o problemă

Adăugați acest instrument gratuit pe propriul site — copiați și lipiți codul de mai jos.