Tangerine Dream color palette
One orange hue, #FF7F00, faded step by step to a creamy #FFE5CC. The saturation stays at full strength the whole way, so even the pale end looks juicy. It's happy and energetic, but with no dark shade it needs brown or charcoal text to be readable. Juice bars and food delivery apps can use it for promos and badges.
Tangerine Dream palette in use
Use #FFE5CC as the background and #FF7F00 for buttons and large headlines. #FFCC99 and #FFB266 fill cards and charts, and body text belongs in dark brown or charcoal.
This pair measures 17.33:1, so it works for body text too. The button uses #FF7F00 with black text.
ButtonGood for
- Juice bar branding
- Food delivery app
- Kids' activity center
- Fall sale email
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.
Tangerine Dream palette as code
CSS variables
:root {
--tangerine-dream-1: #FF7F00;
--tangerine-dream-2: #FF9933;
--tangerine-dream-3: #FFB266;
--tangerine-dream-4: #FFCC99;
--tangerine-dream-5: #FFE5CC;
}Tailwind v4
@theme {
--color-tangerine-dream-1: #FF7F00;
--color-tangerine-dream-2: #FF9933;
--color-tangerine-dream-3: #FFB266;
--color-tangerine-dream-4: #FFCC99;
--color-tangerine-dream-5: #FFE5CC;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'tangerine-dream': {
100: '#FF7F00',
200: '#FF9933',
300: '#FFB266',
400: '#FFCC99',
500: '#FFE5CC',
},SCSS
$tangerine-dream-1: #FF7F00;
$tangerine-dream-2: #FF9933;
$tangerine-dream-3: #FFB266;
$tangerine-dream-4: #FFCC99;
$tangerine-dream-5: #FFE5CC;JSON
["#FF7F00","#FF9933","#FFB266","#FFCC99","#FFE5CC"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.