# Paletas de colores oscuros: códigos sombríos que se leen bien

[Canonical HTML page](https://gradiently.design/es/guide/dark-color-palettes)

Las paletas oscuras parecen caras cuando están hechas de casi negros con un rastro de color, y baratas cuando son negro puro con neón. Aquí tienes seis que lo hacen bien, con todos los códigos.

## The short version

- Una buena paleta de colores oscuros se construye sobre un casi negro con un leve tinte de color, no sobre #000000 puro.
- El texto sobre una paleta oscura se lee mejor en un blanco roto suave, que mantiene un contraste alto sin el deslumbramiento del blanco puro.
- Los colores de acento sobre fondos oscuros deben ser más claros y menos saturados que sobre blanco, porque los colores vivos vibran contra el negro.
- Las interfaces oscuras muestran profundidad haciendo algo más claras las superficies elevadas, no añadiendo sombras.
- Cada color de texto de una paleta oscura tiene que superar igualmente una comprobación de contraste frente a la superficie sobre la que se coloca.

Una **paleta de colores oscuros** que se lee bien tiene tres partes: un fondo casi negro con un toque de color, un blanco roto suave para el texto y uno o dos acentos más claros y tranquilos de lo que usarías sobre blanco. El negro puro con neón saturado resulta duro y cansa la vista. Los oscuros tintados con luces suaves parecen deliberados y caros. Las seis paletas de abajo siguen esa receta, con códigos hex para copiar y las proporciones de contraste ya comprobadas.

## Seis paletas de colores oscuros con códigos hex

Cada paleta tiene las mismas cinco funciones, de izquierda a derecha: **fondo** (la página), **superficie** (tarjetas y paneles, un paso más clara), **profundo** (un color medio intenso para formas y áreas grandes), **acento** (para enlaces, botones y destacados) y **texto**.

### Tinta de medianoche

- Fondo #0b0f1a: #0b0f1a
- Superficie #151b2c: #151b2c
- Marino profundo #2b3a67: #2b3a67
- Vincapervinca #8fa3d9: #8fa3d9
- Texto #e8e6f0: #e8e6f0

Fría, serena y técnica. El texto sobre el fondo da 15,5:1; el acento vincapervinca da 7,7:1, suficiente para enlaces y etiquetas pequeñas.

### Noche en el bosque

- Fondo #0c1410: #0c1410
- Superficie #15231c: #15231c
- Pino profundo #2f5d46: #2f5d46
- Salvia #9cc5a1: #9cc5a1
- Texto #ece7da: #ece7da

Natural y silenciosa, buena para marcas de bienestar, aire libre y alimentación. Texto 15,1:1, salvia 9,7:1.

### Sangre de buey y cobre

- Fondo #140a0b: #140a0b
- Superficie #241214: #241214
- Sangre de buey #6b1e26: #6b1e26
- Cobre #c9855b: #c9855b
- Texto #f1e6dc: #f1e6dc

Cálida y rica, como en casa en cartas de vinos, teatro y eventos nocturnos. Texto 15,9:1, cobre 6,5:1.

### Berenjena

- Fondo #120b17: #120b17
- Superficie #1e1326: #1e1326
- Ciruela #4a2a63: #4a2a63
- Orquídea #c79ad8: #c79ad8
- Texto #f3ecf6: #f3ecf6

Creativa y nocturna, una alternativa más suave al morado neón. Texto 16,7:1, orquídea 8,3:1.

### Carbón y brasa

- Fondo #121212: #121212
- Superficie #1e1e1e: #1e1e1e
- Grafito #3a3a3a: #3a3a3a
- Brasa #ff8a3d: #ff8a3d
- Texto #ededed: #ededed

Grises neutros con un único acento cálido, el clásico de apps y paneles. Texto 16:1, brasa 8:1.

### Verde azulado profundo

- Fondo #071a1c: #071a1c
- Superficie #0f2a2d: #0f2a2d
- Verde azulado #1f5c5f: #1f5c5f
- Aguamarina #66c2b8: #66c2b8
- Texto #e6f2ef: #e6f2ef

Oceánica y serena, adecuada para finanzas y salud. Texto 15,6:1, aguamarina 8,5:1.

Los colores profundos de cada paleta son para áreas, no para palabras: el azul marino sobre el fondo de medianoche, por ejemplo, solo da 1,7:1. Úsalos en formas, ilustraciones y fondos detrás de texto en los colores claros.

## Las mismas paletas como degradados oscuros

Las paletas oscuras cobran vida cuando el color profundo brilla desde el fondo como una luz en una habitación en penumbra. Estos solo usan los códigos de arriba, así que encajan exactamente con las paletas planas. Tienes más técnicas en [fondos degradados oscuros](https://gradiently.design/es/guide/dark-gradient-backgrounds) y [degradados sombríos](https://gradiently.design/es/guide/moody-gradients).

- Tinta de medianoche: `radial-gradient(circle at 75% 25%, #2b3a67 0%, #151b2c 40%, #0b0f1a 80%)`
- Noche en el bosque: `radial-gradient(circle at 25% 75%, #2f5d46 0%, #15231c 45%, #0c1410 85%)`
- Sangre de buey: `radial-gradient(circle at 70% 70%, #6b1e26 0%, #241214 45%, #140a0b 85%)`
- Berenjena: `radial-gradient(circle at 30% 20%, #4a2a63 0%, #1e1326 45%, #120b17 85%)`
- Carbón y brasa: `radial-gradient(circle at 80% 80%, #ff8a3d 0%, #3a3a3a 25%, #121212 70%)`
- Verde azulado profundo: `radial-gradient(circle at 50% 0%, #1f5c5f 0%, #0f2a2d 45%, #071a1c 85%)`

Los degradados oscuros forman más bandas que ningún otro tipo. Añade un poco de grano y evita una compresión JPEG fuerte al exportar.

## Reglas para paletas oscuras que se leen

### Evita

- #000000 puro como fondo
- #ffffff puro para pasajes largos de texto
- Acentos totalmente saturados, que parecen vibrar
- Sombras para indicar qué tarjeta está encima
- Tipografía fina y ligera a tamaños pequeños

### Haz

- Un casi negro tintado hacia el tono de tu marca
- Un blanco roto tintado del mismo modo
- Versiones más claras y suaves de los acentos
- Superficies más claras para los elementos elevados
- Pesos regular o medium, con un espaciado algo más amplio

**¿Por qué no negro puro?** El negro con texto blanco puro es el máximo contraste que puede mostrar una pantalla, 21:1, y en pantallas luminosas puede deslumbrar, sobre todo en pasajes largos. Un casi negro tintado de alrededor de 15:1 sigue muy por encima de cualquier umbral de accesibilidad y es mucho más cómodo de leer durante rato. Además da a la paleta una temperatura, algo que el negro puro nunca tiene.

**¿Por qué acentos más tranquilos?** Un azul o un rojo saturados que quedan bien sobre blanco parecen brillar y temblar en los bordes sobre negro. Sube un poco su luminosidad y baja algo su saturación, como con la vincapervinca y la salvia de arriba, y se quedan quietos. Comprueba cada acento que uses para texto con un [comprobador de contraste](https://gradiently.design/es/guide/color-contrast-accessibility).

## Cómo crear una paleta oscura a partir del color de tu marca

No necesitas tomar prestada una de las paletas de arriba. Cualquier color de marca se puede convertir en una paleta oscura manteniendo su tono y cambiando solo la luminosidad y la saturación. Funciona mejor en un formato que separe ambas, como [HSL](https://gradiently.design/es/guide/hsl-colors). Aquí un coral de marca, `#e0525d`, se convierte en un juego oscuro completo.

1. **Fondo: el mismo tono, casi sin luz** Mantén el tono, baja la saturación a un 30% y la luminosidad a un 7%: `#170c0d`. Se lee como negro, pero se siente cálido.
2. **Superficie: un paso más arriba** Sube la luminosidad a un 12% y baja un poco la saturación: `#261718`. Aquí van tarjetas y paneles.
3. **Profundo: un tono medio intenso para áreas** Una luminosidad de alrededor del 28% da `#68272d`, un vino apagado para formas e ilustración, nunca para texto.
4. **Acento: más claro y suave que la marca** Sube el coral a un 72% de luminosidad: `#ea868e` llega a 7,6:1 sobre el fondo, mientras que el coral original se queda en 5,1:1 y resulta más duro.
5. **Texto: un blanco roto con un rastro del tono** `#f2e9e9` da 16:1 sobre el fondo y encaja discretamente con todo lo demás.

- Fondo #170c0d: #170c0d
- Superficie #261718: #261718
- Vino profundo #68272d: #68272d
- Coral suave #ea868e: #ea868e
- Texto #f2e9e9: #f2e9e9

Una paleta oscura derivada de un único coral. Todos los colores comparten el tono, y por eso el conjunto parece una sola marca de noche.

## Usar una paleta oscura en CSS

Nombra los colores por su función para que los mismos componentes funcionen en temas claros y oscuros. El patrón de abajo define Tinta de medianoche como tema oscuro y deja que elija la configuración del sistema. [Diseño en modo oscuro](https://gradiently.design/es/guide/dark-mode-design) cubre las decisiones más amplias, como imágenes, bordes y gráficos.

```css
:root {
  color-scheme: light dark;
  --ground:  #f7f7fb;
  --surface: #ffffff;
  --text:    #151b2c;
  --accent:  #2b3a67;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:  #0b0f1a;
    --surface: #151b2c;
    --text:    #e8e6f0;
    --accent:  #8fa3d9;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
a { color: var(--accent); }
```

El acento cambia entre temas: azul marino profundo en claro, vincapervinca en oscuro. Un mismo color rara vez funciona en ambos.

## Paletas oscuras para publicaciones en redes

En un feed, una publicación oscura destaca entre fotos luminosas, pero solo si las palabras se leen a tamaño de móvil. Usa letra grande, aleja la parte más brillante del fondo del titular y da a las palabras la zona más tranquila del encuadre.

Una publicación vertical oscura de Instagram que anuncia una apertura nocturna de galería, con texto claro sobre un fondo profundo

Una publicación oscura y sombría donde el texto se apoya en la parte más tranquila del fondo y el resplandor queda lejos de las palabras.

Aquí es donde ayuda un Mark de Gradiently: coloca su zona más tranquila y de mejor contraste detrás del texto, y la tinta automática elige texto claro u oscuro para cada línea a partir de la propia paleta del Mark, así que un fondo sombrío nunca se traga el titular. Para estilos oscuros con un carácter más rico y premium, mira [paletas de colores de lujo](https://gradiently.design/es/guide/luxury-color-palettes) y la [estética dark academia](https://gradiently.design/es/guide/dark-academia-aesthetic).

## FAQ

### ¿Qué colores lleva una paleta de colores oscuros?

Un casi negro tintado para el fondo, un color de superficie algo más claro, un color medio profundo para áreas grandes, un acento más claro y un blanco roto suave para el texto.

### ¿Debo usar negro puro en modo oscuro?

Normalmente no. Un casi negro como #121212 o un oscuro tintado como #0b0f1a reduce el deslumbramiento con texto blanco y sigue dando un contraste muy alto.

### ¿Qué color de texto funciona mejor sobre un fondo oscuro?

Un blanco roto suave como #e8e6f0 o #ededed. Mantiene un contraste de alrededor de 15:1 o más sin la dureza del blanco puro.

### ¿Por qué los colores vivos quedan mal sobre un fondo oscuro?

Los colores saturados parecen vibrar contra el negro. Usa versiones más claras y algo menos saturadas para los acentos sobre fondos oscuros.