Golden Gate color palette
A suspension bridge in late sun: brick red #C0392B and tomato #E74C3C for the towers, burnt orange #E67E22 and amber #F39C12 for the light on them, and sunflower #F1C40F for the sky behind. It runs red to yellow in one warm sweep, all saturated. For long body copy, bring in a charcoal. City tour companies and sunset photographers will get the most from it.
Golden Gate palette in use
On white, use #C0392B for headings and buttons and charcoal for body text. #F39C12 and #F1C40F work for highlight banners, and #E67E22 suits hover states and icons.
This pair measures 12.64:1, so it works for body text too. The button uses #E74C3C with black text.
ButtonGood for
- City tour website
- Sunset photography portfolio
- Food truck menu
- Fall event flyer
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 |
|---|---|---|---|
#C0392B | #F1C40F | 3.27:1 | AA large |
Golden Gate palette as code
CSS variables
:root {
--golden-gate-1: #C0392B;
--golden-gate-2: #E74C3C;
--golden-gate-3: #E67E22;
--golden-gate-4: #F39C12;
--golden-gate-5: #F1C40F;
}Tailwind v4
@theme {
--color-golden-gate-1: #C0392B;
--color-golden-gate-2: #E74C3C;
--color-golden-gate-3: #E67E22;
--color-golden-gate-4: #F39C12;
--color-golden-gate-5: #F1C40F;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'golden-gate': {
100: '#C0392B',
200: '#E74C3C',
300: '#E67E22',
400: '#F39C12',
500: '#F1C40F',
},SCSS
$golden-gate-1: #C0392B;
$golden-gate-2: #E74C3C;
$golden-gate-3: #E67E22;
$golden-gate-4: #F39C12;
$golden-gate-5: #F1C40F;JSON
["#C0392B","#E74C3C","#E67E22","#F39C12","#F1C40F"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.