Generator Nuanțe & Tente

Generează o scală completă de 11 trepte din orice culoare hex. Exportă ca variabile CSS, config Tailwind, SCSS sau JSON.

:root {
  --color-brand-50: #f7f5ff;
  --color-brand-100: #ede8fe;
  --color-brand-200: #dad2fc;
  --color-brand-300: #beb3fa;
  --color-brand-400: #998ff6;
  --color-brand-500: #6366f1;
  --color-brand-600: #4e52bc;
  --color-brand-700: #3c408d;
  --color-brand-800: #2d3269;
  --color-brand-900: #21264a;
  --color-brand-950: #191f38;
}

Întrebări Frecvente

Care este diferența dintre nuanță și tentă?

O nuanță este o culoare amestecată cu negru (mai închisă), iar o tentă este o culoare amestecată cu alb (mai deschisă). Acest instrument generează ambele, creând o scală completă.

Cum folosesc variabilele CSS exportate?

Copiați outputul din tab-ul CSS și lipiți-l în fișierul CSS global sau în blocul :root. Referințiați-le cu var(--brand-500), var(--brand-100), etc.

Scala este compatibilă cu Tailwind CSS?

Da. Comutați la tab-ul Tailwind și copiați obiectul colors. Lipiți-l în tailwind.config.js sub theme.extend.colors pentru a folosi clase ca bg-brand-500.