CodeKitHubCe este acest instrument?
Un selector de culoare transformă o alegere vizuală — această nuanță de albastru, acel pixel exact dintr-un logo — în codurile numerice pe care software-ul le înțelege. Aceeași culoare are mai multe notații echivalente: HEX (#3b82f6) domină CSS și transferurile de design, RGB (59, 130, 246) se potrivește cu modul în care ecranele și codul reprezintă culoarea, iar HSL (217°, 91%, 60%) descrie nuanța, saturația și luminozitatea într-un mod pe care oamenii îl pot raționa.
A doua jumătate a instrumentului este o pipetă de imagine. Încarcă o captură de ecran, un logo sau o fotografie și apasă orice punct pentru a eșantiona culoarea de sub cursor — modul standard de a răspunde la „ce culoare exactă este aceasta?”. Acolo unde browserul suportă API-ul EyeDropper, este folosită lupa mărită nativă; în alte browsere, instrumentul citește valoarea pixelului dintr-o copie canvas a imaginii. În ambele cazuri, procesarea este locală: imaginea nu este niciodată încărcată.
De ce să-l folosești?
- Trei formate simultan: fiecare culoare aleasă este afișată ca HEX, RGB și HSL în același timp, fiecare cu un buton de copiere dintr-un clic — fără pas separat de conversie.
- Alege dintr-o imagine: încarcă orice poză și apasă pentru a eșantiona culoarea exactă a pixelului — ideal pentru extragerea culorilor de brand dintr-un logo sau potrivirea unei culori văzute într-o captură de ecran.
- Folosește EyeDropper-ul nativ al browserului cu lupă, atunci când este disponibil, și revine la citirea precisă a pixelilor din canvas oriunde altundeva.
- O mostră de previzualizare live arată culoarea curentă dintr-o privire, astfel încât să verifici alegerea înainte de a copia.
- Gratuit, instant și complet local: culorile sunt calculate, iar imaginile sunt citite în browserul tău — nimic nu este încărcat, stocat sau înregistrat.
Cum se folosește
- Alege o culoare cu câmpul de culoare, sau lipește/editează direct o valoare.
- Pentru a eșantiona dintr-o poză, încarcă o imagine și apasă punctul a cărui culoare o dorești.
- Citește valorile HEX, RGB și HSL, afișate împreună cu o mostră de previzualizare live.
- Apasă butonul de copiere de lângă formatul de care ai nevoie — HEX pentru CSS, RGB sau HSL pentru cod.
Exemplu
Intrare
Apasă pe zona albastră a unui logo încărcatRezultat
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Toate cele trei linii descriu culoarea identică. Folosește HEX în foi de stiluri și instrumente de design, RGB unde codul așteaptă valori de canale, și HSL când vrei să derivezi variante mai deschise sau mai închise schimbând doar ultimul număr.
Ce format de culoare pentru ce sarcină
CSS-ul modern acceptă toate cele trei oriunde este permisă o culoare, deci alegerea ține de flux de lucru, nu de compatibilitate. Echipele de obicei standardizează pe HEX în token-urile de design, apoi folosesc HSL în timp ce explorează variații — schimbă luminozitatea cu 10–15 puncte pentru a obține o stare de hover utilizabilă fără a modifica nuanța.
| Format | Exemplu | Cel mai bun pentru |
|---|---|---|
| HEX | #3b82f6 | CSS, instrumente de design, partajarea culorilor în chat și specificații |
| RGB | rgb(59, 130, 246) | Cod care manipulează canale, desenare pe canvas, transparență rgba() |
| HSL | hsl(217, 91%, 60%) | Crearea de variante mai deschise/mai închise/hover, construirea de palete |
De la culoarea aleasă la CSS-ul finit
Eșantionarea unei culori este de obicei primul pas al unei sarcini de stilizare. Dacă ai nevoie de aceeași culoare în alte notații — CMYK pentru tipar sau o valoare OKLCH pentru CSS cu gamă largă — Convertorul de culoare continuă de unde se oprește acest selector.
Culoarea aleasă merge adesea direct într-un efect vizual: Generatorul Box Shadow ia o valoare HEX pentru umbre realiste, iar cardurile rotunjite construite cu Generatorul Border Radius completează aspectul.
→ Convertor de culoare · Generator Box Shadow · Generator Border Radius
Întrebări frecvente
Care este diferența dintre HEX, RGB și HSL?
Sunt trei notații pentru același model de culoare. HEX comprimă canalele roșu, verde și albastru în șase cifre hexazecimale (#3b82f6) și este forma cea mai comună în CSS și instrumente de design. RGB listează aceleași trei canale ca numere zecimale de la 0 la 255. HSL reexprimă culoarea ca nuanță (0–360°), saturație și luminozitate — mult mai intuitiv când vrei „aceeași culoare, dar mai deschisă”. Conversia între ele nu schimbă niciodată culoarea.
Cum funcționează alegerea unei culori dintr-o imagine?
Imaginea încărcată este desenată pe un canvas invizibil în browserul tău. Când apeși, instrumentul citește valorile roșu, verde și albastru ale pixelului din acea poziție exactă și le convertește în HEX, RGB și HSL. În browserele care suportă API-ul EyeDropper (Chrome și Edge pe desktop), se deschide în schimb o lupă mărită nativă, astfel încât să alegi cu precizie de pixel oriunde pe ecran.
Este imaginea mea încărcată undeva?
Nu. Imaginea este deschisă direct de browserul tău și citită local dintr-un canvas; niciun fișier și nicio dată de culoare nu sunt niciodată transmise sau stocate. Poți încărca pagina, te poți deconecta de la internet, iar atât selectorul, cât și pipeta de imagine continuă să funcționeze — ceea ce îl face sigur pentru design-uri nelansate și capturi de ecran interne.
De ce culoarea aleasă nu se potrivește exact cu ce văd pe ecran?
Două motive comune. Anti-aliasing: pixelii de la marginile textului și formelor sunt amestecați cu fundalul, deci apăsarea unui pixel greșit dă o culoare intermediară — eșantionează în schimb din mijlocul solid al unei zone. Gestionarea culorii: fișierele JPG/PNG cu profiluri de culoare neobișnuite se pot afișa ușor diferit pe diverse ecrane; instrumentul raportează valoarea pixelului așa cum este stocată în fișier, care este valoarea de care ai nevoie pentru munca de design.
Ce format ar trebui să copiez pentru CSS?
HEX este alegerea implicită cea mai sigură — fiecare browser și instrument îl acceptă. Folosește HSL când plănuiești să creezi variante pentru hover sau mod întunecat, pentru că ajustarea doar a componentei de luminozitate păstrează nuanța și saturația consistente. RGB este util în principal când codul construiește culori din canale numerice, sau când adaugi transparență, unde rgba(59, 130, 246, 0.5) se citește mai clar decât un HEX de opt cifre.