Design

Degradado

Una transición suave y continua entre dos o más colores a lo largo de un espacio definido.

Gradients can be linear (transitioning along a straight line), radial (transitioning outward from a center point), or conic (transitioning around a center point). In CSS, they are implemented as background-image values using linear-gradient(), radial-gradient(), and conic-gradient() functions. Gradients add depth, dimension, and visual interest to designs. Modern design trends favor subtle gradients for backgrounds and bold, multicolor gradients for branding (as seen with Instagram and Firefox). When creating gradients between certain color pairs, desaturated or muddy midpoints can occur; using OKLCH interpolation helps maintain vivid colors throughout the transition.

Pruébelo

Generador de paletas

Genera paletas de colores armoniosas usando esquemas complementarios, análogos, triádicos y complementarios divididos.

Generador de tonos

Genera escalas de tonos estilo Tailwind CSS (50–950) a partir de cualquier color base para sistemas de diseño.

Artículos relacionados

CSS color-mix(): Mezcla Colores Nativamente en el Navegador

Aprende CSS color-mix() para mezclar colores nativamente en el navegador. Domina la sintaxis, los espacios de color, los casos de uso prácticos y crea paletas dinámicas sin JavaScript.

Construyendo un Selector de Color como Web Component desde Cero

Construye un selector de color accesible como Web Component. Implementa renderizado en canvas, sliders de tono, canales alfa y eventos personalizados con Shadow DOM.

Espacios de Color Perceptuales: Lab, LCH, Oklab, OKLCH

Explora los espacios de color perceptualmente uniformes — CIE Lab, LCH, Oklab y OKLCH. Aprende cómo fue diseñado cada uno, en qué destaca y cuál usar para CSS y trabajo de diseño.

Generación de imágenes OG coloridas con Next.js y Satori

Genera imágenes Open Graph dinámicas con Next.js y Satori. Crea plantillas OG con conciencia de color, degradados, colores de marca y diseños responsivos.

Separación de Color Explicada: Preparar Archivos para Imprenta

Comprende la separación de color CMYK, planchas de tinta plana, trapping y marcas de registro. Prepara archivos listos para imprenta con separaciones de color correctas.

Colores de marca de Amazon: Del marrón librería al naranja sonrisa

Sigue la evolución del color de Amazon, desde el marrón de librería hasta el icónico naranja sonrisa (#FF9900). Explora el azul Prime, los colores de AWS y las subpaletas.