#ffddc9

#b39660

#946e26

#4f3709

Peanut Butter

Actions

Explore the gradient in different formats, and actions.

Colors overview

Brown

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ffddc9	rgb(255, 221, 201)	hsl(22 100% 89%)	hwb(22 79% 0%)	lch(90.6 17.5 55.5)	lab(90.6 9.93 14.4)	cmyk 0%, 13%, 21%, 0%
	#b39660	rgb(179, 150, 96)	hsl(39 35% 54%)	hwb(39 38% 30%)	lch(63.8 33.2 79.8)	lab(63.8 5.88 32.6)	cmyk 0%, 16%, 46%, 30%
	#946e26	rgb(148, 110, 38)	hsl(39 59% 36%)	hwb(39 15% 42%)	lch(49.4 45.4 77)	lab(49.4 10.2 44.2)	cmyk 0%, 26%, 74%, 42%
	#4f3709	rgb(79, 55, 9)	hsl(39 80% 17%)	hwb(39 3.5% 69%)	lch(25.2 31.7 76)	lab(25.2 7.67 30.8)	cmyk 0%, 30%, 89%, 69%

 Click a color format to copy to your clipboard.

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

#ffddc9

AA - 1.27



#b39660

AA - 2.81



#946e26

AA - 4.64



#4f3709

AAA - 11.15



Color blindness

The simulation of color blindness may not be 100% accurate sometimes.

Colors preview as gradient with protanopia

Colors preview as palette with protanopia

UI components preview

Preview the gradient in different UI components.



32°

CPU



48°

GPU



100%

Usage



11°

Rain



70%

Storage

HDR color space

HDR oklab colors



--angle: 45deg; 
background: linear-gradient(var(--angle), oklab(92.1% 0.028 0.037), oklab(68.7% 0.011 0.079), oklab(56.3% 0.018 0.098), oklab(35.6% 0.013 0.066))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #ffddc9, #b39660, #946e26, #4f3709)

Colors



<!-- Primary Colors -->
<color name="peanut_butter_color_10">#ffddc9</color>
<color name="peanut_butter_color_20">#b39660</color>
<color name="peanut_butter_color_30">#946e26</color>
<color name="peanut_butter_color_40">#4f3709</color>

Gradient PRO

Pro feature only

Get access to all app tokens, export files, and more.

PWA prompt