Color Picker pruža pixel-precizan eyedropper alat za odabir boja s bilo kojeg elementa na web stranici — teksta, pozadina, slika, gradijenata ili bilo kojeg vidljivog pixela. Dobijte točnu vrijednost boje istovremeno u HEX, RGB i HSL formatima, uz uvećani pregled pixela za precizno ciljanje. Prethodno odabrane boje spremaju se u traku povijesti za brz ponovni pristup.
Izvlačenje točnih vrijednosti boja s web stranice uobičajen je zadatak — podudaranje boje branda, referiranje dizajna ili provjera nijanse korištene na stranici konkurenta. DevTools preglednika prikazuju boje u panelu Stilovi, ali samo za elemente s eksplicitnim CSS svojstvima boja — ne za slike, gradijente ili naslijeđene boje. Eyedropper Color Pickera radi na razini pixela — čita stvarnu prikazanu boju bilo kojeg pixela pod kursorom, bez obzira na to kako je ta boja nastala. Kliknite na plavo nebo u hero slici, središnju točku gradijenta ili polu-prozirni overlay i dobijte točnu kompozitnu vrijednost boje. Uvećani krug pregleda prikazuje zumirani pogled na okolne pixele kako biste mogli ciljati točno željeni pixel. Sva tri izlazna formata (HEX, RGB, HSL) prikazana su istovremeno — kliknite bilo koji format za kopiranje. Vaših nekoliko posljednjih odabira sprema se u traku povijesti boja pri dnu, tako da se lako možete vratiti na prethodno odabranu boju.
Uvećani kružni pregled prikazuje zumiranje pixela oko kursora, s crosshair ciljanjem za točan odabir pixela. Odaberite boje s teksta, pozadina, slika, gradijenata, SVG-ova ili bilo kojeg vidljivog pixela na stranici.
Svaka odabrana boja prikazuje se u sva tri formata odjednom: HEX (#7c3aed), RGB (rgb(124, 58, 237)) i HSL (hsl(262, 83%, 58%)). Bez prebacivanja ili pretvaranja — svi su formati odmah dostupni.
Kliknite bilo koji redak formata (HEX, RGB ili HSL) da biste tu specifičnu vrijednost odmah kopirali u međuspremnik. Kratka animacija "Kopirano!" potvrđuje radnju. Zalijepite izravno u vaš CSS, alat za dizajn ili specifikaciju boja.
Nedavno odabrane boje spremaju se u vizualnu traku povijesti koja prikazuje color swatches. Kliknite bilo koji swatch za ponovni odabir te boje i prikaz njenih vrijednosti. Povijest se zadržava tijekom vaše sesije — odaberite boje s više stranica.
Odabrana boja prikazuje se kao veliki swatch iznad vrijednosti formata, što olakšava pregled i provjeru boje. Swatch je dovoljno velik da prikaže suptilne nijanse koje mogu izgledati identično pri manjim veličinama.
Odabire boje s bilo kojeg vidljivog pixela: CSS boje, CSS gradijenti, slike (PNG, JPG, SVG), canvas elementi, video okviri, polu-prozirni overlayevi (odabir kompozitne boje), pa čak i iframeovi. Ako to možete vidjeti, možete i odabrati.
Odaberite točnu boju branda s web stranice tvrtke kako biste osigurali da vaš dizajn ili sadržaj koristi ispravnu nijansu. Dobijte preciznu HEX vrijednost umjesto procjene na oko ili pretraživanja kroz smjernice branda.
Odaberite boje izravno iz hero slika, fotografija proizvoda ili ilustracija. Izvucite dominantnu boju iz fotografije kako biste je koristili kao komplementarnu pozadinu u vašem dizajnu.
Specifikacija dizajna kaže da gumb treba biti #7c3aed. Odaberite boju s implementiranog gumba kako biste provjerili odgovara li. Otkriva suptilne razlike u bojama koje su nevidljive golim okom.
Pregledavajte stranice s inspiracijom za dizajn i odabirite boje koje vam privuku pažnju. Traka povijesti gradi paletu boja koje ste odabrali tijekom sesije — koristite je kao polaznu točku za vlastitu shemu boja.
Odaberite boje u različitim točkama duž CSS gradijenta kako biste vidjeli točnu boju na svakoj poziciji. Korisno za repliciranje gradijenata ili razumijevanje kako se miješaju gradijentni prijelazi.
Otvorite plutajući dock DevSuite Pro i kliknite ikonu Color Pickera. Kursor se mijenja u eyedropper s uvećanim krugom pregleda.
Pomičite kursor po stranici. Uvećani pregled prikazuje zumirani pogled na pixele oko kursora, s crosshairom koji označava točni ciljni pixel.
Kliknite bilo gdje na stranici da biste odabrali boju tog pixela. Color swatch, HEX, RGB i HSL vrijednosti odmah se ažuriraju.
Kliknite redak HEX, RGB ili HSL da biste tu vrijednost kopirali u međuspremnik. Kratka potvrda "Kopirano!" pojavljuje se na trenutak.
Nastavite klikati za odabir više boja. Svaki odabir dodaje se u traku povijesti. Kliknite bilo koji swatch iz povijesti za podsjetnik na tu boju.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.
