Build your surfaces
Effective dark mode UI isn’t just black—it’s a hierarchy of deep, low-lightness tones punctuated by careful, vivid accents. This preset configures the generator to output rich, elevated background shades alongside complementary highlights that pop without causing eye strain. Tap the spacebar to discover new nocturnal combinations, or use Shift+Space to slightly adjust the mood of your current setup.
Secure the foundations
Once you find the ideal canvas color for your application background, click the lock icon to preserve it. When you generate again, the tool will rotate through new accent colors and secondary surface shades while keeping your foundational dark tone exactly where it is.
Export for development
Click directly on any swatch’s hex value to copy it to your clipboard. To bring the entire scheme into your codebase, open the export menu for ready-to-paste CSS variables or a JSON array. If you need a complete elevation system for cards and modals, send any swatch to the shade generator to expand it into a full dark-mode gradient ramp.