Sunflower color palette
Yellow petals into an orange-red center: gold #FFD700, amber, dark orange #FF8C00, coral and tomato #FF6347. The five warm colors run in a smooth sequence, every one of them bright, which makes for an easy gradient. Without a dark shade, the set needs brown or near-black text. It's sunny and optimistic, a good match for farm stands and solar installers alike.
Sunflower palette in use
Use a cream or white page with dark brown text. #FF6347 makes the button color, #FFD700 suits highlight bars and badges, and the middle three blend into hero gradients.
This pair measures 14.97:1, so it works for body text too. The button uses #FF6347 with black text.
ButtonGood for
- Summer festival banner
- Farm stand signage
- Solar company website
- Kids' event flyer
Readable color pairs
No two colors in this palette reach 3:1 contrast, so use it for backgrounds and shapes, and set text in white or black. Check any pair in the contrast checker.
Sunflower palette as code
CSS variables
:root {
--sunflower-1: #FFD700;
--sunflower-2: #FFA500;
--sunflower-3: #FF8C00;
--sunflower-4: #FF7F50;
--sunflower-5: #FF6347;
}Tailwind v4
@theme {
--color-sunflower-1: #FFD700;
--color-sunflower-2: #FFA500;
--color-sunflower-3: #FF8C00;
--color-sunflower-4: #FF7F50;
--color-sunflower-5: #FF6347;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'sunflower': {
100: '#FFD700',
200: '#FFA500',
300: '#FF8C00',
400: '#FF7F50',
500: '#FF6347',
},SCSS
$sunflower-1: #FFD700;
$sunflower-2: #FFA500;
$sunflower-3: #FF8C00;
$sunflower-4: #FF7F50;
$sunflower-5: #FF6347;JSON
["#FFD700","#FFA500","#FF8C00","#FF7F50","#FF6347"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.