Dark Mode Palette Converter
Paste your light-mode palette and get a tuned dark-mode counterpart: lightness flipped around the midtones, saturation eased to avoid neon glare — exported straight to CSS variables or a Tailwind config.
#f8fafc
→#111922
#0f172a
→#DBE1F0
#3b82f6
→#113F88
#f59e0b
→#F1CD8D
#e2e8f0
→#131920
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: #111922;
--palette-color-2: #DBE1F0;
--palette-color-3: #113F88;
--palette-color-4: #F1CD8D;
--palette-color-5: #131920;
}Tailwind config
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
'palette': {
'color-1': '#f8fafc',
'color-1-dark': '#111922',
'color-2': '#0f172a',
'color-2-dark': '#DBE1F0',
'color-3': '#3b82f6',
'color-3-dark': '#113F88',
'color-4': '#f59e0b',
'color-4-dark': '#F1CD8D',
'color-5': '#e2e8f0',
'color-5-dark': '#131920',
},
},
},
},
};Dark mode is not just inversion
Naive inversion makes brand colors glare and flattens hierarchy. This mapping keeps hue fixed: very light surfaces become dark surfaces, midtones move gently, and saturation is eased about 15% — saturated colors appear to glow on dark backgrounds. Treat the output as a starting point and verify contrast in the real interface.