ADVERT

🌙 Dark Mode Color Pairs

Build coordinated light and dark theme CSS variables from a single neutral and accent color. Tune contrast and vibrancy then copy the finished tokens in seconds.

Neutral anchor

Influences backgrounds, surfaces, borders, and text balance.

Accent color

Used for interactive states, call-to-action elements, and focus rings.

Surface softness

Higher values produce lighter cards in light mode and darker panels in dark mode.

Contrast strength

Controls the tonal distance between text and its background for each theme.

Accent vibrancy

Boost the saturation and lightness of accent tokens for extra punch in both modes.

Light theme

Interface preview

Crisp neutrals with balanced contrast for clean interfaces and comfortable reading.

Dark theme

Interface preview

Deep backgrounds with elevated surfaces and luminous accent treatments.

Generated variables

Each token is generated twice with identical naming for both themes.

--color-bgBackground

#D5D7D9Light#080A0EDark

--color-surfaceSurface

#B8BBBFLight#0E1219Dark

--color-surface-strongRaised Surface

#9DA1A8Light#121820Dark

--color-textPrimary Text

#030405Light#D7D9DBDark

--color-text-mutedMuted Text

#484A4CLight#97999DDark

--color-borderBorder

#7F8287Light#4A4E54Dark

--color-accentAccent

#8C8EFCLight#DEDEFEDark

--color-accent-contrastAccent Contrast

#f8fafcLight#0f172aDark

--color-accent-softAccent Soft

#CACCDELight#373943Dark

--color-ringFocus Ring

#5C5EA6Light#DCDDF5Dark

Copy CSS variables

Paste into your global stylesheet or design token file. Variables map to [data-theme="light"|"dark"] selectors.

:root[data-theme="light"] {
  --color-bg: #D5D7D9;
  --color-surface: #B8BBBF;
  --color-surface-strong: #9DA1A8;
  --color-text: #030405;
  --color-text-muted: #484A4C;
  --color-border: #7F8287;
  --color-accent: #8C8EFC;
  --color-accent-contrast: #f8fafc;
  --color-accent-soft: #CACCDE;
  --color-ring: #5C5EA6;
}

:root[data-theme="dark"] {
  --color-bg: #080A0E;
  --color-surface: #0E1219;
  --color-surface-strong: #121820;
  --color-text: #D7D9DB;
  --color-text-muted: #97999D;
  --color-border: #4A4E54;
  --color-accent: #DEDEFE;
  --color-accent-contrast: #0f172a;
  --color-accent-soft: #373943;
  --color-ring: #DCDDF5;
}

ADVERT

More like this

Upload an image and extract dominant colors. Generate beautiful palettes for design, branding, or art.

Create linear CSS gradients and copy code instantly. Design custom gradients with multiple colors and directions.

Convert colors between RGB and HSL with a live color swatch.

Design and preview CSS filters including blur, brightness, contrast, grayscale, sepia, saturate, and hue-rotate. Copy the CSS instantly.

Browse Google’s Material Design color palettes. View all shades, copy hex codes instantly, and preview text on background colors.

Browse the Flat UI Colors palettes (v1 & v2). View all swatches and copy hex codes instantly for use in your designs and code.

ADVERT