Generator cod de culoare HEX, RGB și HSL (cu opacitate)

Coduri de culoare des folosite

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Overlay negru 50% Stratul închis pus peste o poză, ca textul alb de deasupra să se citească.

/* fără opacitate */
background: #000000;
background: rgb(0, 0, 0);
background: hsl(0, 0%, 0%);

/* cu opacitate 50% */
background: #00000080;
background: rgba(0, 0, 0, 0.5);
background: hsla(0, 0%, 0%, 0.5);

Alb semitransparent Fundal pentru carduri și meniuri puse peste imagini sau gradiente.

/* fără opacitate */
background: #ffffff;
background: rgb(255, 255, 255);
background: hsl(0, 0%, 100%);

/* cu opacitate 80% */
background: #ffffffcc;
background: rgba(255, 255, 255, 0.8);
background: hsla(0, 0%, 100%, 0.8);

Albastru pentru butoane Culoarea principală pentru linkuri și butoane; varianta transparentă merge pentru hover.

/* fără opacitate */
background: #2563eb;
background: rgb(37, 99, 235);
background: hsl(221, 83%, 53%);

/* cu opacitate 15% */
background: #2563eb26;
background: rgba(37, 99, 235, 0.15);
background: hsla(221, 83%, 53%, 0.15);

Roșu pentru erori Mesajele de eroare; varianta de 10% este fundalul casetei de alertă.

/* fără opacitate */
background: #dc2626;
background: rgb(220, 38, 38);
background: hsl(0, 72%, 51%);

/* cu opacitate 10% */
background: #dc26261a;
background: rgba(220, 38, 38, 0.1);
background: hsla(0, 72%, 51%, 0.1);

Verde pentru succes Confirmări și starea „salvat”; cu opacitate mică devine fundalul notificării.

/* fără opacitate */
background: #16a34a;
background: rgb(22, 163, 74);
background: hsl(142, 76%, 36%);

/* cu opacitate 12% */
background: #16a34a1f;
background: rgba(22, 163, 74, 0.12);
background: hsla(142, 76%, 36%, 0.12);

Galben pentru avertizări Avertizări și etichete „nou”; pe fundal galben pune text închis la culoare.

/* fără opacitate */
background: #f59e0b;
background: rgb(245, 158, 11);
background: hsl(38, 92%, 50%);

/* cu opacitate 20% */
background: #f59e0b33;
background: rgba(245, 158, 11, 0.2);
background: hsla(38, 92%, 50%, 0.2);

Gri pentru text secundar Datele, autorii și textul de ajutor din formulare.

/* fără opacitate */
color: #64748b;
color: rgb(100, 116, 139);
color: hsl(215, 16%, 47%);

/* cu opacitate 60% */
color: #64748b99;
color: rgba(100, 116, 139, 0.6);
color: hsla(215, 16%, 47%, 0.6);

Violet accent O a doua culoare de accent, pentru etichete și elemente speciale.

/* fără opacitate */
background: #7c3aed;
background: rgb(124, 58, 237);
background: hsl(262, 83%, 58%);

/* cu opacitate 25% */
background: #7c3aed40;
background: rgba(124, 58, 237, 0.25);
background: hsla(262, 83%, 58%, 0.25);

Cum folosești generatorul de cod de culoare

Alege culoarea din selector sau scrie un cod în câmpul de text: #2563eb, rgb(37, 99, 235), hsl(221, 83%, 53%) sau chiar un nume, ca tomato.
Mută glisorul Opacitate ca să alegi cât de transparentă să fie varianta cu opacitate.
Apasă pe orice cod din tabel ca să-l copiezi. Coloana din stânga are culoarea opacă, cea din dreapta culoarea cu opacitatea aleasă.
Dedesubt găsești nuanțe mai deschise și mai închise ale aceleiași culori; un clic pe una o alege.

Formatele de culoare din CSS

HEX scrie roșul, verdele și albastrul ca trei perechi de cifre hexazecimale, de la 00 la ff. O a patra pereche adaugă opacitatea: 80 înseamnă aproximativ 50%, ff înseamnă opac.

.buton {
  background: #2563eb;      /* opac */
  border-color: #2563eb80;  /* 50% opacitate */
}

RGB folosește valori de la 0 la 255 pentru fiecare canal. rgba() adaugă opacitatea ca număr între 0 și 1.

.overlay {
  background: rgba(0, 0, 0, 0.5);
}

HSL descrie culoarea prin nuanță (0–360 de grade pe roata culorilor), saturație și luminozitate, în procente. E cel mai ușor de modificat de mână: schimbi doar luminozitatea ca să obții o variantă mai deschisă sau mai închisă.

.alerta {
  color: hsl(0, 72%, 51%);
  background: hsla(0, 72%, 51%, 0.1);
}

Sintaxa modernă

CSS acceptă acum valorile despărțite prin spații, iar opacitatea vine după o bară oblică: rgb(37 99 235 / 50%). În această formă, rgb() și hsl() primesc direct opacitatea, deci rgba() și hsla() nu mai sunt necesare. Formele vechi rămân valide și funcționează peste tot.

Opacitatea culorii sau proprietatea opacity?

O culoare cu opacitate face transparentă doar acea culoare, de exemplu doar fundalul. Proprietatea opacity face transparent tot elementul, inclusiv textul și imaginile din el.

.card {
  background: rgba(255, 255, 255, 0.8);  /* doar fundalul e transparent */
}
.card-estompat {
  opacity: 0.8;                          /* tot cardul e transparent */
}

Întrebări frecvente

Cum transform un cod HEX în RGB?

Scrie codul HEX în câmpul de text; tabelul arată imediat varianta RGB și celelalte formate.

Ce înseamnă un cod HEX cu 8 caractere?

Ultimele două caractere sunt opacitatea. #00000080 este negru cu aproximativ 50% opacitate.

Ce format să folosesc?

Toate dau aceeași culoare. HEX este cel mai scurt și cel mai des întâlnit; HSL este cel mai ușor de ajustat; RGB cu opacitate este cel mai clar când lucrezi cu transparență.