Dark Mode Colour Palette Ideas
Dark mode works best as a hierarchy of surfaces, readable text and restrained signals, not a black canvas plus neon accents. This edit brings together catalogue palettes with defined dark backgrounds and light text, from cool software blues to copper, ember and softened paper neutrals. Use it to assign roles before styling: a deep surface for the page, one brighter layer for panels, a dependable text colour, then a limited accent for action or status. These examples are starting points rather than ready-made accessibility systems; test combinations in context, especially small text, icons and disabled states.
Start with a surface ladder, not pure black
Use Console Night for a calm blue-black application shell: #0B1020 for the page, #172A4D for raised panels, #E8EEF7 for reading text and #3B82F6 for the selected tab or primary action. This leaves the blue visible without turning every control into a beacon. CSS variables: --surface: #0B1020; --panel: #172A4D; --text: #E8EEF7; --action: #3B82F6;. The text/background pair measures 16.23:1, exceeding the W3C WCAG 2.2 contrast thresholds of 4.5:1 for normal text and 3:1 for large text: https://www.w3.org/TR/WCAG22/#contrast-minimum. Recheck every component state rather than assuming the entire palette passes.
Give blue and orange different jobs
Blue is useful for orientation; orange reads better as an interruption. In Deadline Tomorrow, set #0D1117 as the workspace, #58A6FF for links, active filters and focused inputs, and reserve #F97316 for warnings, expiring tasks or an undo action. Midnight Petrol Station offers a quieter variation: #121A22 ground, #286B89 for routine controls, #E9A53A for a single booking or checkout prompt, and #F5F1E8 for copy. Do not make both colours compete on the same row. A practical Tailwind mapping is bg-[#0D1117] text-[#C9D1D9] with focus:ring-[#58A6FF] and a warning badge in bg-[#F97316].
Soften dark mode with warm neutral light
For editorial, hospitality or overnight-travel screens, a warm paper text colour can feel less clinical than stark white. Stout & Slate pairs #20252B with #F5F1E8, a calculated 13.69:1 text/background ratio, while its #C7A86B brass works well for a small premium marker rather than body copy. Film Lab uses #171A1C, #F0E5D2 and #C85A3F for a warmer creative direction; Sleeper Train adds #D6A85F copper and #E07A5F signal ember to #101820. Use the pale neutral for headings and paragraphs, then place warm accents on icons, dividers or compact buttons. Test accent text separately before using it for labels.
Palettes to explore
- Night Mode Studio: #111827, #E5E7EB, #818CF8, #F472B6, #374151
- Deadline Tomorrow: #0D1117, #58A6FF, #F97316, #238636, #C9D1D9
- Console Night: #0B1020, #172A4D, #3B82F6, #F06A4A, #E8EEF7
- Midnight Petrol Station: #121A22, #286B89, #B4C1BE, #E9A53A, #F5F1E8
- Stout & Slate: #20252B, #111315, #65727E, #C7A86B, #F5F1E8
- Film Lab: #171A1C, #F0E5D2, #C85A3F, #4E8C95, #E1A85A
- Sleeper Train: #101820, #D6A85F, #6F8790, #E07A5F, #F4EBDD
- Darkroom Red: #161515, #A9202F, #5E3A48, #AEB4B5, #F5F0E8