Vista prèvia de colors en disseny real
Visualitzeu com es veuen els colors triats en un disseny i una interfície reals amb una previsualització en viu abans d'aplicar-los al vostre projecte.
Paleta
Vista prèvia en context
Targeta hero
Visualitza els teus colors aplicats a diferents components d’interfície.
Notificació
Missatge d’èxit amb color d’accent
Insígnies de color
Gradient preview
Visualitzeu com es veuen els colors triats en un disseny i una interfície reals amb una previsualització en viu abans d'aplicar-los al vostre projecte.
Vista prèvia de colors en disseny real mostra només els controls i resultats corresponents a la seva funció. Les opcions disponibles depenen de l’eina i de l’entrada.
Formats compatibles
Com funciona
Pas 1
Obriu Vista prèvia de colors en disseny real i prepareu l’entrada que demana la interfície
Pas 2
Ajusteu els controls visibles segons el resultat que necessiteu
Pas 3
Reviseu el resultat abans de copiar-lo, exportar-lo o reutilitzar-lo
Errors comuns a evitar
- No doneu per compatible un format o una opció que no aparegui a la interfície.
- Comproveu els valors abans de reutilitzar-los en una identitat, interfície o fitxer final.
- Si el resultat s’utilitza en text o UI, reviseu també el contrast.
Consells pro
- Conserveu el valor d’origen amb el resultat per comparar variants.
- Feu servir els formats que l’eina mostra realment en lloc d’estimar conversions.
- En mòbil i tauleta, permeteu que textos i controls saltin de línia.
Tractament de dades
El tractament depèn de la funció utilitzada. El consentiment, l’analítica i les funcions de compte del lloc són separats de l’operació de color.
Què fa aquesta eina
Visualitzeu com es veuen els colors triats en un disseny i una interfície reals amb una previsualització en viu abans d'aplicar-los al vostre projecte. Vista prèvia de colors en disseny real es concentra en aquesta tasca i no pressuposa funcions que no es mostren a la interfície. Utilitzeu els controls disponibles per obtenir el resultat que necessiteu i comproveu els valors mostrats abans de portar-los a una altra eina, full d’estils, fitxer de disseny o document.
Preparar una entrada adequada
Comenceu amb l’entrada que demana Vista prèvia de colors en disseny real: color, valor, imatge o ajust segons la pantalla. Els formats indicats en aquesta pàgina són HEX, RGB, HSL. Si un format o una opció no apareix a la interfície, no el considereu compatible amb aquesta funció concreta.
Llegir i verificar el resultat
Llegiu el resultat dins del context de l’operació realitzada. Compareu-lo amb el valor d’origen i reviseu els controls que han influït en el càlcul. Per a treballs visuals importants, comproveu també el resultat a la interfície real on s’utilitzarà i no només a partir del codi.
Ús en mòbil i tauleta
Vista prèvia de colors en disseny real utilitza el disseny responsive del lloc. Títols, subtítols, breadcrumbs i controls poden saltar de línia en pantalles estretes per evitar tallar traduccions llargues. Tot i així, reviseu el resultat final al dispositiu i al context on el fareu servir.
Reutilitzar el resultat al projecte
Després de verificar el resultat, utilitzeu només les accions que Vista prèvia de colors en disseny real ofereix realment, com copiar o exportar quan estiguin disponibles. Conserveu el valor d’origen si heu de reproduir l’ajust i, en interfícies, documenteu també el paper del color i el contrast necessari.
Eines relacionades
Guies i tutorials
Aprèn a utilitzar les nostres eines amb les nostres guies detallades.
color-preview: guia pràctica de conversion
Guia localitzada per utilitzar color-preview, entendre bones pràctiques de conversion i evitar errors comuns.
color-preview: guia pràctica de export
Guia localitzada per utilitzar color-preview, entendre bones pràctiques de export i evitar errors comuns.
color-preview: guia pràctica de export
Guia localitzada per utilitzar color-preview, entendre bones pràctiques de export i evitar errors comuns.
Preguntes freqüents
Aprèn a utilitzar les nostres eines amb les nostres guies detallades.