Yellow Color Palette
Optimism · Warmth · Energy
A warm yellow palette from pale lemon to deep amber. Yellow conveys optimism, warmth, and energy. High-visibility and attention-grabbing when used as an accent, but requires careful pairing to remain readable.
| Swatch | Name | Hex |
|---|---|---|
| Yellow 50 | #FEFCE8 | |
| Yellow 200 | #FEF08A | |
| Yellow 400 | #FACC15 | |
| Yellow 500 | #EAB308 | |
| Amber 700 | #A16207 | |
| Amber 900 | #713F12 |
Best For
Yellow works best as an accent or highlight colour. Pair dark navy or charcoal text on yellow backgrounds for accessibility. Avoid overusing — yellow fatigue sets in quickly in large areas.
CSS Custom Properties
:root {
--yellow-100: #FEFCE8;
--yellow-200: #FEF08A;
--yellow-300: #FACC15;
--yellow-400: #EAB308;
--yellow-500: #A16207;
--yellow-600: #713F12;
}Tailwind CSS Config
// tailwind.config.ts
export default {
theme: {
extend: {
colors: {
"yellow": {
"100": "#FEFCE8",
"200": "#FEF08A",
"300": "#FACC15",
"400": "#EAB308",
"500": "#A16207",
"600": "#713F12",
},
},
},
},
}Generate a custom palette
Enter any seed colour and generate complementary, analogous, triadic, and monochromatic palettes. Export as CSS variables, Tailwind config, or JSON.
Open Color Palette GeneratorFrequently Asked Questions
What hex codes are in the Yellow Color Palette?
The Yellow Color Palette includes: Yellow 50 (#FEFCE8), Yellow 200 (#FEF08A), Yellow 400 (#FACC15), Yellow 500 (#EAB308), Amber 700 (#A16207), Amber 900 (#713F12).
What is the mood of the Yellow Color Palette?
Yellow Color Palette evokes: Optimism · Warmth · Energy. A warm yellow palette from pale lemon to deep amber. Yellow conveys optimism, warmth, and energy. High-visibility and attention-grabbing when used as an accent, but requires careful pairing to remain readable.
What industries use the Yellow Color Palette?
The Yellow Color Palette is popular in: Food, Children's Brands, Education, Energy. Yellow works best as an accent or highlight colour. Pair dark navy or charcoal text on yellow backgrounds for accessibility. Avoid overusing — yellow fatigue sets in quickly in large areas.
What colours pair well with this palette?
This palette pairs well with: navy, black, white. Yellow works best as an accent or highlight colour. Pair dark navy or charcoal text on yellow backgrounds for accessibility. Avoid overusing — yellow fatigue sets in quickly in large areas.