Värviplett skannib iga elementi veebilehel ja ekstraheerib täieliku kasutatud värvide kogumi — tekstist ja taustadest kuni ääristeni, varjudeni ja rõhuvärvideni. Värvid kuvatakse visuaalsete kangastena, sorteerituna sageduse järgi (enim kasutatud esimesena), igaüks näitab oma HEX väärtust ja kasutusarvu. Klõpsa mis tahes kangast kopeerimiseks või ekspordi kogu plett värvikoodide loendina.
Igal hästi disainitud veebisaidil on järjepidev värviplett — tavaliselt 3–8 põhivärvi lisaks mõnele neutraalsele. Värviplett ekstraheerib selle pleti automaatselt, skannides iga elemendi arvutatud color, background-color, border-color ja box-shadow väärtusi. Tulemuseks on sageduse järgi sorteeritud kogu kõigi lehe värvide kogum, andes sulle täieliku pildi saidi värvisüsteemist. Domineerivad värvid (peamine brändi värv, taustavärv, tekstivärv) ilmuvad esimesena kõrgete kasutusarvudega. Rõhuvärvid ja ühekordsel kasutusel väärtused ilmuvad allpool. See on hindamatu disainiuuringutel — külasta mis tahes veebisaiti ja ekstraheeri selle täpne värviplett sekunditega. See on kasulik ka oma saidi auditeerimisel: kas on eksleid värve, mis ei kuulu sinu disainisüsteemi? Kas kasutad 5 veidi erinevat hallide varjundit, kui disainispetsifikatsioon määratleb ainult 3? Värviplett muudab kogu värvikasutuse nähtavaks ja loendatavaks.
Skannib iga nähtava elemendi lehel ja ekstraheerib värvid arvutatud omadustest: color, background-color, border-color, box-shadow color, outline-color ja text-decoration-color. Iga lehel kasutatud värv jäädvustatakse.
Värvid sorteeritakse kasutusarvu järgi — enim kasutatud värv ilmub esimesena. Domineerivad brändi värvid ja taustad tõusevad üles, samas kui ühekordsel kasutusel rõhuvärvid ilmuvad viimasena. Näe koheselt lehe esmased, teisesed ja rõhuvärvid.
Iga värv renderdatakse suure visuaalse kangana koos selle HEX koodiga ja allpool kuvatud kasutusarvuga. Kangad on piisavalt suured, et eristada peeneid varjundite erinevusi (nt #333 vs #2a2a2a).
Klõpsa mis tahes värvikangas, et kopeerida selle HEX väärtus kohe lõikelauale. Pole vaja avada värvipaneeli ega teisejärgulist dialoogi — üks klõps, kopeeritud, tehtud.
Klõpsa "Ekspordi Kõik", et kopeerida kogu plett vormindatud HEX värvikoodide loendina. Kleepi disainitööriista, CSS muutujate faili või värvide dokumentatsiooni. Loend säilitab sageduse sorteerimise järjekorra.
Värvid normaliseeritakse (sama värvi rgb ja hex esitused ühendatakse) ja duplikaadid eemaldatakse. Plett näitab ainult unikaalseid värve koos kombineeritud kasutusarvudega duplikaatide esituste jaoks.
Külasta veebisaite kaunite värvishemeeemadega ja ekstraheeri nende täpne plett. Kasuta värve lähtekohana oma disainile — või lihtsalt dokumenteeri, millised värvide kombinatsioonid hästi koos toimivad.
Käivita Värviplett oma saidil, et kontrollida brändi värvide järjepidevust. Kas on 4 veidi erinevat sinist, kus peaks olema 1? Kas brändiväline värvid hiilimad sisse? Sageduse sortimine muudab ebajärjepidevused ilmseks.
Ekspordi plett ja teisenda see CSS kohandatud omadusteks (--color-primary, --color-secondary jne). Sageduse järgi sorteeritud väljund ütleb sulle, millised värvid väärivad esmast, teisest ja rõhurolli.
Ekstraheeri värviplette konkurentide veebisaitidelt, et mõista nende brändi positsioneerimist. Soojad värvid vs jahedaid värve, kõrge kontrastsus vs summutatud — plett paljastab tahtlikud disainivalikud.
Vaata kõiki teksti värve koos taustavärvidega. Kas mõned teksti-tausta kombinatsioonid on liiga madala kontrastsusega? Plett annab sulle täieliku värvide kogumi kontrollimiseks WCAG kontrastsuse nõuete suhtes.
Ava DevSuite Pro ujuv dokk ja klõpsa Värvipleti ikoonil. Tööriist skannib iga elementi lehel ja ekstraheerib kõik värviväärtused.
Ilmub värvikangaste võrgustik, sorteerituna kasutussageduse järgi. Enim kasutatud värvid on üleval. Iga kangas näitab HEX koodi ja seda värvi kasutavate elementide arvu.
Klõpsa mis tahes kangast, et kopeerida selle HEX väärtus lõikelauale. Ilmub lühike kinnitus.
Klõpsa "Ekspordi Kõik", et kopeerida iga värv vormindatud loendina. Kleepi oma CSS muutujate faili, disainitööriista või dokumentatsiooni.
Navigeeri sama saidi erinevatele lehtedele ja ekstraheeri plette, et kontrollida värvi järjepidevust kogu saidil.
Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.
