Vista previa de colores
Visualiza cómo lucen tus colores dentro de una interfaz real antes de decidir. Prueba tus tonos HEX y RGB sobre elementos de UI y evalúalos siempre en contexto.
Paleta
Vista previa en contexto
Tarjeta hero
Visualiza tus colores aplicados a distintos componentes de interfaz.
Notificación
Mensaje de éxito con color de acento
Insignias de color
Gradient preview
Visualiza cómo lucen tus colores dentro de una interfaz real antes de decidir. Prueba tus tonos HEX y RGB sobre elementos de UI y evalúalos siempre en contexto.
Vista previa de colores 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 colores 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
Visualiza cómo lucen tus colores dentro de una interfaz real antes de decidir. Prueba tus tonos HEX y RGB sobre elementos de UI y evalúalos siempre en contexto. Vista previa de colores 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 colores: color, valor, imagen o ajuste según la pantalla. Los formatos indicados para esta página son HEX, RGB, HSL. 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 colores 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 colores, 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.
color-preview: guía práctica de conversion
Guía localizada para usar color-preview, entender buenas prácticas de conversion y evitar errores comunes.
color-preview: guía práctica de export
Guía localizada para usar color-preview, entender buenas prácticas de export y evitar errores comunes.
color-preview: guía práctica de export
Guía localizada para usar color-preview, entender buenas prácticas de export y evitar errores comunes.
Preguntas frecuentes
Aprende a usar nuestras herramientas con nuestras guías detalladas.