Generador de degradados CSS
Degradados lineales, radiales y cónicos.
Diseño
Generador de paletas
Paletas de color armónicas para tu diseño.
Qué hace. Esta herramienta genera paletas armónicas a partir de un color base aplicando las relaciones clásicas del círculo cromático. La parte difícil no es generar colores, sino saber cuántos necesitas realmente.
Funciona en tu navegadorNo se sube nadaSin registroFunciona sin conexión
Cómo usar Generador de paletas
- Elige un color base.
- Selecciona el tipo de armonía.
- Copia los valores que vayas a usar.
Los tipos de armonía
Se basan en la posición relativa de los colores en el círculo cromático.
| Tipo | Relación | Efecto |
|---|---|---|
| Complementaria | opuestos, 180° | contraste máximo |
| Análoga | contiguos, 30° | suave, cohesionada |
| Triádica | tres a 120° | viva y equilibrada |
| Dividida complementaria | opuesto y sus vecinos | contraste más suave |
| Monocromática | un tono, varias luminosidades | sobria |
La complementaria da el contraste más fuerte, y por eso mismo cansa si se usa a partes iguales. Funciona con una proporción muy desigual: uno domina y el otro aparece solo en detalles.
La análoga es la más fácil de acertar y la que más suele usarse en interfaces, porque no compite con el contenido.
La monocromática se subestima. Una escala de un solo tono con un acento puntual resuelve la mayoría de los proyectos y es casi imposible que quede mal.
Cuántos colores necesitas de verdad
Aquí está el error más habitual: generar diez colores y usarlos todos.
Una interfaz suele necesitar menos colores de los que la gente cree. Un color de marca, una escala de neutros, y tres colores semánticos para éxito, aviso y error.
La escala de neutros hace la mayor parte del trabajo: fondos, bordes, texto secundario, separadores. Conviene que no sean grises puros, sino con una ligera desviación hacia el tono de marca — se nota poco y hace que todo parezca elegido a propósito.
Los colores semánticos no deben coincidir con el de marca. Si tu marca es verde y el mensaje de éxito también, pierdes la señal.
La proporción importa tanto como la selección. Una regla práctica es dedicar alrededor del sesenta por ciento a un neutro dominante, el treinta a un secundario y el diez al acento.
Y no codifiques información solo con el color: alrededor de una de cada doce personas tiene alguna deficiencia en la visión del color. Acompaña siempre el color con un icono, un texto o una forma.
De la paleta al código
Una paleta que no se puede mantener no sirve.
Genera una escala de luminosidades por cada color, no un único valor. Cinco o siete pasos suele bastar, y así tienes versiones para fondo, borde, texto y estado activo del mismo tono.
Construye esa escala en OKLCH si puedes: como su luminosidad coincide con la percepción, los pasos quedan visualmente uniformes, cosa que en HSL no ocurre.
Guarda todo como variables CSS con nombres funcionales, y define el modo oscuro redefiniendo esas variables en lugar de reescribir los componentes.
Comprueba el contraste de cada combinación de texto y fondo que vayas a usar realmente. Una paleta bonita que falla el nivel AA hay que rehacerla, y es mejor descubrirlo antes de aplicarla a cincuenta pantallas.
Y prueba la paleta impresa o en una pantalla mala antes de darla por buena. Los matices que se aprecian en un monitor calibrado desaparecen en un portátil barato al sol.
Preguntas frecuentes
¿Cuántos colores necesita una interfaz?
Menos de los que parece: un color de marca, una escala de neutros y tres semánticos.
¿Qué armonía es la más segura?
La análoga o la monocromática. Son difíciles de estropear y no compiten con el contenido.
¿Cómo reparto los colores?
Aproximadamente sesenta por ciento neutro dominante, treinta secundario y diez de acento.
¿Puedo usar grises puros?
Puedes, pero un neutro con una ligera desviación hacia el tono de marca queda más intencionado.
¿Basta con el color para dar información?
No. Acompáñalo siempre de un icono, un texto o una forma.
¿Se envían mis datos?
No.
Guías sobre Generador de paletas
- HEX vs RGB vs HSL: Which to Use When7 min read
- WCAG Contrast Requirements, Explained Properly8 min read
- CSS Gradients, Shadows and Palettes7 min read