#F94144
#F3722C
#F9C74F
#90BE6D
#F4A259Cantaloupe
#F4E285Vanilla
#8CB369Pistachio
#5B8E7DCadet
Apricot Jam is a complementary color palette tagged food, nature, orange. Near-complementary hues (about 132° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Cantaloupe | #F4A259 | rgb(244, 162, 89) | hsl(28, 88%, 65%) | oklch(78.0% 0.132 61) | |
| Vanilla | #F4E285 | rgb(244, 226, 133) | hsl(50, 83%, 74%) | oklch(90.8% 0.116 99) | |
| Pistachio | #8CB369 | rgb(140, 179, 105) | hsl(92, 33%, 56%) | oklch(72.0% 0.109 131) | |
| Cadet | #5B8E7D | rgb(91, 142, 125) | hsl(160, 22%, 46%) | oklch(60.5% 0.061 171) |
Why it works and how to use it
It works because the lightness steps are gentle (46% to 74%), which keeps the mood consistent from edge to edge. Try it for menus and packaging.
- Background: Vanilla (#F4E285) is the lightest color, so it belongs on large surfaces.
- Text: Cadet (#5B8E7D) on #F4E285 gives 2.86:1, so pair it with a darker neutral for body copy.
- Primary: Cantaloupe (#F4A259) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Pistachio (#8CB369) for highlights, badges and hover states.
No pair inside the palette reaches 4.5:1, so add black or white for body text.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Apricot Jam
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryCard title
Card title
Card title
Roles are assigned by lightness.
Color blindness simulation
#F4A259
#F4E285
#8CB369
#5B8E7D
Color-blind check: under protanopia, Cantaloupe and Pistachio become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#F4E285 on #5B8E7D | Aa | 2.86:1 | Fail |
#F4E285 on #8CB369 | Aa | 1.83:1 | Fail |
#F4A259 on #5B8E7D | Aa | 1.81:1 | Fail |
#F4A259 on #F4E285 | Aa | 1.58:1 | Fail |
#8CB369 on #5B8E7D | Aa | 1.56:1 | Fail |
#F4A259 on #8CB369 | Aa | 1.16:1 | Fail |
Similar palettes 24 more in this mood
#FF8C00
#FFD23F
#8CC63F
#FFFFFF
#E7AB4A
#DEEA8E
#74B87C
#558E88
#FFBB81
#FFFBE4
#A4CC81
#77AB99
#F54D00
#E77E00
#E7D052
#7AC27F
#E16700
#D98900
#D5D65B
#67C48E
#2A6C00
#646E00
#009E66
#D2B01B
#9C7500
#DC5657
#FFB161
#FFC4AB
#9C6500
#E26C53
#B89500
#FF9E5E
#B1DA87
#5EDD9C
#B9A900
#9A6700
#CDD61D
#FF9600
#499526
#8F6E00
#4D3424
#88604A
#BBE9CD
#F6FCF8
#2D6E29
#008067
#C38E00
#B7BC00
#C4CE00
#F49450
#FF7470
#A47900
#88BD6F
#A28429
#565A00
#005C3A
#A4E777
#00AC79
#7D7500
#005453
#DD9F6E
#EDD693
#9DBE7C
#FDFDFD
#3B2314
#6B4530
#A8D5BA
#F1F7F3
#FFB1A8
#E55735
#0073B4
#005850
#AD0054
#FF9E55
#1A1A1A
#FFF5E1
#DDA300
#D3E359
#35D07D
#FDFDFD
#910039
#A0771C
#E87E00
#FFC0B1
#C24F00
#F8A79C
#FFF1E6
#57412F
#FFBA85
#FFEFC0
#A8E45F
#FAFAFA