color palettesAfter hours
Dark
A midnight base with a soft electric pulse.
Mood / A considered starting point
Dark mode color palettes.
Build hierarchy with separate dark surfaces, controlled bright accents and readable text—not a simple inversion.
The collection
Original sRGB combinations. Each detail page includes website roles, CSS and measured pairs.
Violet hour
Dark
Velvety violet with a luminous pink finish.
Midnight mint
Dark
Cool midnight with a luminous mint signal.
Aubergine ember
Dark
Aubergine shadows and a warm ember.
Graphite ice
Dark
Graphite panels with an icy blue action.
Obsidian lime
Dark
Near-black green with a lime edge.
Night porcelain
Dark
Blue-black pages with porcelain type.
Deep lagoon
Dark
A deep lagoon lit by pale sand.
Bordeaux moon
Dark
Bordeaux depth with a soft moonlit green.
Ink apricot
Dark
Inky blue with warm apricot light.
Charcoal orchid
Dark
Charcoal warmth and an orchid glow.
Forest neon
Dark
A forest base with brighter leaf details.
Navy paprika
Dark
Navy structure with a paprika highlight.
Black pearl
Dark
Pearl neutrals on a cool charcoal base.
Plum copper
Dark
Dark plum with a copper-colored detail.
Espresso cream
Dark
Espresso panels and creamy typography.
Storm lemon
Dark
Storm blue with a clear lemon marker.
Violet glacier
Dark
Violet night with a glacial blue accent.
Olive midnight
Dark
Olive shadows with a muted peach glow.
Carbon peach
Dark
Carbon neutrals with a single warm note.
Atlantic rose
Dark
Atlantic depth with a pale rose highlight.
Mulberry gold
Dark
Mulberry night and a soft gold edge.
Pine silver
Dark
Pine green with a silver-gray finish.
Nocturne coral
Dark
An evening violet with a coral finale.
Make the colors work
More than a set of swatches.
Start with two dark surfaces
After Hours separates the page from cards before adding periwinkle and warm gold. A dashboard needs that distinction around dense information; an editorial page may rely more on spacing. Avoid using a lighter card surface as the only indication that a form control exists.
Check bright fills and their labels
A pale action may work against a dark page while needing a dark label inside it. Review hover as well as the default state. The studio checks both themes separately instead of assuming a light-theme result carries over.
Offer a deliberate theme choice
Respect the visitor’s system preference while allowing an explicit theme where the product supports one. The CSS export includes those selectors. Test diagrams, photographs and embedded content separately: changing the surrounding tokens does not recolor those assets.