Ray Group

Instrument de paletă

Generator de schemă de culori

Generator gratuit de schemă de culori și instrument de paletă. Alege o culoare de brand, construiește un design system lumină/întuneric, verifică contrastul, apoi copiază CSS sau Tailwind — gratuit.

Lumină

Numele produsului

Textul de bază stă pe fundal. Trebuie să rămână lizibil dintr-o privire.

Text secundar pentru descrieri, SKU-uri și ore.

O suprafață, cum ar fi un card sau un câmp.

ContinuăLink text
Adresă de email
În stocStoc redusStoc epuizat

Întuneric

Numele produsului

Textul de bază stă pe fundal. Trebuie să rămână lizibil dintr-o privire.

Text secundar pentru descrieri, SKU-uri și ore.

O suprafață, cum ar fi un card sau un câmp.

ContinuăLink text
Adresă de email
În stocStoc redusStoc epuizat

Scară

  • 50

    #f8f2ff

  • 100

    #f2e5ff

  • 200

    #e5d1fb

  • 300

    #d3b5f1

  • 400

    #ba95de

  • 500

    #a077c5

  • 600

    #855ca8

  • 700

    #6c468d

  • 800

    #543370

  • 900

    #3c2252

  • 950

    #251235

Contrast

Textul de bază și etichetele de pe butoane au nevoie de 4,5:1. O pereche între 3:1 și 4,5:1 ajunge doar pentru text mare. Culoarea butonului are nevoie de 3:1 față de fundal.

Verificări care nu trec — lumină: 1, întuneric: 0.

  • Text pe fundal15.73:1Trece
  • Text secundar pe fundal6.60:1Trece
  • Text pe suprafață17.26:1Trece
  • Etichetă pe buton5.27:1Trece
  • Link pe fundal6.60:1Trece
  • Buton pe fundal2.98:1Nu trece
  • Etichetă pe succes5.38:1Trece
  • Etichetă pe avertisment11.54:1Trece
  • Etichetă pe pericol6.57:1Trece

Export

:root {
  --background: #f8f2ff;
  --surface: #ffffff;
  --foreground: #251235;
  --muted: #6c468d;
  --border: #e5d1fb;
  --primary: #a67dcc;
  --primary-foreground: #1c1b19;
  --accent: #6c468d;
  --success: #157a45;
  --success-foreground: #ffffff;
  --warning: #f5d061;
  --warning-foreground: #1c1b19;
  --danger: #b42318;
  --danger-foreground: #ffffff;
  --brand-50: #f8f2ff;
  --brand-100: #f2e5ff;
  --brand-200: #e5d1fb;
  --brand-300: #d3b5f1;
  --brand-400: #ba95de;
  --brand-500: #a077c5;
  --brand-600: #855ca8;
  --brand-700: #6c468d;
  --brand-800: #543370;
  --brand-900: #3c2252;
  --brand-950: #251235;
}

.dark {
  --background: #251235;
  --surface: #3c2252;
  --foreground: #f8f2ff;
  --muted: #d3b5f1;
  --border: #543370;
  --primary: #a67dcc;
  --primary-foreground: #1c1b19;
  --accent: #d3b5f1;
  --success: #157a45;
  --success-foreground: #ffffff;
  --warning: #f5d061;
  --warning-foreground: #1c1b19;
  --danger: #b42318;
  --danger-foreground: #ffffff;
}

Ce poți face

  • Palete lumină și întuneric
  • Verificări de contrast
  • Export variabile CSS
  • Export temă Tailwind

De ce să folosești generatorul de schemă de culori

Fără ghicit la hex. Acest instrument gratuit de paletă transformă o culoare de brand într-o schemă CSS lumină/întuneric coerentă, cu verificări de contrast — gata de lipit ca variabile CSS sau Tailwind în design system.

Cum generazi o schemă de culori

  1. Alege o culoare de brand din picker sau lipește un hex în acest instrument gratuit de paletă.
  2. Verifică schema lumină/întuneric, contrastul și previzualizarea UI.
  3. Copiază variabilele CSS sau tema Tailwind și lipește-le în repo.

Întrebări frecvente

Întrebări despre generatorul de schemă de culori

Generatorul de schemă de culori este gratuit?
Da. Acest instrument gratuit de paletă îți permite să generezi scheme lumină/întuneric, să verifici contrastul și să exporți CSS fără cost.
Ce creează instrumentul de paletă?
Dintr-o culoare de brand construiește o paletă completă de design system lumină/întuneric — fundaluri, text, accente și stări — gata ca variabile CSS sau Tailwind.
Culoarea mea de brand este încărcată undeva?
Nu. Totul rulează în browser. Nimic din ce introduci nu e stocat pe serverele noastre.
Pentru cine este generatorul de schemă de culori?
Designeri și developeri care au nevoie rapid de o schemă CSS lumină/întuneric dintr-o singură culoare de brand.

Alte instrumente gratuite