HedgieTools

Generator de palete de culori

Pornește de la culoarea ta principală și obține o paletă de culori completă pentru interfață: secundară, terțiară, succes, avertizare, pericol și neutre, cu nuanțele lor și verificarea contrastului.

Culoarea ta principală

Scrie o valoare sau alege o culoare: restul paletei se construiește în jurul ei.

Secundară și terțiară
Formatul valorii

Scrie o valoare HEX, de exemplu #2563EB, sau dă clic pe pătrat ca să alegi culoarea.

Paleta ta de culori

Dă clic pe o valoare sau pe o nuanță (de la 50 la 950) ca s-o copiezi. Creionul înlocuiește o culoare sugerată cu una aleasă de tine: ea rămâne fixă când schimbi culoarea principală.

  • —

    Principală

    culoarea ta
  • —

    Secundară

    complementară
  • —

    Terțiară

    aproape complementară
  • —

    Info

    albastru
  • —

    Succes

    verde
  • —

    Avertisment

    portocaliu
  • —

    Pericol

    roșu
  • —

    Neutru

    gri nuanțat

Tokenuri pentru tema luminoasă și întunecată

Culorile de lucru ale interfeței tale, gata pentru tema luminoasă și cea întunecată. Fiecare trimite la o nuanță din paletă. Dă clic ca să copiezi.

  • --backgroundFundalul paginii
  • --surfaceCarduri și panouri
  • --surface-mutedZone secundare
  • --borderChenare și separatoare
  • --textText principal
  • --text-mutedText secundar
  • --primaryButoane și linkuri
  • --primary-hoverLa trecerea cursorului
  • --on-primaryText pe culoarea principală
  • --focus-ringContur de focus
  • --secondaryAccent secundar
  • --tertiaryAccent terțiar
  • --infoInformații
  • --info-softFundal pentru informații
  • --successSucces
  • --success-softFundal pentru succes
  • --warningAvertisment
  • --warning-softFundal pentru avertizare
  • --dangerPericol, eroare
  • --danger-softFundal pentru eroare

Culori asortate

Armoniile clasice în jurul culorii tale principale, pentru ilustrații, grafice sau accente.

  • Complementară

    culoarea opusă

  • Complementară divizată

    mai blândă decât opusa

  • Analoagă

    culorile vecine

  • Triadă

    trei culori echilibrate

  • Tetradă

    patru culori în pătrat

  • Monocromatică

    o singură tentă, mai multe intensități

Previzualizare și contrast

Paleta aplicată pe câteva elemente de interfață și cât de lizibilă este fiecare combinație conform regulilor WCAG.

Tema previzualizării
Titlul paginiiText secundar, mai puțin important, sub titlu.
Un card cu un link și butoane.
PrincipalăSecundarăTerțiară
Info · O actualizare este disponibilă.
Succes · Modificările tale au fost salvate.
Avertisment · Abonamentul tău expiră în curând.
Eroare · Plata a eșuat.
  • Text pe fundal
    Raport—Text normal—Text mare—AAA—
  • Text secundar pe fundal
    Raport—Text normal—Text mare—AAA—
  • Link pe fundal
    Raport—Text normal—Text mare—AAA—
  • Buton principal
    Raport—Text normal—Text mare—AAA—
  • Buton secundar
    Raport—Text normal—Text mare—AAA—
  • Text terțiar pe fundal
    Raport—Text normal—Text mare—AAA—
  • Alertă de informare
    Raport—Text normal—Text mare—AAA—
  • Alertă de succes
    Raport—Text normal—Text mare—AAA—
  • Alertă de avertizare
    Raport—Text normal—Text mare—AAA—
  • Alertă de pericol
    Raport—Text normal—Text mare—AAA—

Export

Obține paleta în formatul ales mai sus (HEX).

Introdu o culoare principală ca să generezi codul.

Variabile CSS pentru paletă (--color-primary-500…). Tokenurile trimit la aceste variabile; activează tema întunecată cu data-theme="dark" pe elementul html.

Despre generatorul de palete de culori

Alege culoarea principală a brandului tău și obține în jurul ei tot ce îi trebuie unei interfețe: culori însoțitoare, culori de stare, neutre, nuanțe, tokenuri pentru tema luminoasă și întunecată, verificări de contrast și cod de lipit, totul fără să ieși din browser.

O paletă de culori completă, pornind de la una singură

Pornind de la culoarea ta principală, instrumentul creează o culoare secundară și una terțiară, culorile de stare (informare, succes, avertizare, pericol) potrivite stilului ei și griuri ușor nuanțate pentru fundaluri și text.

Nuanțe gata de folosit

Fiecare culoare vine în unsprezece nuanțe, de la cea mai deschisă (50) la cea mai închisă (950), pentru fundaluri, chenare, stări la trecerea cursorului și text. Dacă o culoare sugerată nu ți se potrivește, înlocuiește-o cu a ta: nuanțele ei se adaptează.

Tokenuri pentru tema luminoasă și întunecată

Fundal, suprafață, chenar, text, hover, focus și fundaluri de alertă: fiecare culoare de lucru trimite la o nuanță din paletă, cu o valoare pentru tema luminoasă și una pentru tema întunecată.

Contrast verificat

Fiecare combinație de text și fundal este evaluată după regulile WCAG: 4,5:1 pentru textul normal, 3:1 pentru textul mare și 7:1 pentru nivelul AAA.

Export în CSS, Tailwind, JSON

Copiază fiecare valoare în HEX, RGB, HSL sau OKLCH ori descarcă un fișier cu variabile CSS, o temă Tailwind v4, o configurație Tailwind v3, JSON sau o listă simplă. Totul se petrece în browserul tău: nimic nu este trimis sau salvat.

Instrumente similare