Generador de paleta de colores

Base color

Scheme

Share X / Twitter Facebook LinkedIn WhatsApp

Cómo usar Generador de paleta de colores

Genere paletas hasta que una coincida con el estado de ánimo (o una semilla del color de su marca, si tiene una).
Asigne roles: neutral dominante, secundario, acento: la división 60-30-10.
Copia los códigos hexadecimales en variables CSS o en los estilos de tu herramienta de diseño.
Comprueba el contraste en cada par de texto/fondo antes de comprometerte. 4,5:1 mínimo.

¿Cuál es Generador de paleta de colores?

Un generador de paleta de colores produce conjuntos de colores que funcionan juntos (pares complementarios, ejecuciones análogas, sombras de una base) con códigos hexadecimales listos para copiar en CSS o una herramienta de diseño. Automatiza el paso de la teoría del color: los colores se armonizan según sus relaciones en la rueda de colores y las paletas generadas codifican esas relaciones en lugar de esperar.

El problema práctico que resuelve: elegir un buen color es fácil; elegir cinco que vayan juntos es una habilidad de diseño que la mayoría de los proyectos no tienen a mano. Una paleta generada comienza siendo coherente: la diferencia entre una interfaz de usuario que parece temática y una que parece ensamblada.

Sobre el Generador de paleta de colores

Genere paletas y copie los códigos hexadecimales que se ajusten a su proyecto, como un esquema completo o un punto de partida que usted ajuste.

Convertir una paleta en un sistema utilizable: aplique la regla 60-30-10 (neutro dominante ~60% de la interfaz de usuario, secundario ~30%, acento ~10%; el acento son sus botones y resaltados, no sus fondos); derivar colores funcionales a partir de la temperatura de la paleta (verde éxito, ámbar de advertencia, rojo peligro que coincidan con la saturación del esquema); y generar tintes/sombras de cada color para estados de desplazamiento, bordes y modo oscuro en lugar de introducir nuevos tonos.

Las dos comprobaciones antes del envío: contraste: los pares de texto sobre fondo necesitan la proporción WCAG de 4,5:1 (una hermosa paleta que no supera el contraste es un rediseño a punto de suceder); y contexto: los colores cambian perceptualmente según diferentes fondos, así que escuche la paleta en blanco, oscuro y sus propios colores. Combínelo con nuestro Convertidor de color para cambios de formato (hex↔RGB↔HSL) a medida que los valores se mueven entre herramientas.

Preguntas Frecuentes

Menos de lo que piensan los principiantes: uno o dos colores neutros (más sus tintes), uno primario, uno de acento y 3 o 4 colores funcionales (éxito/advertencia/peligro/información) derivados para combinar. Cinco tonos básicos ya son muchos.

Guía de proporciones: ~60 % de la interfaz en el color dominante (normalmente neutro), 30 % secundario, 10 % acento. Es por eso que los fondos con colores acentuados se sienten ruidosos: el trabajo del acento es la escasez.

Fije el color de la marca como primario, genere armonías a partir de él (acento complementario, secundarios análogos) y obtenga neutros con un toque del tono de la marca (gris puro junto a un color cálido de la marca se lee frío).

WCAG AA: 4,5:1 para texto normal, 3:1 para texto grande y componentes de interfaz de usuario. Verifique cada combinación: las paletas de tonos medios fallan de manera rutinaria y las fallas de contraste son un problema legal y de accesibilidad.

No por inversión: desatura y aclara ligeramente los tonos (los colores saturados vibran en la oscuridad), cambia la rampa neutra y mantén el acento reconociblemente igual. Genere las variantes oscuras a partir de los mismos tonos base para lograr continuidad.