ToolHop.

ADVERT

Dark Mode Color Pair Generator

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.

Palette Controls

Influences backgrounds, surfaces, borders, and text balance.

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

46

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

68

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

22

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

Theme Preview

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

How to use this tool

  1. Set neutral and accent anchor colors.
  2. Tune surface softness, contrast, and accent vibrancy sliders.
  3. Copy generated light and dark theme CSS variables into your token system.

What it generates

  • Matched light and dark palettes with shared semantic token names.
  • Surface, text, border, accent, and focus-ring variables for UI implementation.
  • Preview cards to validate contrast and accent behavior before export.

Usage guidance

  • Start with neutral colors that reflect your brand’s base tone.
  • Increase contrast for content-heavy interfaces and accessibility headroom.
  • Use accent vibrancy carefully to keep call-to-action hierarchy clear.

FAQ

Can I use this with design tokens?
Yes. Output is structured as CSS custom properties and can be mapped to token pipelines.
Are light and dark names consistent?
Yes. Both themes use the same token keys so switching themes does not change variable references.
Does this guarantee WCAG compliance?
It provides strong defaults and previews, but final accessibility checks should still be run on real UI combinations.

ADVERT

More like this

ADVERT