HTML Color Codes

Selector HTML de culori pentru formatele RGB HEX HSL

Obțineți ușor coduri de culoare HTML CSS pentru site-ul dvs. folosind selectorul de culori, convertiți formatul culorilor între HEX, RGB, HSL, HSV.

Alegeți o culoare

Introduceți valoarea culorii

Sau folosiți selectorul HTML5

Culoare selectată

Roșu: 0
Verde: 255
Albastru: 255
HUE (Grade): 180
Luminozitate: 0.7
Alpha: 1
Hex: #00ffff
RGB: rgb(0, 255, 255)
HSL: hsl(180, 100%, 50%)
Grup de culori: Cyan
Partajează:
Exemplu de culoare CSS3

<style>
  div {
    color: #00ffff;
    color: rgb(0, 255, 255);
    color: hsl(180, 100%, 50%);
  }
</style>
Stiluri cele mai întunecate și mai luminoase

<style>
  .darken {
    color: rgb(0, 230, 230);
  }
  .lighten {
    color: rgb(25, 255, 255);
  }
</style>

Obțineți culori dintr-o imagine

get pixel color from pic

Alegeți o culoare și creați o paletă

select color and create palette

Ce este un cod de culoare HTML?

Codurile de culoare HTML sunt un mod de a specifica culorile în designul web. Aceste coduri sunt folosite în HTML și CSS pentru a defini culorile elementelor cum ar fi textul, fundalurile, bordurile și altele. Înțelegerea codurilor de culoare HTML este esențială pentru crearea paginilor web atractive și coerente din punct de vedere vizual.

De exemplu, culoarea roșie poate fi identificată folosind următoarele formate:

Tipuri de coduri de culoare HTML


Coduri de culoare Hexazecimale:
  • Cel mai comun mod de a specifica culorile în HTML și CSS este utilizarea codurilor de culoare hexazecimale (hex). Un cod de culoare hexazecimal este o combinație de șase cifre și litere definită de amestecul componentelor sale roșii, verzi și albastre (RGB).
  • Format: #RRGGBB
  • Exemplu: #FF5733 reprezintă o nuanță de portocaliu.
  • Fiecare pereche de cifre corespunde intensității culorilor roșu, verde și albastru, respectiv, pe o scară de la 00 (fără intensitate) la FF (intensitate maximă).
Coduri de culoare RGB:
  • Codurile de culoare RGB definesc culorile pe baza componentelor lor roșii, verzi și albastre.
  • Format: rgb(roșu, verde, albastru)
  • Exemplu: rgb(255, 87, 51) este echivalentul RGB al #FF5733.
  • Fiecare componentă (roșu, verde și albastru) este specificată ca un număr între 0 și 255
Coduri de culoare RGBA:
  • Similar cu RGB, dar include o componentă alfa pentru opacitate.
  • Format: rgba(roșu, verde, albastru, alfa)
  • Exemplu: rgba(255, 87, 51, 0.5) specifică aceeași culoare cu o opacitate de 50%.
Coduri de culoare HSL:
  • HSL reprezintă Nuanță, Saturație și Luminozitate.
  • Format: hsl(nuanță, saturație%, luminozitate%)
  • Exemplu: hsl(9, 100%, 60%) este un alt mod de a reprezenta culoarea #FF5733
  • Nuanța este un grad pe cercul cromatic (de la 0 la 360), saturația este un procent (0% este gri, 100% este culoare maximă), iar luminozitatea este, de asemenea, un procent (0% este negru, 100% este alb).
Coduri de culoare HSLA:
  • Similar cu HSL, dar include o componentă alfa pentru opacitate.
  • Format: hsla(nuanță, saturație%, luminozitate%, alfa)
  • Exemplu: hsla(9, 100%, 60%, 0.5) specifică aceeași culoare cu o opacitate de 50%.
Utilizarea codurilor de culoare HTML:

Codurile de culoare HTML pot fi utilizate în diverse proprietăți CSS pentru a stiliza elementele web. De exemplu:

<style>
    .text-color {
        color: #FF5733;
    }
    .background-color {
        background-color: rgb(255, 87, 51);
    }
    .border-color {
        border: 2px solid hsl(9, 100%, 60%);
    }
</style>
<p class="text-color">This text is orange.</p>
<div class="background-color">This background is orange.</div>
<div class="border-color">This border is orange.</div>

În acest exemplu, textul, fundalul și bordura sunt stilizate folosind diferite tipuri de coduri de culoare HTML, toate reprezentând aceeași nuanță de portocaliu.

Codurile de culoare HTML sunt un aspect fundamental al designului web, permițând dezvoltatorilor să definească și să manipuleze culorile cu precizie. Prin înțelegerea codurilor de culoare hexazecimale, RGB, RGBA, HSL și HSLA, puteți crea pagini web vizual coerente și atrăgătoare care îmbunătățesc experiența utilizatorului.