`<input type=color>` în HTML

Selectorul nativ de culoare: utilizatorul alege o culoare dintr-o paletă, iar valoarea trimisă este un cod hexazecimal.

Sintaxă tag

<input type="color" name="culoare" value="#2563eb">

Ce face `<input type=color>`

<input type="color"> afișează un mic dreptunghi colorat. La clic, browserul deschide selectorul de culoare al sistemului de operare, unde utilizatorul alege nuanța dorită.

Valoarea este mereu un cod hexazecimal cu 7 caractere, scris cu litere mici: #ff8800. Valoarea implicită este #000000 (negru). În value trebuie folosit exact acest format; numele de culori (red) sau codurile scurte (#f80) nu sunt acceptate și câmpul revine la negru.

Pentru a schimba culoarea pe pagină în timp ce utilizatorul alege, folosește evenimentul input; evenimentul change apare doar când selectorul se închide.

Atribute

Atribut	Descriere
`value`	Culoarea inițială, în format `#rrggbb`. Implicit `#000000`.
`name`	Numele sub care codul culorii ajunge la server.
`list`	Id-ul unui `<datalist>` cu culori sugerate (afișate doar de unele browsere).

Exemple

Exemplul 1: Culoarea temei unui profil

Câmpul pornește de la albastru, iar serverul primește codul ales.

<form action="/profil" method="post">
  <label for="tema">Culoarea profilului</label>
  <input type="color" id="tema" name="tema" value="#2563eb">
  <button>Salvează</button>
</form>

Ce afișează browserul

Un dreptunghi albastru lângă eticheta „Culoarea profilului”.
La clic se deschide paleta sistemului; după alegere, serverul primește tema=#16a34a (de exemplu).

Exemplul 2: Previzualizare live a culorii

Evenimentul input schimbă fundalul cardului în timp ce utilizatorul se plimbă prin paletă.

<input type="color" id="fundal" value="#fef3c7"
       oninput="card.style.background = this.value">
<div id="card" style="background:#fef3c7; padding:1rem">Felicitare pentru Ana</div>