Color Palette skenira svaki element na web stranici i izvlači kompletan skup korištenih boja — od teksta i pozadina do rubova, sjena i naglasaka. Boje se prikazuju kao vizualni color swatches sortirani prema učestalosti (najkorištenije prve), svaki s prikazom HEX vrijednosti i broja upotreba. Kliknite bilo koji swatch za kopiranje ili izvezite cijelu paletu kao popis kodova boja.
Svaka dobro dizajnirana web stranica ima dosljednu paletu boja — obično 3–8 primarnih boja plus neke neutralne. Color Palette automatski izvlači tu paletu skeniranjem izračunanih vrijednosti color, background-color, border-color i box-shadow svakog elementa. Rezultat je zbirka svih boja na stranici sortirana prema učestalosti, koja vam daje potpunu sliku sustava boja stranice. Dominantne boje (primarna boja branda, boja pozadine, boja teksta) pojavljuju se prve s visokim brojem upotreba. Naglasne boje i jednokratne vrijednosti pojavljuju se niže. Ovo je neprocjenjivo za istraživanje dizajna — posjetite bilo koju web stranicu i izvucite njenu točnu paletu boja u sekundi. Korisno je i za pregled vlastite stranice: postoje li zabludjele boje koje ne pripadaju vašem sustavu dizajna? Koristite li 5 malo različitih nijansi sive dok specifikacija dizajna definira samo 3? Color Palette čini cjelokupnu upotrebu boja vidljivom i mjerljivom.
Skenira svaki vidljivi element na stranici i izvlači boje iz izračunanih svojstava: color, background-color, border-color, boju box-shadowa, outline-color i text-decoration-color. Svaka boja korištena na stranici biva zabilježena.
Boje su sortirane prema broju upotreba — najkorištenija boja pojavljuje se prva. Dominantne boje branda i pozadine dolaze na vrh, dok se jednokratne naglasne boje pojavljuju zadnje. Odmah vidite primarne, sekundarne i naglasne boje stranice.
Svaka boja prikazuje se kao veliki vizualni swatch s HEX kodom i brojem upotreba prikazanim ispod. Swatchevi su dovoljno veliki za razlikovanje suptilnih razlika u nijansama (poput #333 naspram #2a2a2a).
Kliknite bilo koji color swatch da biste odmah kopirali njegovu HEX vrijednost u međuspremnik. Nema potrebe za otvaranjem panela boja ili sekundarnog dijaloga — jedan klik, kopirano, gotovo.
Kliknite "Izvezi sve" da biste kopirali cijelu paletu kao formatiranu listu HEX kodova boja. Zalijepite u alat za dizajn, datoteku CSS varijabli ili dokumentaciju boja. Popis zadržava redoslijed sortiranja prema učestalosti.
Boje su normalizirane (rgb i hex prikazi iste boje spajaju se) i deduplicirane. Paleta prikazuje samo jedinstvene boje, s kombiniranim brojem upotreba za duplicirane prikaze.
Posjetite web stranice s lijepim shemama boja i izvucite njihovu točnu paletu. Koristite boje kao polaznu točku za vlastiti dizajn — ili jednostavno dokumentirajte koje kombinacije boja dobro funkcioniraju zajedno.
Pokrenite Color Palette na vlastitoj stranici kako biste provjerili dosljednost boja branda. Postoje li 4 malo različite nijanse plave gdje bi trebala biti samo 1? Uvlače li se boje izvan branda? Sortiranje prema učestalosti čini nedosljednosti očitima.
Izvezite paletu i pretvorite je u CSS prilagođena svojstva (--color-primary, --color-secondary, itd.). Izlaz sortiran prema učestalosti govori vam koje boje zaslužuju primarne, sekundarne i naglasne uloge.
Izvucite palete boja s web stranica konkurenata kako biste razumjeli pozicioniranje njihovog branda. Tople boje nasuprot hladnima, visoki kontrast nasuprot prigušenima — paleta otkriva namjerne dizajnerske odluke.
Pogledajte sve boje teksta uz boje pozadina. Ima li kombinacija tekst-pozadina s prenisko kontrastom? Paleta vam daje potpuni skup boja za provjeru prema WCAG zahtjevima kontrasta.
Otvorite plutajući dock DevSuite Pro i kliknite ikonu Color Palette. Alat skenira svaki element na stranici i izvlači sve vrijednosti boja.
Pojavljuje se mreža color swatcheva sortiranih prema učestalosti upotrebe. Najkorištenije boje su na vrhu. Svaki swatch prikazuje HEX kod i broj elemenata koji koriste tu boju.
Kliknite bilo koji swatch da biste kopirali njegovu HEX vrijednost u međuspremnik. Pojavljuje se kratka potvrda.
Kliknite "Izvezi sve" da biste kopirali svaku boju kao formatiranu listu. Zalijepite u datoteku CSS varijabli, alat za dizajn ili dokumentaciju.
Navigirajte na različite stranice iste web lokacije i izvlačite palete kako biste provjerili dosljednost boja na cijeloj stranici.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.
