Worked palette example
Slate Terminal uses layers and text contrast instead of pure-black everywhere.
Colors here are examples, not an automatic accessibility certificate. Test every foreground/background pair before using these values for text.
Open this example in the eight-role Theme Studio →Avoid treating every surface as pure black
A near-black navy or slate can feel calmer and distinguish panels more easily than #000000. Choose one dark background and a slightly lighter card surface, then test how dialogs and sticky navigation sit above them. Too many dark surface tones, however, can still create an inconsistent application.
Adjust accent intensity for dark canvases
A vivid highlight that feels moderate on white can glow aggressively against deep navy. Test the button fill and its label separately; bright saturated button backgrounds often need dark text. Keep accent colors for actionable or meaningful content and avoid decorating every chart and icon with maximum saturation.
Make muted text readable, not nearly invisible
Grey labels often disappear on dark backgrounds when opacity is reduced indiscriminately. Assign a deliberate muted token and measure contrast against background and surface layers. Avoid using placeholder text as the only accessible label for a control; users need persistent labels and visible focus states.
Test overlays and graphics
Screenshots, transparent icons, box shadows and semi-transparent badges change appearance on dark surfaces. Preview charts with several adjacent series and make sure their distinctions are not only color-based. Compare actual devices at low and high brightness when possible.
Offer different values for light and dark
A light theme and dark theme should usually maintain the same role names while providing distinct color values. This makes app components easy to maintain. The Theme Studio lets you trial dark image-derived backgrounds, but it still expects you to review button, secondary-copy and surface contrast.
Before you ship
Compare the colors against the actual design, verify small text and form states with the Contrast Checker, and export named tokens so future edits remain consistent. There is no palette that automatically makes every interface accessible.
Try it with real colors.
Explore a harmonious palette and see what your choices do in an interface.
Open color studio