Papaya color palette
Ripe papaya flesh, from a deep amber orange, #FF9800, to cream #FFF3E0. The steps are evenly spaced, so it works like a ready-made orange scale for an interface, handy for warning banners, highlights and badges. It's warm and tropical, but with no dark shade you'll need dark brown or charcoal for text. Smoothie bars and tropical fruit brands can use it straight off the page.
Papaya palette in use
Use #FFF3E0 as a background or warning banner, #FF9800 for buttons and alert icons, and #FFE0B2 for highlight fills. Body text needs dark brown or charcoal.
This pair measures 19.14:1, so it works for body text too. The button uses #FF9800 with black text.
ButtonGood for
- Smoothie bar website
- Tropical fruit packaging
- Travel deals banner
- App warning states
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.
Papaya palette as code
CSS variables
:root {
--papaya-1: #FF9800;
--papaya-2: #FFB74D;
--papaya-3: #FFCC80;
--papaya-4: #FFE0B2;
--papaya-5: #FFF3E0;
}Tailwind v4
@theme {
--color-papaya-1: #FF9800;
--color-papaya-2: #FFB74D;
--color-papaya-3: #FFCC80;
--color-papaya-4: #FFE0B2;
--color-papaya-5: #FFF3E0;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'papaya': {
100: '#FF9800',
200: '#FFB74D',
300: '#FFCC80',
400: '#FFE0B2',
500: '#FFF3E0',
},SCSS
$papaya-1: #FF9800;
$papaya-2: #FFB74D;
$papaya-3: #FFCC80;
$papaya-4: #FFE0B2;
$papaya-5: #FFF3E0;JSON
["#FF9800","#FFB74D","#FFCC80","#FFE0B2","#FFF3E0"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.