# Cómo crear una paleta de degradados para una marca

[Canonical HTML page](https://gradiently.design/es/guide/gradient-palette)

Un buen degradado es fácil. Seis que claramente pertenecen a la misma familia, cubren todos los usos de una marca y siguen viéndose bien juntos son un sistema. Así se construye.

## The short version

- Una paleta de degradados es una familia pequeña y con nombre de degradados creados a partir de una paleta de color base y unas pocas reglas comunes.
- La mayoría de las marcas necesitan de cuatro a seis degradados: uno principal, una versión profunda, una versión clara y tranquila, un resplandor radial, uno de acento y uno sereno para el texto.
- Los degradados se leen como una familia cuando comparten color de fondo, dirección, posiciones de parada coherentes y los mismos saltos de luminosidad.
- Guardar los degradados como propiedades personalizadas de CSS con nombre los mantiene idénticos en una web, una app y los archivos de diseño.
- Una paleta de degradados debe probarse en formatos reales con textos reales antes de incluirla en el manual de marca.

Una **paleta de degradados** es una familia pequeña y con nombre de degradados creada a partir de una paleta de color y unas cuantas reglas comunes, para que todos los degradados que usa una marca parezcan emparentados. Empieza con cinco o seis colores base, da a cada degradado una función (principal, profundo, tranquilo, resplandor, acento, texto) y fija lo que los hace hermanos: el mismo color de fondo, el mismo ángulo, posiciones de parada iguales y saltos de luminosidad uniformes. Anótalos como tokens y pruébalos en diseños reales antes de que nadie más los use.

## Por qué una marca necesita más de un degradado

Un único degradado acaba estirándose para trabajos que no puede hacer. La mezcla brillante que queda genial en un post de lanzamiento es demasiado ruidosa detrás de un párrafo, demasiado oscura para una sección web clara y demasiado recargada para una diapositiva llena de cifras. Entonces el equipo improvisa, alguien elige un azul parecido y en un año la marca tiene quince degradados que casi coinciden. Una paleta lo evita decidiendo las variaciones de antemano.

### Un montón de degradados

- Cada uno hecho por separado, para un diseño
- Ángulos distintos en cada página
- Colores que casi coinciden con la marca
- Sin nombre, así que nadie puede pedirlos
- Copiados a ojo de archivos antiguos

### Una paleta de degradados

- Creada a partir de una paleta base
- Una dirección, usada en todas partes
- Códigos hex y posiciones de parada exactos
- Con nombre según su función: principal, profundo, tranquilo
- Guardada como tokens en el código y los archivos

## Empieza por una paleta de color base

Todos los degradados de la familia deben hacerse solo con estos colores, o con sus tintes y sombras. Si los colores de tu marca aún no están decididos, resuélvelo primero con [cómo elegir los colores de marca](https://gradiently.design/es/guide/how-to-choose-brand-colors). Una base útil tiene un fondo oscuro, dos o tres pasos del tono principal, un casi blanco y un acento de otra parte de la rueda.

- Tinta: #14112b
- Ciruela nocturno: #2e1065
- Ciruela: #4c1d95
- Violeta: #7c3aed
- Orquídea: #c084fc
- Concha: #faf5ff
- Brasa: #f97316

Una base de ejemplo: un fondo oscuro, cuatro pasos de violeta, un casi blanco y un único acento cálido. Todos los degradados de abajo se crean con estos siete códigos.

## Da una función a cada degradado

Nombra los degradados por lo que hacen, no por su aspecto. «Principal» sobrevive a un cambio de colores; «atardecer morado», no. Seis funciones cubren casi cualquier marca.

| Función | Para qué sirve | En qué se diferencia |
| --- | --- | --- |
| Principal | Lanzamientos, portadas, el momento que la gente recuerda | Toda la gama, de oscuro a claro |
| Profundo | Secciones oscuras, diapositivas, campañas nocturnas | Solo los dos o tres colores más oscuros |
| Tranquilo | Páginas claras, documentos, lectura larga | Concha y el tinte más pálido, casi sin movimiento |
| Resplandor | Fotos de producto y palabras sueltas | Radial, con luz en una esquina |
| Acento | Botones, insignias, un toque de realce por diseño | El tono principal hacia el color de acento |
| Texto | Detrás de párrafos y pies de foto | Poco contraste interno, mucho contra el texto |

Seis funciones para una paleta de degradados de marca. Las marcas pequeñas pueden empezar con principal, profundo y tranquilo.

- Principal: `linear-gradient(135deg, #14112b 0%, #4c1d95 45%, #7c3aed 75%, #c084fc 100%)`
- Profundo: `linear-gradient(135deg, #14112b 0%, #2e1065 60%, #4c1d95 100%)`
- Tranquilo: `linear-gradient(135deg, #faf5ff 0%, #f3e8ff 60%, #e9d5ff 100%)`
- Resplandor: `radial-gradient(circle at 80% 20%, #c084fc 0%, #7c3aed 30%, #14112b 75%)`
- Acento: `linear-gradient(135deg, #7c3aed 0%, #c084fc 55%, #f97316 100%)`
- Texto: `linear-gradient(135deg, #2e1065 0%, #14112b 100%)`

La familia creada a partir de la base anterior. Mismo fondo, mismo ángulo de 135 grados, mismos colores: podrían ir juntos en una página sin discutir.

## Las reglas que convierten los degradados en una familia

- **Un solo fondo.** Todos los degradados oscuros terminan en la misma tinta y todos los claros en la misma concha. El fondo es lo que el ojo usa para agruparlos.
- **Una sola dirección.** Elige un ángulo, 135 o 160 grados, y mantenlo. Los ángulos mezclados hacen que una página parezca accidental. [Ángulo del degradado](https://gradiently.design/es/guide/gradient-angle) explica la elección.
- **Paradas iguales.** Reutiliza las mismas posiciones (0, 45, 75 y 100 por ciento, por ejemplo) para que las transiciones tengan el mismo ritmo. [Paradas de un degradado](https://gradiently.design/es/guide/gradient-stops) trata el espaciado.
- **Saltos de luminosidad uniformes.** Cada color de una mezcla debe ser un paso claro más luminoso u oscuro que su vecino. Los saltos desiguales producen una franja brillante en el centro.
- **Un acento, racionado.** El color de acento aparece en un solo degradado. Repartido por todos, deja de ser un acento.
- **Una interpolación fija en el código.** Si tu web mezcla en oklch, todos los degradados deberían hacerlo, o los mismos códigos se verán distintos de una sección a otra.

## Convierte la paleta de degradados en tokens

Una paleta que solo vive en un PDF acaba reescribiéndose y desviándose. Guarda cada degradado una vez como propiedad personalizada con nombre y haz referencia a ella en todas partes. Los diseñadores pueden pegar los mismos valores en sus archivos, y una futura renovación cambia una línea por degradado. [Design tokens](https://gradiently.design/es/guide/design-tokens) trata la práctica más amplia.

```css
:root {
  --ink: #14112b;
  --plum: #4c1d95;
  --violet: #7c3aed;
  --orchid: #c084fc;
  --shell: #faf5ff;
  --ember: #f97316;

  --gradient-hero: linear-gradient(135deg, var(--ink) 0%, var(--plum) 45%, var(--violet) 75%, var(--orchid) 100%);
  --gradient-deep: linear-gradient(135deg, var(--ink) 0%, #2e1065 60%, var(--plum) 100%);
  --gradient-quiet: linear-gradient(135deg, var(--shell) 0%, #f3e8ff 60%, #e9d5ff 100%);
  --gradient-glow: radial-gradient(circle at 80% 20%, var(--orchid) 0%, var(--violet) 30%, var(--ink) 75%);
  --gradient-accent: linear-gradient(135deg, var(--violet) 0%, var(--orchid) 55%, var(--ember) 100%);
  --gradient-text: linear-gradient(135deg, #2e1065 0%, var(--ink) 100%);
}

.hero { background: var(--gradient-hero); }
.section-light { background: var(--gradient-quiet); }
```

Toda la familia como propiedades personalizadas de CSS. Los colores se definen una vez y cada degradado se construye a partir de ellos.

## Pruébala en formatos reales

Las muestras engañan. Un degradado que parece equilibrado en un cuadrado pequeño puede poner su banda más brillante justo detrás de un titular cuando llena una story de 1080×1920. Antes de publicar la paleta, haz tres diseños reales con textos reales: un post vertical, una story y un hero web. Comprueba que el degradado de texto mantiene legibles los párrafos, con las pruebas de [contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility), y que el principal y el profundo parecen emparentados cuando van uno al lado del otro.

Un post vertical de lanzamiento sobre un fondo degradado intenso y de gama completa

La función principal en un post vertical de 1080×1350.

Una story vertical con el mismo titular sobre un fondo degradado emparentado de la misma familia

La misma familia en una story de 1080×1920. Comprueba que la banda más brillante sigue sin tocar el titular en el encuadre más alto.

Con Gradiently Pro, el kit de marca guarda tus paletas de color junto a tu logotipo y tus tipografías, y el Designer las aplica cuando compone diseños nuevos. Si tu degradado principal debe ser lo que la gente reconozca, [degradados de marca](https://gradiently.design/es/guide/brand-gradient-system) explica cómo convertir un degradado en una firma.

## FAQ

### ¿Qué es una paleta de degradados?

Un conjunto pequeño y con nombre de degradados creados a partir de una paleta de color con reglas comunes, para que parezcan una familia allí donde aparezcan.

### ¿Cuántos degradados debería tener una marca?

De cuatro a seis cubren casi todo: uno principal, una versión profunda y otra tranquila, un resplandor radial, uno de acento y uno lo bastante sereno para el texto. Las marcas pequeñas pueden empezar con tres.

### ¿Cómo hago que los degradados parezcan de la misma familia?

Usa el mismo color de fondo, el mismo ángulo, las mismas posiciones de parada y saltos de luminosidad uniformes en todos los degradados.

### ¿Cómo debo guardar los degradados de marca para una web?

Define los colores y cada degradado una sola vez como propiedades personalizadas de CSS y usa esos nombres en todos los componentes.