Generador de paleta de colores

Generador de paletas y esquemas de color para desarrolladores

Usa este generador de paletas de colores para convertir un color base opaco en un conjunto determinista para interfaces, sitios web, dashboards y sistemas de diseño. La misma herramienta funciona como generador de paletas de colores o generador de esquemas de color, con indicaciones copiables para el color de primer plano y resultados listos para desarrolladores en lugar de un tablero de inspiración puramente decorativo.

Cómo crear una paleta de colores

1. Introduce un color base opaco en formato HEX, RGB o HSL, o elige uno con el control de color nativo.
2. Elige una armonía y genera una paleta de 3, 5, 6, 10 o 12 colores.
3. Inspecciona los colores de texto sugeridos y la vista previa del componente, luego copia o descarga CSS, valores compatibles con Tailwind o tokens de diseño.

Armonía monocromática, análoga, complementaria, complementaria dividida y triádica

La armonía del color define las relaciones de tono iniciales detrás de estos esquemas de combinación de colores. La monocromática mantiene un solo tono, la análoga rota 30 grados en cada dirección, la complementaria usa el tono opuesto, la complementaria dividida usa rotaciones de 150 y 210 grados, y la triádica usa 120 y 240 grados. Los colores neutros pueden colapsar estas rotaciones porque cambiar el tono de un color con saturación cero no crea un valor HEX diferente.

Un generador para paletas de 3, 5, 6, 10 y 12 colores

El selector de tamaño crea una paleta compacta de 3 colores, paletas comunes de 5 o 6 colores y sistemas más grandes de 10 o 12 colores sin publicar páginas separadas. Cada tamaño es un prefijo estable de la misma secuencia determinista de doce colores, por lo que aumentar el tamaño mantiene los colores que ya has revisado.

Tintes y sombras deterministas para esquemas de color de sitios web

Después de las anclas de armonía, el generador de tintes y sombras mezcla cada ancla hacia el blanco y el negro en pasos sRGB limitados. Esto facilita el trabajo con paletas de colores para sitios web, esquemas de color para la web, esquemas de color para temas de sitios web y paletas de colores para paneles de control, sin pretender ser una escala perceptualmente uniforme.

Variables CSS, valores de paleta de Tailwind y tokens de diseño

Copia propiedades personalizadas de CSS, un objeto de color compatible con Tailwind o tokens JSON al estilo DTCG. Cada exportación incluye el color de la paleta y su color de texto seleccionado (blanco o negro), lo que hace que el resultado sea útil como paleta de colores CSS, generador de colores de Tailwind, paleta de colores de Tailwind o generador de tokens de diseño específico.

Previsualizar una paleta de colores para un sitio web o panel de control

La escena de componentes asigna los colores generados a roles ilustrativos de superficie, texto, borde, acción principal, acción secundaria y estado. Es una previsualización rápida de implementación para una paleta de colores de un sitio web, no una prueba de que cada componente real, estado de interacción, icono, gráfico, degradado o combinación de colores adyacentes cumpla con los requisitos de accesibilidad.

Guía de colores de texto accesibles y limitaciones honestas

Para cada muestra de color opaca, la herramienta compara el blanco y el negro y recomienda el que tenga la relación de contraste de precisión completa más alta. Muestra la relación y el resultado WCAG AA para texto normal. Esta es solo una guía para el primer plano: el generador no prueba cada par de la paleta, el significado semántico, el contraste de elementos que no son texto, los estados de foco o la distinguibilidad en la visión de colores, por lo que no es un verificador de paletas para daltónicos. Verifica cualquier par de texto en el verificador de contraste de color y perfecciona una muestra de color individual en el selector de color.

Generación privada de paletas y guardado explícito

La generación, las previsualizaciones, los cálculos de contraste y las exportaciones se realizan en este navegador. No se guarda nada hasta que eliges Guardar, y una instantánea detectada nunca se aplica sin Restaurar. Los colores exactos, las paletas, las relaciones, los archivos generados, el estado guardado y los valores de la consulta para compartir se excluyen de los análisis.

Preguntas frecuentes

¿Cómo creo una paleta de colores a partir de un solo color?

Introduce un color base opaco, selecciona una armonía y un tamaño, y genera la paleta. También puedes elegir cualquier muestra de color resultante como la siguiente base y continuar refinando el esquema.

¿Qué armonía de color debería usar?

La monocromática se mantiene más cercana a un solo tono, la análoga crea tonos cercanos, la complementaria crea un par opuesto, la complementaria dividida amplía ese par y la triádica distribuye tres anclas alrededor de la rueda de color. La mejor elección depende de los roles y el contenido en la interfaz real.

¿Son los tintes y las sombras perceptualmente uniformes?

No. Son mezclas sRGB deterministas y acotadas hacia el blanco y el negro. El generador no afirma tener espaciado OKLCH ni uniformidad perceptual.

¿Son accesibles los colores de texto sugeridos?

La sugerencia de blanco o negro que se muestra es la opción de mayor contraste para esa muestra individual e incluye su resultado AA para texto normal. Aún necesitas probar la tipografía real, los estados de los componentes, los bordes, los iconos y las combinaciones renderizadas.

¿Crea esto una paleta de colores apta para daltónicos?

No por sí solo. Esta versión no simula deficiencias en la visión del color ni comprueba si cada color de la paleta sigue siendo distinguible. Usa el esquema generado como punto de partida y verifícalo con simulaciones dedicadas y pruebas en la interfaz real.

¿Se sube o se guarda mi paleta automáticamente?

No. La generación permanece en local, no se escribe nada en el almacenamiento hasta que eliges Guardar, y el estado para compartir aparece en un enlace solo después de que lo copies explícitamente.