What are the hex codes in the Sunny Mulberry & Caramel palette?

The Sunny Mulberry & Caramel color palette consists of Raisin #1B1B1B, Caramel #BF9800, Mulberry #CC3BB1, Smoke #F2F2F2.

How should I use the Sunny Mulberry & Caramel palette on a website?

Use Smoke #F2F2F2 as the background, Raisin #1B1B1B for text, Caramel #BF9800 for buttons and links, and Mulberry #CC3BB1 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Raisin on Smoke at 15.39:1.

Which colors in Sunny Mulberry & Caramel have enough contrast for text?

The highest-contrast pair is #1B1B1B on #F2F2F2 with a ratio of 15.39:1, which passes WCAG AA for normal text.

#1B1B1BRaisin

#BF9800Caramel

#CC3BB1Mulberry

#F2F2F2Smoke

Sunny Mulberry & Caramel color palette

Modern Gray Brown Purple White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Raisin	`#1B1B1B`	`rgb(27, 27, 27)`	`hsl(0, 0%, 11%)`	`oklch(22.2% 0.000 0)`
Caramel	`#BF9800`	`rgb(191, 152, 0)`	`hsl(48, 100%, 37%)`	`oklch(69.6% 0.142 90)`
Mulberry	`#CC3BB1`	`rgb(204, 59, 177)`	`hsl(311, 59%, 52%)`	`oklch(60.5% 0.218 336)`
Smoke	`#F2F2F2`	`rgb(242, 242, 242)`	`hsl(0, 0%, 95%)`	`oklch(96.1% 0.000 0)`

Why it works and how to use it

Sunny Mulberry & Caramel is a split color palette tagged modern, gray, brown. The hues span about 97°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.

Two of the four colors are near-neutral, which leaves room for Caramel to lead. Lightness runs from 11% to 95%. Well suited to websites, presentations and branding.

Background: Smoke (#F2F2F2) is the lightest color, so it belongs on large surfaces.
Text: Raisin (#1B1B1B) on #F2F2F2 gives 15.39:1, passing WCAG AAA.
Primary: Caramel (#BF9800) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Mulberry (#CC3BB1) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Raisin on Smoke at 15.39:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Sunny Mulberry & Caramel

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#1B1B1B

#BF9800

#CC3BB1

#F2F2F2

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#1B1B1B` on `#F2F2F2`	Aa	15.39:1	AAA
`#1B1B1B` on `#BF9800`	Aa	6.32:1	AA
`#1B1B1B` on `#CC3BB1`	Aa	3.96:1	AA large only
`#CC3BB1` on `#F2F2F2`	Aa	3.89:1	AA large only
`#BF9800` on `#F2F2F2`	Aa	2.43:1	Fail
`#BF9800` on `#CC3BB1`	Aa	1.6:1	Fail

Similar palettes 24 more in this mood