Selectorul de Culori oferă un instrument eyedropper precis la nivel de pixel pentru selectarea culorilor din orice element al unei pagini web — text, fundal, imagini, gradiente sau orice pixel vizibil. Obține valoarea exactă a culorii simultan în formatele HEX, RGB și HSL, cu o previzualizare mărită a pixelilor pentru targeting precis. Culorile selectate anterior sunt salvate într-o bandă de istoric pentru acces rapid.
Extragerea valorilor exacte ale culorilor dintr-o pagină web este o sarcină comună — potrivirea unei culori de brand, referențierea unui design sau verificarea unei nuanțe utilizate pe site-ul unui competitor. DevTools ale browserului arată culorile în panoul Styles, dar numai pentru elementele cu proprietăți CSS de culoare explicite — nu pentru imagini, gradiente sau culori moștenite. Eyedropper-ul Selector de Culori funcționează la nivel de pixel — citește culoarea randată efectivă a oricărui pixel de sub cursor, indiferent de cum a ajuns acolo. Fă clic pe un cer albastru dintr-o imagine hero, un punct de mijloc al gradientului sau un overlay semi-transparent și obține valoarea exactă a culorii compozite. Cercul de previzualizare mărită arată o vizualizare mărită a pixelilor din jur, astfel că poți targeta exact pixelul dorit. Toate cele trei formate de ieșire (HEX, RGB, HSL) sunt afișate simultan — fă clic pe orice format pentru a copia. Ultimele tale selecții sunt salvate într-o bandă de istoric al culorilor în partea de jos, astfel că poți reveni ușor la o culoare selectată anterior.
O previzualizare circulară mărită arată pixelii zoomați în jurul cursorului, cu targeting crosshair pentru selecția exactă a pixelilor. Selectează culori din text, fundal, imagini, gradiente, SVG-uri sau orice pixel vizibil de pe pagină.
Fiecare culoare selectată este afișată în toate cele trei formate deodată: HEX (#7c3aed), RGB (rgb(124, 58, 237)) și HSL (hsl(262, 83%, 58%)). Fără comutare sau conversie — toate formatele sunt disponibile imediat.
Fă clic pe orice rând de format (HEX, RGB sau HSL) pentru a copia acea valoare specifică în clipboard instant. O animație scurtă de confirmare apare. Lipește direct în CSS-ul tău, instrumentul de design sau specificația de culoare.
Culorile selectate recent sunt salvate într-o bandă de istoric vizual care arată mostre de culoare. Fă clic pe orice mostră pentru a re-selecta acea culoare și a vedea din nou valorile sale. Istoricul persistă în timpul sesiunii — selectează culori din mai multe pagini.
Culoarea selectată este afișată ca o mostră mare deasupra valorilor de format, facilitând vizualizarea și verificarea culorii. Mostra este suficient de mare pentru a arăta nuanțe subtile care ar putea arăta identic la dimensiuni mai mici.
Selectează culori din orice pixel vizibil: culori CSS, gradiente CSS, imagini (PNG, JPG, SVG), elemente canvas, cadre video, overlay-uri semi-transparente (selectând culoarea compozită) și chiar iframe-uri. Dacă îl poți vedea, îl poți selecta.
Selectează culoarea exactă de brand de pe site-ul unei companii pentru a te asigura că designul sau conținutul tău utilizează nuanța corectă. Obține valoarea precisă HEX în loc să o estimezi sau să cauți prin ghidurile de brand.
Selectează culori direct din imagini hero, fotografii de produse sau ilustrații. Extrage o culoare dominantă dintr-o fotografie pentru a o utiliza ca fundal complementar în designul tău.
Specificația de design spune că butonul ar trebui să fie #7c3aed. Selectează culoarea din butonul implementat pentru a verifica că se potrivește. Prinde diferențele subtile de culoare care sunt invizibile cu ochiul liber.
Navighează site-uri de inspirație pentru design și selectează culori care îți atrag atenția. Banda de istoric construiește o paletă de culori pe care le-ai selectat în cursul sesiunii — folosește-o ca punct de plecare pentru propria schemă de culori.
Selectează culori în diferite puncte de-a lungul unui gradient CSS pentru a vedea culoarea exactă la fiecare poziție. Util pentru replicarea gradientelor sau înțelegerea modului în care se îmbină opririle gradientului.
Deschide floating dock-ul DevSuite Pro și fă clic pe iconița Selector de Culori. Cursorul se schimbă într-un eyedropper cu un cerc de previzualizare mărită.
Mișcă cursorul peste pagină. Previzualizarea mărită arată o vizualizare zoomată a pixelilor din jurul cursorului, cu un crosshair indicând pixelul exact țintit.
Fă clic oriunde pe pagină pentru a selecta culoarea la acel pixel. Mostra de culoare, HEX, RGB și valorile HSL se actualizează toate instant.
Fă clic pe rândul HEX, RGB sau HSL pentru a copia acea valoare în clipboard. O confirmare apare scurt.
Continuă să faci clic pentru a selecta mai multe culori. Fiecare selecție este adăugată în banda de istoric. Fă clic pe orice mostră din istoric pentru a reaminti acea culoare.
Instalează DevSuite Pro gratuit și deblochează peste 39 de instrumente pentru dezvoltatori în browserul tău.
