CSS Named Color Reference

Midnight Blue

Midnight Blue·#191970

Midnight Blue is a dark CSS named blue at #191970 that feels more cinematic, cooler, and slightly more chromatic than Navy. Use it when you need a near-night anchor for dark themes, dashboards, hero backdrops, and interface shells that should feel deep without collapsing fully into black.

Recommended text colorWhite text
Body text pairing14.85:1
Strongest RoleDark themes, terminal-like shells, and dramatic interface framing
Generate PaletteOpen Converter

Technical Values

Exact numeric values for cross-tool conversion, token mapping, and accessibility review.

HEX#191970Primary token
RGB25, 25, 112Screen values
HSL240, 64%, 27%Hue and lightness
CMYK78, 78, 0, 56Print handoff
LAB16, 32, -50Perceptual reference

Tonal Direction

Scan the ramp from light to dark to judge how Midnight Blue behaves across action states, layered surfaces, and supporting accents.

100#D6D6E5
300#9595BD
500#42428A
600#191970
800#121251

Contrast & Interface Preview

Not every foreground and background pairing behaves the same. Use these checks to decide when white text, dark text, or the color itself should take the lead.

White text on this color

Best for reversed buttons, tabs, badges, and filled action surfaces.

14.85:1AAA-level contrast

Dark text on this color

Works for larger headings and selective UI blocks, but not for dense body copy.

1.16:1Needs more separation

This color on light surface

Use this pairing when Midnight Blue becomes the link, icon, border, or emphasis color on very light surfaces.

14.10:1AAA-level contrast
Recommended text colorWhite text

White text reaches 14.85:1 against Midnight Blue, which is strong enough for body text and standard action surfaces.

Where This Color Works

  • Use Midnight Blue when you need a dark blue for dashboards, immersive shells, hero backdrops, code-like surfaces, and high-contrast product framing.
  • It is more chromatic and atmospheric than Navy, but less absolute than black, which makes it useful for deep interface structure that still wants visible blue identity.
  • Pair it with white, silver-gray neutrals, and one brighter electric or royal blue if you want the system to feel dramatic without losing clarity.

Reference Context

Color Notes

Midnight Blue is sourced from the published CSS Standard Colors library and retained here as a searchable reference swatch for product, interface, and branding work.

Hue Family

Trust-building blues for enterprise and SaaS.

Source Library
CSS Named Colors

Related Blues

Navy

Navy

#000080·CSS Standard Colors

Dark Blue

Dark Blue

#00008B·CSS Standard Colors

Indigo

Indigo

#4B0082·CSS Standard Colors

Royal Blue

Royal Blue

#4169E1·CSS Standard Colors

Black

Black

#000000·CSS Standard Colors

Palette Starting Points

Midnight Neon

Open Palette Library

Deep Sea Odyssey

Open Palette Library

Fog City Dawn

Open Palette Library

Implementation Snippets

Reference-ready snippets for CSS variables, utility-first styling, and token exports.

CSS Variables
:root {
  --color-midnight-blue: #191970;
  --color-midnight-blue-rgb: 25 25 112;
}

Drop into a global token file or CSS variable layer.

Utility Class
class="bg-[#191970] text-white"
class="hover:bg-[#121251] ring-1 ring-[#191970]"

Direct utility usage for a fast prototype or content block.

JSON Token
{
  "midnightBlue": "#191970",
  "midnightBlueRgb": [25, 25, 112],
  "midnightBlueHsl": [240, 64, 27]
}

Useful for design token exports and API-driven theme objects.

Move This Color Into the Workflow

Carry Midnight Blue into conversion, brand palette generation, and palette exploration workflows to test how it behaves across interface scenarios.

Generate PaletteBrowse More Colors