#2D4059
#EA5455
#F07B3F
#FFD460
#FFAA73Cantaloupe
#B88900Caramel
#AF5F86Mulberry
#CD484CBrick
Brick & Caramel Breeze is a vivid split color palette tagged retro, warm, earthy. A split scheme: Cantaloupe plays against Brick across roughly 74° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Cantaloupe | #FFAA73 | rgb(255, 170, 115) | hsl(24, 100%, 73%) | oklch(81.0% 0.123 53) | |
| Caramel | #B88900 | rgb(184, 137, 0) | hsl(45, 100%, 36%) | oklch(65.8% 0.135 84) | |
| Mulberry | #AF5F86 | rgb(175, 95, 134) | hsl(331, 33%, 53%) | oklch(59.0% 0.114 351) | |
| Brick | #CD484C | rgb(205, 72, 76) | hsl(358, 57%, 54%) | oklch(58.6% 0.168 22) |
Why it works and how to use it
It works because the lightness steps are gentle (36% to 73%), which keeps the mood consistent from edge to edge. Try it for wellness, organic and outdoor brands.
- Background: Cantaloupe (#FFAA73) is the lightest color, so it belongs on large surfaces.
- Text: Brick (#CD484C) on #FFAA73 gives 2.43:1, so pair it with a darker neutral for body copy.
- Primary: Caramel (#B88900) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Mulberry (#AF5F86) 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 Brick & Caramel Breeze
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
#FFAA73
#B88900
#AF5F86
#CD484C
Color-blind check: under tritanopia, Caramel and Mulberry 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 |
|---|---|---|---|
#FFAA73 on #CD484C | Aa | 2.43:1 | Fail |
#FFAA73 on #AF5F86 | Aa | 2.34:1 | Fail |
#FFAA73 on #B88900 | Aa | 1.7:1 | Fail |
#B88900 on #CD484C | Aa | 1.43:1 | Fail |
#B88900 on #AF5F86 | Aa | 1.38:1 | Fail |
#AF5F86 on #CD484C | Aa | 1.04:1 | Fail |
Similar palettes 24 more in this mood
#D62828
#F77F00
#FCBF49
#EAE2B7
#B6741E
#D5A900
#F4946A
#FFABA8
#F44942
#FF9B52
#FFE1B0
#FFFBE4
#DE6551
#F8AA58
#935937
#FCE5C8
#3F536D
#FF6E6C
#FF9968
#FFF2D3
#003049
#D62828
#F77F00
#EAE2B7
#D96C2C
#E9B44C
#8C5E2A
#F5E8C7
#7C8B3C
#C4B454
#D77A3B
#F2E9D4
#97812C
#DDA855
#DE7164
#F2E9D4
#13405A
#F14740
#FFA15F
#FFFBE4
#3A0546
#B31D33
#FD5B03
#FFF7F8
#A17669
#B1809F
#BE8A57
#EEA1AD
#825A7D
#C27C6A
#D598A7
#CEAA85
#CAAB80
#B193A4
#A46268
#874A2D
#874658
#A0584E
#94856B
#DCA885
#F8884B
#FFD487
#A47441
#FFFAED
#D3235A
#FF744A
#FFBA7A
#F4DEB7
#2A9D8F
#8AB17D
#E9C46A
#F4A261
#264653
#2A9D8F
#E76F51
#F4A261
#2B0F54
#AB1F65
#FF4F69
#FFF7F8
#A92E65
#A1602E
#DB81D7
#F79287
#B22B34
#F2C14E
#2E9CA6
#F4EBD9
#2B2B2B
#E63946
#F1FAEE
#457B9D