Prismatica — Generador de paletas de colores

Prismatica es un estudio interactivo de paletas de color. Elige un tono, ajusta saturación y luminosidad y compara cinco colores en una interfaz de muestra o una matriz de contraste. Los cálculos se realizan en tu navegador.

Prismas de cristal dividen luz blanca en rayos espectrales y muestras de color flotantes — ilustración conceptual
Ilustración conceptual generada por IA; no es una captura de la aplicación.

PRISMATICA / ESTUDIO DE COLOR

Diseña el color en tres dimensiones.

Campo cromático

Modelo de armonía

Espectro generado

Pulsa un color para copiar su valor hexadecimal.

Entorno interactivo

PRISMATICAVista de diseño ilustrativa

Diseña a la velocidad de la imaginación.

Tu paleta cambia los acentos decorativos. El texto conserva una superficie legible. Usa la matriz para evaluar tus combinaciones.

#6FF6B9#49E4DA#11A8E8#164BB6#0E078D

Cómo usar la aplicación

  1. Elige un tono con la rueda de color o con el control deslizante accesible por teclado.
  2. Ajusta saturación y luminosidad y selecciona una armonía monocromática, complementaria, análoga, triádica o tetrádica.
  3. Revisa cada combinación en la matriz de contraste. Copia un valor hexadecimal, guarda la paleta en este dispositivo o descarga CSS y JSON.

Cómo funciona el motor de color

El estudio convierte los valores de tono, saturación y luminosidad en colores RGB hexadecimales. Cada modelo de armonía aplica desplazamientos de tono fijos. Las variaciones de saturación y luminosidad crean colores claros y profundos. Los resultados se actualizan al instante, sin enviar tus elecciones a servicios externos. Los colores generados son puntos de partida, no una garantía de combinaciones accesibles.

Cómo interpretar el contraste

La matriz compara cada color de texto con cada fondo mediante luminancia relativa. El texto normal necesita al menos 4.5:1 para WCAG AA y 7:1 para AAA. El texto grande necesita 3:1 para AA. Se considera grande el texto de al menos 18 puntos, o de 14 puntos en negrita. Estos umbrales evalúan solo el contraste: no certifican un sitio completo. Las etiquetas numéricas siguen siendo legibles aunque la muestra no supere el umbral.

Guardar, exportar y reutilizar

El guardado conserva la paleta actual en el almacenamiento local de este navegador y la restaura cuando vuelves. No crea una cuenta ni sincroniza dispositivos; borrar los datos del navegador elimina la paleta. La exportación CSS contiene propiedades personalizadas para tus hojas de estilo. El archivo JSON incluye el nombre, la armonía y los colores hexadecimales. Descarga un archivo si necesitas una copia portátil y consérvala fuera del navegador.

Preguntas y respuestas

¿Qué genera Prismatica?

Prismatica genera paletas de cinco colores a partir del tono, saturación, luminosidad y modelo de armonía elegidos.

¿Un contraste aprobado significa que mi sitio cumple WCAG?

No. Solo satisface un umbral de contraste para el tamaño de texto indicado. El teclado, la semántica, el foco, el contenido y otros requisitos necesitan una evaluación adicional.

¿Dónde se guarda mi paleta?

Se guarda en este navegador y dispositivo. Exporta CSS o JSON para conservar una copia portátil.

GUÍA DE USO · ALCANCE Y LÍMITES

Prismatica: uso práctico y contexto

Prismatica es un estudio de color para diseño de interfaces, desarrollo y preparación de propuestas visuales. Conecta exploración de paletas, comprobaciones de contraste y valores portátiles.

↑ Volver a la aplicación
Prismas de cristal dividen luz blanca en rayos espectrales y muestras de color flotantes — ilustración conceptual
Ilustración de la aplicación, reutilizada de su familia de imágenes de publicación. La interfaz interactiva está arriba.

Crear una paleta para funciones reales

Empieza con un tono y ajusta saturación y luminosidad mientras revisas los cinco colores. La armonía es una relación inicial, no un veredicto estético. Asigna funciones: fondo, superficie, texto, acción y acento. Resulta más fácil evaluar colores con una tarea que cinco muestras aisladas.

Comprueba en la matriz las parejas reales de texto y fondo. Un acento vivo puede funcionar como decoración grande y fallar como texto pequeño. Ajusta y repite. Deshacer y rehacer permiten comparar cambios; restablecer ayuda cuando el experimento se alejó demasiado.

Ejemplo: una tarjeta informativa legible

Imagina una tarjeta con título, párrafo y botón. Selecciona superficie oscura y texto claro y revisa la relación. Comprueba por separado el texto del botón con su relleno. Una pareja apta para párrafos no garantiza acciones legibles. Añade foco visible en el sitio receptor: exportar colores no implementa esa interacción.

De la exploración a un sistema mantenible

Copia valores hexadecimales o exporta CSS y JSON. Las variables CSS son valores, no una biblioteca completa. Nombra funciones en tu proyecto y prueba estados de foco, interacción, desactivación y error. Conserva una descarga si importa la paleta: borrar datos del navegador elimina el guardado local.

Qué no certifica el estudio

El contraste es solo parte de la accesibilidad. Tamaño, peso, espaciado, foco, señales no cromáticas y semántica requieren contexto. Transparencias e imágenes cambian el fondo efectivo. Evalúa el componente renderizado, no solo la muestra. Prismatica no certifica sitios ni sincroniza paletas entre cuentas.