Golden Hour color palette
Amber #FF9F1C and apricot #FFBF69 are the late-afternoon light, and pale aqua #CBF3F0 and teal #2EC4B6 are the sky that's still blue behind it. Ink navy #011627 is almost black and gives the set a strong text color, which a lot of warm palettes lack. The whole thing feels relaxed and photographic. Wedding photographers and boutique hotels will like it most, since it flatters warm-toned photos.
Golden Hour palette in use
Text in #011627 on a soft #CBF3F0 page reads cleanly. #FF9F1C is the button color, with #2EC4B6 for links and #FFBF69 for highlight blocks.
This pair measures 15.38:1, so it works for body text too. The button uses #FF9F1C with black text.
ButtonGood for
- Photography portfolio
- Boutique hotel website
- Travel blog theme
- Summer event landing page
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 |
|---|---|---|---|
#011627 | #CBF3F0 | 15.38:1 | AAA |
#011627 | #FFBF69 | 11.27:1 | AAA |
#011627 | #FF9F1C | 8.93:1 | AAA |
#011627 | #2EC4B6 | 8.45:1 | AAA |
Golden Hour palette as code
CSS variables
:root {
--golden-hour-1: #FF9F1C;
--golden-hour-2: #FFBF69;
--golden-hour-3: #CBF3F0;
--golden-hour-4: #2EC4B6;
--golden-hour-5: #011627;
}Tailwind v4
@theme {
--color-golden-hour-1: #FF9F1C;
--color-golden-hour-2: #FFBF69;
--color-golden-hour-3: #CBF3F0;
--color-golden-hour-4: #2EC4B6;
--color-golden-hour-5: #011627;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'golden-hour': {
100: '#FF9F1C',
200: '#FFBF69',
300: '#CBF3F0',
400: '#2EC4B6',
500: '#011627',
},SCSS
$golden-hour-1: #FF9F1C;
$golden-hour-2: #FFBF69;
$golden-hour-3: #CBF3F0;
$golden-hour-4: #2EC4B6;
$golden-hour-5: #011627;JSON
["#FF9F1C","#FFBF69","#CBF3F0","#2EC4B6","#011627"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.