Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Pumpkin | #FF7A1A | rgb(255, 122, 26) | hsl(25, 100%, 55%) | oklch(72.4% 0.187 49) | |
| Cantaloupe | #FFA751 | rgb(255, 167, 81) | hsl(30, 100%, 66%) | oklch(80.0% 0.144 62) | |
| Lapis | #30558B | rgb(48, 85, 139) | hsl(216, 49%, 37%) | oklch(44.9% 0.099 258) | |
| Smoke | #F6F6F6 | rgb(246, 246, 246) | hsl(0, 0%, 96%) | oklch(97.3% 0.000 0) |
Why it works and how to use it
Pumpkin & Cantaloupe Drift is a vivid complementary color palette tagged modern, orange, white. Near-complementary hues (about 174° apart) make this a high-contrast, attention-grabbing combination. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.
With 3 chromatic colors, Pumpkin takes the lead while the rest support. Lightness runs from 37% to 96%. Well suited to websites, presentations and branding.
- Background: Smoke (#F6F6F6) is the lightest color, so it belongs on large surfaces.
- Text: Lapis (#30558B) on #F6F6F6 gives 6.95:1, passing WCAG AA.
- Primary: Pumpkin (#FF7A1A) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Cantaloupe (#FFA751) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Lapis on Smoke at 6.95:1.
Preview on a real UI see how the palette feels in context
Design faster with Pumpkin & Cantaloupe Drift
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryColor blindness simulation
Color-blind check: under deuteranopia, Pumpkin and Cantaloupe become hard to tell apart, so do not rely on that pair alone to carry meaning.
Palette card

Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#30558B on #F6F6F6 | Aa | 6.95:1 | AA |
#FFA751 on #30558B | Aa | 3.9:1 | AA large only |
#FF7A1A on #30558B | Aa | 2.88:1 | Fail |
#FF7A1A on #F6F6F6 | Aa | 2.41:1 | Fail |
#FFA751 on #F6F6F6 | Aa | 1.78:1 | Fail |
#FF7A1A on #FFA751 | Aa | 1.35:1 | Fail |