Vista previa de UI
Previsualiza tu paleta en componentes de UI realistas como botones, tarjetas y formularios. Observa cómo combinan tus tonos HEX y RGB antes de crear la interfaz.
Título de la tarjeta
Este es un contenido de ejemplo para previsualizar tus colores en un contexto real.
Bienvenido
Notificación de ejemplo
Previsualiza tu paleta en componentes de UI realistas como botones, tarjetas y formularios. Observa cómo combinan tus tonos HEX y RGB antes de crear la interfaz.
Vista previa de UI muestra únicamente los controles y resultados que corresponden a su función. Las opciones disponibles dependen de la herramienta y de la entrada.
Formatos compatibles
Cómo funciona
Paso 1
Abre Vista previa de UI y prepara la entrada solicitada por la interfaz
Paso 2
Ajusta los controles visibles según el resultado que buscas
Paso 3
Revisa el resultado antes de copiarlo, exportarlo o reutilizarlo
Errores comunes a evitar
- No des por compatible un formato u opción que no aparezca en la interfaz.
- Comprueba los valores antes de reutilizarlos en una identidad visual, interfaz o archivo final.
- Si el resultado se usa en texto o componentes de interfaz, revisa también el contraste.
Consejos de profesionales
- Conserva el valor de origen junto al resultado para poder comparar variantes.
- Usa los formatos que muestra realmente la herramienta en lugar de estimar conversiones.
- En móvil y tableta, permite que textos y controles ocupen varias líneas.
Tratamiento de datos
El tratamiento depende de la función utilizada. El consentimiento, la analítica y las funciones de cuenta del sitio son servicios separados de la operación de color.
Qué hace esta herramienta
Previsualiza tu paleta en componentes de UI realistas como botones, tarjetas y formularios. Observa cómo combinan tus tonos HEX y RGB antes de crear la interfaz. Vista previa de UI se centra en esa tarea y no presupone funciones que no aparecen en su interfaz. Utiliza los controles disponibles para obtener el resultado necesario y comprueba los valores mostrados antes de trasladarlos a otra herramienta, hoja de estilos, archivo de diseño o documento.
Preparar una entrada adecuada
Empieza con la entrada que solicita Vista previa de UI: color, valor, imagen o ajuste según la pantalla. Los formatos indicados para esta página son HEX, RGB, HSL, Composants UI. Si un formato u opción no aparece en la interfaz, no lo consideres compatible con esta función concreta.
Leer y comprobar el resultado
Interpreta el resultado según la operación realizada. Compáralo con el valor de origen y revisa los controles que han influido en el cálculo. Para trabajos visuales importantes, comprueba también el resultado en la interfaz real en la que se utilizará y no solo a partir del código.
Uso en móvil y tableta
Vista previa de UI usa el diseño responsive del sitio. Los títulos, subtítulos, breadcrumbs y controles pueden pasar a varias líneas en pantallas estrechas para que las traducciones largas no se corten. Aun así, revisa el resultado final en el dispositivo y el contexto en los que lo utilizarás.
Reutilizar el resultado en tu proyecto
Después de comprobar el resultado, usa únicamente las acciones que ofrece Vista previa de UI, como copiar o exportar cuando estén disponibles. Conserva el valor de origen si necesitas reproducir el ajuste y, en trabajos de interfaz, documenta también la función del color y el contraste necesario.
Herramientas relacionadas
Guías y tutoriales
Aprende a usar nuestras herramientas con nuestras guías detalladas.
ui-preview: guía práctica de export
Guía localizada para usar ui-preview, entender buenas prácticas de export y evitar errores comunes.
ui-preview: guía práctica de developer
Guía localizada para usar ui-preview, entender buenas prácticas de developer y evitar errores comunes.
ui-preview: guía práctica de developer
Guía localizada para usar ui-preview, entender buenas prácticas de developer y evitar errores comunes.
Preguntas frecuentes
Aprende a usar nuestras herramientas con nuestras guías detalladas.