Ranch

#D2B48C

#BC987E

#A07D6B

#8C675A

Actions

Explore the palette in different formats, and actions.

Colors overview

Brown

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#d2b48c	rgb(210, 180, 140)	hsl(34 44% 69%)	oklab(79% 0.02 0.06)	oklch(79% 0.06 75)	color(display-p3 0.8 0.71 0.57)
	#bc987e	rgb(188, 152, 126)	hsl(25 32% 62%)	oklab(71% 0.03 0.05)	oklch(71% 0.06 57)	color(display-p3 0.71 0.6 0.51)
	#a07d6b	rgb(160, 125, 107)	hsl(20 22% 52%)	oklab(62% 0.03 0.04)	oklch(62% 0.05 49)	color(display-p3 0.61 0.5 0.43)
	#8c675a	rgb(140, 103, 90)	hsl(16 22% 45%)	oklab(55% 0.04 0.03)	oklch(55% 0.05 40)	color(display-p3 0.53 0.41 0.36)

 Click on a color value to copy it to your clipboard.

Contrast ratios checker

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

#D2B48C

AA - 1.97



#BC987E

AA - 2.64



#A07D6B

AA - 3.72



#8C675A

AA - 4.99



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.

HDR color space

HDR oklab colors



background: linear-gradient(45deg, oklab(78.6% 0.017 0.062), oklab(70.6% 0.03 0.048), oklab(61.9% 0.034 0.038), oklab(54.8% 0.04 0.034))

Fallback colors



background: linear-gradient(45deg, #D2B48C, #BC987E, #A07D6B, #8C675A)

Colors



<!-- Primary Colors -->
<color name="ranch_color_10">#D2B48C</color>
<color name="ranch_color_20">#BC987E</color>
<color name="ranch_color_30">#A07D6B</color>
<color name="ranch_color_40">#8C675A</color>

PWA prompt