La Paleta de colors escaneja cada element d'una pàgina web i extreu el conjunt complet de colors utilitzats — des del text i els fons fins a les vores, les ombres i els accents. Els colors es mostren com a mostres visuals ordenades per freqüència (els més utilitzats primer), cadascuna mostrant el seu valor HEX i el recompte d'ús. Fes clic a qualsevol mostra per copiar-la, o exporta la paleta sencera com a llista de codis de color.
Tot lloc web ben dissenyat té una paleta de colors coherent — normalment entre 3 i 8 colors primaris més alguns neutres. La Paleta de colors extreu aquesta paleta automàticament escanenat els valors calculats de color, color de fons, color de vora i ombra de cada element. El resultat és una col·lecció de cada color de la pàgina ordenada per freqüència, cosa que t'ofereix una imatge completa del sistema de colors del lloc. Els colors dominants (el color principal de la marca, el color de fons, el color del text) apareixen primer amb recomptes d'ús elevats. Els colors d'accent i els valors puntuals apareixen més avall. Això és incalculable per a la recerca de disseny: visita qualsevol lloc web i extreu la seva paleta de colors exacta en qüestió de segons. També és útil per auditar el teu propi lloc: hi ha colors perduts que no pertanyen al teu sistema de disseny? Estàs utilitzant 5 tons de gris lleugerament diferents quan l'especificació de disseny només en defineix 3? La Paleta de colors fa que tot l'ús del color sigui visible i quantificable.
Escaneja cada element visible de la pàgina i extreu colors de les propietats calculades: color, background-color, border-color, box-shadow, outline-color i text-decoration-color. Es capturen tots els colors utilitzats a la pàgina.
Els colors s'ordenen pel nombre d'usos — el color més utilitzat apareix primer. Els colors dominants de la marca i els fons pugen a la part superior, mentre que els colors d'accent puntuals apareixen al final. Mira a l'instant els colors primaris, secundaris i d'accent de la pàgina.
Cada color es renderitza com una mostra visual gran amb el seu codi HEX i el nombre d'usos que es mostra a sota. Les mostres són prou grans com per distingir diferències subtils de matisos (com #333 vs #2a2a2a).
Fes clic a qualsevol mostra de color per copiar el seu valor HEX al porta-retalls immediatament. No cal obrir cap panell de color ni cap diàleg secundari — un sol clic, copiat i llest.
Fes clic a "Exporta-ho tot" per copiar la paleta sencera com a llista formatada de codis de color HEX. Enganxa-la a una eina de disseny, a un fitxer de variables CSS o a la documentació de colors. La llista manté l'ordre de classificació per freqüència.
Els colors es normalitzen (les representacions rgb i hex del mateix color es fusionen) i es dedupliquen. La paleta mostra només colors únics, amb recomptes d'ús combinats per a les representacions duplicades.
Visita llocs web amb esquemes de colors preciosos i extreu-ne la paleta exacta. Utilitza els colors com a punt de partida per al teu propi disseny — o simplement documenta quines combinacions de colors funcionen bé juntes.
Executa la Paleta de colors al teu propi lloc per verificar la coherència del color de la marca. Hi ha 4 blaus lleugerament diferents on només n'hi hauria d'haver 1? S'estan introduint colors que no són de la marca? L'ordre per freqüència fa que les inconsistències siguin evidents.
Exporta la paleta i converteix-la en propietats personalitzades de CSS (--color-primary, --color-secondary, etc.). La sortida ordenada per freqüència et diu quins colors mereixen els rols de primari, secundari i d'accent.
Extreu paletes de colors dels llocs web de la competència per entendre el seu posicionament de marca. Colors càlids vs colors freds, contrast alt vs colors suaus — la paleta revela eleccions de disseny intencionades.
Mira tots els colors de text juntament amb els colors de fons. Hi ha combinacions de text i fons amb un contrast massa baix? La paleta t'ofereix el conjunt complet de colors per comprovar-los amb els requisits de contrast de la WCAG.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona de la Paleta de colors. L'eina escaneja cada element de la pàgina i extreu tots els valors de color.
Apareix una quadrícula de mostres de colors, ordenada per freqüència d'ús. Els colors més utilitzats es troben a la part superior. Cada mostra mostra el codi HEX i el nombre d'elements que utilitzen aquell color.
Fes clic a qualsevol mostra per copiar el seu valor HEX al porta-retalls. Apareixerà una breu confirmació.
Fes clic a "Exporta-ho tot" per copiar cada color com a llista formatada. Enganxa-la al teu fitxer de variables CSS, a una eina de disseny o a la documentació.
Navega per diferents pàgines del mateix lloc i extreu-ne les paletes per verificar la coherència del color en tot el lloc.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.
