Generador de Paleta de Colores
Rota los tonos alrededor de la rueda de colores HSL para producir las siete paletas que pintores y diseñadores UI alcanzan. Suelta un hex, obtén tonos coincidentes — útil cuando tienes un color de marca y necesitas una paleta de gráfico, un acento para un CTA, o una franja análoga tranquila para fondos. La matemática se queda en HSL así que cada armonía preserva la misma saturación y luminosidad que tu base, excepto el monocromático que deliberadamente cambia la luminosidad arriba y abajo.
La rotación de tono se hace en HSL, que es rápida pero perceptualmente desigual. Para paletas perceptuales prueba el selector OKLCH.
Cómo usar
- Pega tu hex de marca o ancla en el campo base (o usa el selector de color).
- Elige la armonía que se ajuste al caso de uso — análogo para fondos tranquilos, triádico para contraste vívido.
- Copia códigos hex individuales o la lista completa separada por comas.
Preguntas frecuentes
- ¿Qué armonía es más segura para una paleta de gráfico?
- Triádico o split-complementario — tres o más tonos bien espaciados que se mantienen distinguibles para la mayoría de espectadores. Evita el complementario puro (solo dos colores) para algo más que un par de acento.
- ¿Por qué el monocromático da cinco colores?
- El monocromático es una escala de luminosidad, no una rotación de tono. Cinco pasos (−30%, −15%, base, +15%, +30%) es el compromiso común — suficiente variación sin perder el color base.
- Los tonos son los correctos pero juntos se ven planos. ¿Qué hago?
- Una armonía rota el tono y conserva la saturación y la luminosidad, así que todas las muestras pesan lo mismo y ninguna guía la mirada. Una paleta suele necesitar contraste de luminosidad además de diferencia de tono: oscurece una, aclara otra y deja el color base como acento. Eso es también lo que convierte una armonía en algo utilizable para texto y fondos, y no solo para formas.
- ¿Pasarán una comprobación de contraste de accesibilidad?
- No por construcción. Las relaciones de tono no dicen nada sobre el contraste, que compara luminancia relativa, así que dos colores armónicos pueden ser casi idénticos en brillo y no cumplir entre sí como texto y fondo. Toma la armonía como punto de partida y comprueba con una herramienta de contraste cualquier pareja que vayas a superponer.
Guías sobre este tema
Herramientas relacionadas
Generador de Tintes y Sombras
Genera tintes (más claros), sombras (más oscuros) y tonos (con gris) desde cualquier color base — 2 a 20 pasos, en HEX, RGB o HSL.
Paleta de Color desde Imagen
Suelta una imagen y la herramienta extrae una paleta de colores dominantes vía Canvas — copia HEX o llévate el set completo.
Paleta de Colores Tailwind
La paleta por defecto completa de Tailwind CSS — 22 matices × 11 sombras, 50 a 950 — click para copiar como clase Tailwind, HEX o rgb().
Ordenar Colores
Pega una lista de colores hex y ordénalos por tono, saturación, claridad o brillo percibido — útil pra organizar una paleta de tokens de diseño.
Generador de Conic Gradient
Constructor visual para CSS `conic-gradient()` — rotar ángulo, posición del centro, paradas de color, vista previa de forma. Útil para gráficos circulares, gráficos de anillo, patrones de tablero de ajedrez, ruedas de color.
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).