¿Qué es Creador de Esquemas de Color?

Color Scheme Creator genera paletas de colores completas a partir de un solo color base usando reglas de teoría del color. Elige esquemas monocromáticos, complementarios, complementario dividido, doble dividido, triádicos, tetrádicos o análogos y ajusta cada muestra. Copia un enlace para compartir, exporta como variables CSS o configuración de Tailwind, o copia los códigos hex.

Elige cualquier hex base y el generador aplica las rotaciones clásicas de la rueda de color: 180 grados para complementario, 150 y 210 grados para los dos flancos del complementario dividido, 120 para tríadico, 90 para tetrádico y pasos pequeños a cada lado para análogo. Los matices y tintes mantienen el mismo tono y solo desplazan la luminosidad en HSL con incrementos fijos, así obtienes una rampa limpia de cinco pasos para cada uno. Cada muestra se puede copiar como HEX, rgb(), hsl() u oklch(); el panel de contraste evalúa cada color frente a blanco y negro para WCAG AA y AAA, y la vista previa de visión redibuja toda la paleta a través de filtros de protanopía, deuteranopía o tritanopía con un clic. Copia un enlace para guardar la paleta o pasársela a un compañero sin necesidad de cuenta.

Cómo usar

1. Elige un color base usando el selector de color o introduce un código hexadecimal.
2. Selecciona un tipo de esquema (monocromático, complementario, complementario dividido, doble dividido, triádico, análogo, tetrádico) para generar la paleta.
3. Copia los códigos hex individuales, exporta la paleta completa como variables CSS o descárgala como imagen de muestra.

Cuándo usar

• Convertir un único hex de marca en una paleta completa para un sitio web o tema de app.
• Comprobar si el color del logo tiene un complementario limpio antes de imprimir merchandising.
• Generar variables CSS sin abrir Figma ni otra herramienta de diseño.

Resultado

Un desarrollador web elige el azul primario de su marca (#3B82F6), genera un esquema triádico que produce tonos naranja y verde complementarios, y luego exporta la paleta como propiedades personalizadas CSS para su sistema de diseño.

Preguntas frecuentes

¿En qué se diferencian los esquemas triádico y tetrádico?

El triádico usa tres colores separados 120 grados en el círculo, lo que da un trío equilibrado. El tetrádico usa cuatro colores que forman un rectángulo (dos pares complementarios), con más variedad pero más difícil de equilibrar visualmente.

¿Cuándo conviene usar sombras y cuándo tintes?

Las sombras (versiones más oscuras) funcionan bien para textos, bordes y estados hover sobre interfaces claras. Los tintes (versiones más claras) sirven para fondos, estados deshabilitados y resaltes sutiles. La mayoría de sistemas de diseño necesita ambas rampas.

¿El generador tiene en cuenta el contraste de accesibilidad?

Sí: el panel de contraste debajo de la paleta muestra la relación WCAG de cada color frente a blanco y negro, con insignias de aprobado o fallido para AA y AAA. El umbral de 4.5:1 para texto normal es el que cubre la mayoría de los casos de UI; cambia la vista para visión a protanopía, deuteranopía o tritanopía y verás también cómo se lee la paleta para personas con deficiencia en la visión cromática.

¿Por qué un esquema análogo se siente más tranquilo que uno complementario?

Los colores análogos están juntos en el círculo y comparten familia tonal, generando poca tensión visual. Los complementarios están enfrentados, lo que maximiza el contraste y resulta más enérgico, pero cansa la vista en superficies grandes.

¿Puedo exportar a configuración de Tailwind o solo a variables CSS?

Ambos. Las variables CSS se pegan directamente bajo :root en la hoja de estilos. El formato Tailwind envuelve los valores hex en un objeto theme.extend.colors que puedes pegar en tailwind.config.js.

Herramientas relacionadas