Genera tintes, sombras y paletas de colores armoniosas desde cualquier color
Un generador de paletas toma un color base y construye a su alrededor un conjunto de colores coordinados — matices más claros, sombras más oscuras y acompañantes armoniosos elegidos por relaciones de teoría del color en vez de a ojo. Elegir un solo color que te guste es fácil; convertirlo en una paleta completa que parezca intencionada es lo difícil, porque los colores que chocan o están demasiado cerca hacen que un diseño parezca amateur. Esta herramienta hace las relaciones por ti, así que partes de un color y obtienes un esquema utilizable en segundos.
Las armonías que produce vienen de posiciones en la rueda de color: los colores complementarios están opuestos para alto contraste, los análogos están juntos para una sensación calmada y cohesiva, y los conjuntos triádicos están equiespaciados para una variedad equilibrada. Los matices y sombras salen de mantener el tono fijo y ajustar la luminosidad, que es como se construye la rampa consistente de claro a oscuro que una interfaz necesita para fondos, texto y estados. Todo se genera en tu navegador con valores HEX copiables listos para tu CSS o herramienta de diseño.
Un matiz es el color base mezclado hacia el blanco (más claro), y una sombra es la mezcla hacia el negro (más oscura). Generar matices y sombras mantiene el mismo tono variando la luminosidad, lo que produce una familia coordinada en vez de colores sin relación.
Son relaciones en la rueda de color. Los complementarios están opuestos para un contraste fuerte, los análogos son vecinos para un aspecto armonioso, y los triádicos están equiespaciados para una variedad equilibrada. Cada uno sirve para un tono de diseño distinto.
Las paletas vienen con valores HEX que puedes copiar directo al CSS o a una herramienta de diseño, ya que HEX es el formato más aceptado. Desde ahí puedes convertir cualquier color a RGB o HSL si una herramienta concreta lo necesita.
La armonía por sí sola no garantiza la legibilidad — el texto necesita suficiente contraste con su fondo. Usa los extremos claro y oscuro de una rampa de matices/sombras para los pares texto-sobre-fondo y compruébalos con los ratios de contraste WCAG antes de publicar.
Generador de degradado CSS · Verificador de contraste · Mezclador de colores · Buscador de nombre de color