Dark Mode Palette Converter
Paste your light-mode palette and get dark-mode counterparts checked on the dark surface they will sit on — exported straight to CSS variables or a Tailwind config.
If your lightest color is at least 85% light, it becomes the dark surface. Other colors above 85% lightness become borders or raised panels; everything else is lifted until it reads on the surface.
Light mode
Dark mode, on #14191F
#F8FAFC
Surface
#14191F
Every color is checked on this
#0F172A
Text · needs 4.5:1
#C9D3E8
11.75:1 on dark surface · ✓ Readable
#3B82F6
Accent · needs 3:1
#6A9CEC
6.37:1 on dark surface · ✓ Readable
#F59E0B
Accent · needs 3:1
#E9AE49
8.93:1 on dark surface · ✓ Readable
#E2E8F0
Border / raised panel
#232D3B
1.27:1 — visible, not for text
3 of 3 text and accent colors read on the dark surface.
CSS variables
/* Light mode (default) */
:root {
--palette-color-1: #F8FAFC;
--palette-color-2: #0F172A;
--palette-color-3: #3B82F6;
--palette-color-4: #F59E0B;
--palette-color-5: #E2E8F0;
}
/* Dark mode */
[data-theme="dark"],
.dark {
--palette-color-1: #14191F;
--palette-color-2: #C9D3E8;
--palette-color-3: #6A9CEC;
--palette-color-4: #E9AE49;
--palette-color-5: #232D3B;
}Tailwind config
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
'palette': {
'color-1': '#F8FAFC',
'color-1-dark': '#14191F',
'color-2': '#0F172A',
'color-2-dark': '#C9D3E8',
'color-3': '#3B82F6',
'color-3-dark': '#6A9CEC',
'color-4': '#F59E0B',
'color-4-dark': '#E9AE49',
'color-5': '#E2E8F0',
'color-5-dark': '#232D3B',
},
},
},
},
};Dark mode is not just inversion
Naive inversion makes brand colors glare or vanish. This converter keeps each hue, turns your lightest color into the dark surface, and lifts every other color until it reads on that surface — at least 4.5:1 for text colors and 3:1 for accents — with saturation eased about 15% so nothing glows. Other very light colors, such as borders, become slightly raised dark panels instead. Treat the output as a starting point and check it in the real interface.