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

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

Noche en el bosque

Sangre de buey y cobre

Berenjena

Carbón y brasa

Verde azulado profundo

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 y degradados sombríos.

Reglas para paletas oscuras que se leen

¿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.

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. Aquí un coral de marca, #e0525d, se convierte en un juego oscuro completo.

1. 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. 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. 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. 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. 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.

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 cubre las decisiones más amplias, como imágenes, bordes y gráficos.

: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); }

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.

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 y la estética dark academia.