Ranch

#D2B48C

#BC987E

#A07D6B

#8C675A



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



Quick view

Inspect colors in multiple color spaces

Colors overview

Brown

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#d2b48c	rgb(210, 180, 140)	hsl(34 44% 69%)	hwb(34 55% 18%)	lch(75.2 25.6 74.3)	lab(75.2 6.93 24.7)	cmyk 0%, 14%, 33%, 18%
	#bc987e	rgb(188, 152, 126)	hsl(25 32% 62%)	hwb(25 49% 26%)	lch(65.7 22.1 59.8)	lab(65.7 11.1 19.1)	cmyk 0%, 19%, 33%, 26%
	#a07d6b	rgb(160, 125, 107)	hsl(20 22% 52%)	hwb(20 42% 37%)	lch(55.5 19.5 51.8)	lab(55.5 12 15.3)	cmyk 0%, 22%, 33%, 37%
	#8c675a	rgb(140, 103, 90)	hsl(16 22% 45%)	hwb(16 35% 45%)	lch(47.2 19.4 44)	lab(47.2 14 13.5)	cmyk 0%, 26%, 36%, 45%

 Click a color format to copy 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