Paletas de colores para modo oscuro: 12 paletas con códigos hex para la noche
Doce paletas de colores para modo oscuro con códigos hex exactos: acentos que brillan de noche, acentos que se hunden, un acento para dos temas y texto blanco roto que no deslumbra.
Una paleta de modo oscuro no es la clara puesta del revés. El acento se comporta distinto sobre una página oscura, el texto necesita ser más suave y algunos colores simplemente dejan de funcionar. Aquí tienes doce paletas oscuras con todos sus códigos hex, pensadas para mostrar qué cambia de noche.
El modo oscuro invierte tu acento
Los acentos que sufren sobre blanco son los que brillan sobre una superficie oscura. Los acentos que se ven sólidos sobre blanco pueden perder filo. Eso significa que un tema oscuro no puede tomar prestado el acento del tema claro sin comprobarlo.
Cada paleta de abajo es una tinta clara, un acento y una superficie oscura. Los recuadros muestran el acento sobre la página oscura y sobre blanco. Para el sistema que hay detrás de un tema oscuro, mira nuestro paper sobre sistemas de color para modo oscuro.
Lime
Electric Lime #C6F432 sobre Graphite #17181C: brilla
El mismo acento sobre blanco: tenue
Chalk #F2F3EE sobre Graphite
Electric Lime es casi invisible sobre blanco y brilla sobre Graphite. Los colores que sufren sobre blanco son los que resplandecen de noche.
Pink
Hot Pink #FF4F9A sobre Night Plum #1A1218: brilla
El mismo acento sobre blanco: más débil
Blush White #F6EEF2 sobre Night Plum
Hot Pink es más débil sobre blanco y mucho más fuerte sobre Night Plum.
Amber
Amber #FFB020 sobre Coffee Black #1B1610: brilla
El mismo acento sobre blanco: tenue
Warm White #F5F0E6 sobre Coffee Black
Amber es un acento débil sobre blanco y uno cálido y fuerte sobre Coffee Black.
Royal
Royal #3B4CCA sobre Midnight #121426: se hunde
El mismo acento sobre blanco: fuerte
Frost #EEF0FA sobre Midnight
Royal es el azul de manual para modo claro. Sobre Midnight se queda por debajo de lo que un botón necesita para verse como forma: mismo hex, otra página.
Mismo hex, otra página. Royal es el que hay que vigilar: un botón que funciona sobre blanco puede hundirse de noche.
Un acento, dos temas
Un botón tiene que destacar sobre la página en la que está. Waikiki lo logra en su página clara y en la oscura. Very Berry también. Un hex, ambos temas.
Lime Punch y Gentian Blue no. Cada uno luce genial en un tema y desaparece en el otro.
Waikiki
Waikiki
Sobre Silver Bird #FBF8F1: pasa
Sobre Midnight Oil #10141F: pasa
Un turquesa de tono medio que destaca en ambas páginas. Un hex, ambos temas.
Very Berry
Very Berry
Sobre French Porcelain #F7F4FB: pasa
Sobre Twilight Zone #0F1C16: pasa
Otro tono medio que funciona en su página clara y en la oscura.
Lime Punch
Lime Punch
Sobre Ceramic #FBFAF5: falla
Sobre Infinite Night #171538: pasa
Demasiado claro para modo claro: sobre su superficie diurna el botón casi desaparece. Sobre Infinite Night brilla.
Gentian Blue
Gentian Blue
Sobre Open Book #F6EFE5: pasa
Sobre Balsamico #1C1612: falla
Demasiado oscuro para modo oscuro. Es fuerte sobre Open Book y se desvanece sobre Balsamico.
Si quieres un acento para ambos temas, elige un tono medio y compruébalo dos veces. Si no, dale a cada tema su propio tono. Nuestra guía de diseño de modo oscuro explica cómo lanzar ese segundo tema.
El blanco roto gana al blanco puro
Blanco puro sobre una superficie casi negra es el mayor contraste posible, y ese es el problema: deslumbra. Los blancos rotos de estas paletas siguen siendo mucho más fáciles de leer de lo que necesita un texto de cuerpo.
El tema oscuro de Material Design fija su texto principal al 87% de blanco por la misma razón. Dale al blanco roto un poco de calidez o un poco de frío, y deja que el acento hable.
Smoked Salmon
Distant Cloud #E7ECEC sobre Dark Moon #0B1B1F
Blanco puro #FFFFFF sobre Dark Moon: deslumbra
Smoked Salmon #FF887A sobre Dark Moon
Un blanco roto frío con un acento coral cálido. El acento destaca con claridad sin ayuda.
Minted Elegance
Vanilla Sugar #F1EBDF sobre Violet Void #1C1022
Blanco puro #FFFFFF sobre Violet Void: deslumbra
Minted Elegance #4FCB9C sobre Violet Void
Vanilla Sugar tiene un toque de calidez, y el acento menta tiene mucho espacio sobre Violet Void.
Malibu
Milk and Cookies #EFE7E7 sobre Asphalt #1C140F
Blanco puro #FFFFFF sobre Asphalt: deslumbra
Malibu #57BAF0 sobre Asphalt
Un blanco roto cálido sobre un casi negro cálido, con un azul cielo que lo atraviesa.
Dream Vapour
Star Magnolia #EAEFE4 sobre Black Stallion #0E1A16
Blanco puro #FFFFFF sobre Black Stallion: deslumbra
Dream Vapour #BB9DF0 sobre Black Stallion
Star Magnolia tira ligeramente a verde, lo que combina bien con un acento lila suave.
Todos los acentos de estas cuatro destacan con claridad sobre su superficie nocturna, así que el texto puede quedarse callado.
Las doce paletas en una tabla
| Paleta | Colores | Qué muestra |
|---|---|---|
| Lime | Chalk #F2F3EE, Electric Lime #C6F432, Graphite #17181C | Brilla en oscuro |
| Pink | Blush White #F6EEF2, Hot Pink #FF4F9A, Night Plum #1A1218 | Más fuerte en oscuro |
| Amber | Warm White #F5F0E6, Amber #FFB020, Coffee Black #1B1610 | Brilla en oscuro |
| Royal | Frost #EEF0FA, Royal #3B4CCA, Midnight #121426 | Se hunde en oscuro |
| Waikiki | Midnight Oil #10141F, Waikiki #0098A4, Silver Bird #FBF8F1 | Funciona en ambos temas |
| Very Berry | Twilight Zone #0F1C16, Very Berry #CE4390, French Porcelain #F7F4FB | Funciona en ambos temas |
| Lime Punch | Infinite Night #171538, Lime Punch #B7DD31, Ceramic #FBFAF5 | Solo funciona en oscuro |
| Gentian Blue | Balsamico #1C1612, Gentian Blue #292BAE, Open Book #F6EFE5 | Solo funciona en claro |
| Smoked Salmon | Distant Cloud #E7ECEC, Smoked Salmon #FF887A, Dark Moon #0B1B1F | Texto blanco roto |
| Minted Elegance | Vanilla Sugar #F1EBDF, Minted Elegance #4FCB9C, Violet Void #1C1022 | Texto blanco roto |
| Malibu | Milk and Cookies #EFE7E7, Malibu #57BAF0, Asphalt #1C140F | Texto blanco roto |
| Dream Vapour | Star Magnolia #EAEFE4, Dream Vapour #BB9DF0, Black Stallion #0E1A16 | Texto blanco roto |
Los números, para quien tiene que defender la elección
Cada combinación se midió con la fórmula de contraste de WCAG 2 contra la superficie sobre la que está. Es la única tabla del paper con ratios.
| Paleta | Prueba | Ratio | Resultado |
|---|---|---|---|
| Lime | Acento sobre la superficie oscura / sobre blanco | 13.84:1 / 1.28:1 | Brilla, tenue |
| Pink | Acento sobre la superficie oscura / sobre blanco | 5.98:1 / 3.07:1 | Más fuerte en oscuro |
| Amber | Acento sobre la superficie oscura / sobre blanco | 9.82:1 / 1.83:1 | Brilla, tenue |
| Royal | Acento sobre la superficie oscura / sobre blanco | 2.66:1 / 6.83:1 | Se hunde en oscuro |
| Waikiki | Botón en claro / en oscuro | 3.2:1 / 5.2:1 | Pasa en ambos |
| Very Berry | Interruptor en claro / en oscuro | 3.9:1 / 4.0:1 | Pasa en ambos |
| Lime Punch | Botón en claro / en oscuro | 1.4:1 / 11.1:1 | Falla, pasa |
| Gentian Blue | Botón play en claro / en oscuro | 8.9:1 / 1.7:1 | Pasa, falla |
| Smoked Salmon | Texto blanco roto / blanco puro / acento | 14.7:1 / 17.6:1 / 7.6:1 | Pasa, deslumbra, pasa |
| Minted Elegance | Texto blanco roto / blanco puro / acento | 15.4:1 / 18.3:1 / 9.0:1 | Pasa, deslumbra, pasa |
| Malibu | Texto blanco roto / blanco puro / acento | 14.9:1 / 18.1:1 / 8.3:1 | Pasa, deslumbra, pasa |
| Dream Vapour | Texto blanco roto / blanco puro / acento | 15.2:1 / 17.8:1 / 7.8:1 | Pasa, deslumbra, pasa |
Cómo construir tu paleta oscura
- Elige primero la superficie oscura. Un casi negro como Graphite #17181C o Violet Void #1C1022 es más suave que el negro puro.
- Pon el texto en un blanco roto. Añade un poco de calidez o un poco de frío, como en Vanilla Sugar #F1EBDF.
- Prueba el acento sobre la superficie oscura. No reutilices el acento del tema claro sin comprobarlo.
- Decide un acento o dos. Si un acento tiene que servir a ambos temas, elige un tono medio y compruébalo en las dos páginas. Si no, dale a cada tema su propio tono.
- Comprueba el botón como forma. Tiene que destacar sobre la página, no solo leerse como una etiqueta.
Consigue los archivos de cada set
Cada set es un set de color gratuito en Forge, con códigos para copiar con un toque, archivos de muestras para Figma y Adobe (ASE), variables CSS y design tokens.
Set de color gratis
El modo oscuro invierte tu acento: Lime, Pink, Amber, Royal
Todos los hex, más muestras ASE, variables CSS y design tokens.
Set de color gratis
Un acento, dos temas: Waikiki, Very Berry, Lime Punch, Gentian Blue
Todos los hex, más muestras ASE, variables CSS y design tokens.
Set de color gratis
Blanco roto para modo oscuro: Smoked Salmon, Minted Elegance, Malibu, Dream Vapour
Todos los hex, más muestras ASE, variables CSS y design tokens.
FAQ
¿Qué colores funcionan mejor en una paleta de modo oscuro?
Una superficie casi negra, un blanco roto para el texto y un acento que destaque sobre lo oscuro. Smoked Salmon #FF887A sobre Dark Moon #0B1B1F con Distant Cloud #E7ECEC para el texto es un buen ejemplo.
¿Debe el modo oscuro usar texto blanco puro?
No. El blanco puro sobre una superficie casi negra deslumbra. Un blanco roto como Vanilla Sugar #F1EBDF sigue siendo mucho más fácil de leer de lo que necesita un texto de cuerpo, y es más suave.
¿Puedo usar el mismo color de acento en modo claro y oscuro?
Solo si es un tono medio. Waikiki #0098A4 destaca en ambas páginas. Lime Punch #B7DD31 desaparece en claro y Gentian Blue #292BAE desaparece en oscuro.
¿Por qué mi botón azul desaparece en modo oscuro?
Un azul fuerte sobre blanco puede ser demasiado oscuro para una superficie oscura. Royal #3B4CCA se hunde sobre Midnight #121426. Usa un azul más claro para el tema oscuro.
¿De qué color deben ser los botones del modo oscuro?
Del que destaque sobre la superficie oscura. Electric Lime #C6F432, Hot Pink #FF4F9A y Amber #FFB020 lo hacen, porque los colores brillantes resplandecen de noche.
¿Cuál es el mejor color de fondo para el modo oscuro?
Un casi negro como Graphite #17181C o Coffee Black #1B1610, en lugar de negro puro. Es más suave junto a un blanco roto y aun así deja que el acento brille.
Fuentes
- Nombres de color y códigos hex de los sets de color de UX Brainy en Forge, vol 05, 09 y 10. El contraste se calculó con la fórmula de WCAG 2 contra la superficie sobre la que está cada color.
- Los umbrales de texto y forma siguen W3C WCAG 2.2: Contrast (Minimum) y Non-text Contrast.
- El tema oscuro de Material Design fija el texto principal al 87% de blanco: Material Design, Dark theme.
- Publicado originalmente como tres carruseles en UX Brainy: El acento que funciona sobre blanco puede desaparecer en modo oscuro, Un acento para modo claro y oscuro solo funciona en el punto medio y El modo oscuro no necesita texto blanco puro.
Want a dark theme designed and tested for your own product, not borrowed from the light one? Our team designs interfaces that hold up in both themes.
Get Started
