Storm Cloud color palette
Overcast and brooding. These grays carry a purple-blue tint, from thundercloud #3C3C54 to pale overcast #C5C5DD, and the even steps make them read like one color at five depths. The tint makes it softer and more interesting than plain gray. Musicians and writers looking for a moody portfolio should start here.
Storm Cloud palette in use
Use #3C3C54 as a dark background with #C5C5DD for text, or reverse the two for a light layout. #7B7B9B and #9E9EBC suit buttons and borders, and #5C5C7A works for cards.
This pair measures 6.30:1, so it works for body text too. The button uses #7B7B9B with black text.
ButtonGood for
- Musician website
- Moody photography portfolio
- Writer's blog
- Productivity tool UI
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#3C3C54 | #C5C5DD | 6.30:1 | AA |
#3C3C54 | #9E9EBC | 4.10:1 | AA large |
#5C5C7A | #C5C5DD | 3.79:1 | AA large |
Storm Cloud palette as code
CSS variables
:root {
--storm-cloud-1: #3C3C54;
--storm-cloud-2: #5C5C7A;
--storm-cloud-3: #7B7B9B;
--storm-cloud-4: #9E9EBC;
--storm-cloud-5: #C5C5DD;
}Tailwind v4
@theme {
--color-storm-cloud-1: #3C3C54;
--color-storm-cloud-2: #5C5C7A;
--color-storm-cloud-3: #7B7B9B;
--color-storm-cloud-4: #9E9EBC;
--color-storm-cloud-5: #C5C5DD;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'storm-cloud': {
100: '#3C3C54',
200: '#5C5C7A',
300: '#7B7B9B',
400: '#9E9EBC',
500: '#C5C5DD',
},SCSS
$storm-cloud-1: #3C3C54;
$storm-cloud-2: #5C5C7A;
$storm-cloud-3: #7B7B9B;
$storm-cloud-4: #9E9EBC;
$storm-cloud-5: #C5C5DD;JSON
["#3C3C54","#5C5C7A","#7B7B9B","#9E9EBC","#C5C5DD"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.