CSS Colour Palette Examples
These CSS colour palette examples are organised around colour jobs: surface, text, primary action, muted support and alert. Instead of copying every swatch into a stylesheet, choose a palette with a legible base pair first, then reserve its vivid colour for actions and state. The selection moves from calm blue-and-amber light interfaces to orange-accented layouts and high-contrast dark screens. Each featured palette has enough tonal separation to make a compact token system, but every component and state still needs checking.
Start with a role-based light interface
Begin with roles rather than colour names. Airport Lounge pairs #F1F3F2 as a soft page surface with #17212B for reading text, #17324D for primary controls and #E2A93B for a restrained status or notification accent. In CSS, define --surface: #F1F3F2; --ink: #17212B; --primary: #17324D; --accent: #E2A93B; then use the primary colour for buttons and links rather than filling every card with blue. This leaves the amber available for boarding-style labels, focus details or small data highlights. The neutral field keeps dense forms and tables calmer than a fully tinted layout.
Use blue and orange to create hierarchy, not noise
For a product page with movement or wayfinding, Electric Motorway gives a clear sequence: #E8F0EF for the canvas, #102A38 for headings and body text, #164E63 for navigation and #E6CD3D for the moment that needs attention. A practical token set is --surface: #E8F0EF; --ink: #102A38; --brand: #164E63; --signal: #E6CD3D;. Keep the yellow signal for an active route, progress marker or compact badge, while blue handles repeated actions. For a warmer variant, Weekend Boarding Pass combines #1976A2 with #FF6600 and #27323A on #F6F5F0; use the orange only for a single conversion action.
Make dark themes legible before adding energy
A dark palette needs a deliberate text pair before its bright accents earn a role. Console Night uses #0B1020 as the surface and #E8EEF7 for text; that pair measures 16.23:1, exceeding the 4.5:1 normal-text and 3:1 large-text thresholds in W3C WCAG guidance: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html. Set --surface: #0B1020; --ink: #E8EEF7; --primary: #3B82F6; --alert: #F06A4A;. Use blue for selected controls and coral for a destructive or time-sensitive state, not ordinary copy. Film Lab and Midnight Petrol Station offer darker, warmer alternatives. Check every hover, muted and disabled pairing separately; this does not make the whole palette automatically accessible.
Palettes to explore
- Architecture Desk: #E8E3D9, #252A2D, #3E6578, #A8A49A, #C98936
- Editorial Layout: #F6F1E8, #252525, #244B63, #789184, #C85B42
- Airport Lounge: #F1F3F2, #17324D, #6C8799, #E2A93B, #17212B
- Weekend Boarding Pass: #F6F5F0, #FF6600, #1976A2, #F1C34B, #27323A
- Electric Motorway: #E8F0EF, #164E63, #45C6BE, #E6CD3D, #102A38
- Console Night: #0B1020, #172A4D, #3B82F6, #F06A4A, #E8EEF7
- Film Lab: #171A1C, #F0E5D2, #C85A3F, #4E8C95, #E1A85A
- Midnight Petrol Station: #121A22, #286B89, #B4C1BE, #E9A53A, #F5F1E8