#F5F5DC

#E0CDB7

#C8B39B

#B09980

Beach Sand



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



HDR gradient

Switch to HDR to enhance the gradient



Quick view

Inspect colors in multiple color spaces

Colors overview

Brown

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f5f5dc	rgb(245, 245, 220)	hsl(60 56% 91%)	hwb(60 86% 3.9%)	lch(96 12.5 104)	lab(96 -3.11 12.1)	cmyk 0%, 0%, 10%, 4%
	#e0cdb7	rgb(224, 205, 183)	hsl(32 40% 80%)	hwb(32 72% 12%)	lch(83.6 14.2 72.6)	lab(83.6 4.25 13.5)	cmyk 0%, 8%, 18%, 12%
	#c8b39b	rgb(200, 179, 155)	hsl(32 29% 70%)	hwb(32 61% 22%)	lch(74.3 16 71.9)	lab(74.3 4.98 15.2)	cmyk 0%, 11%, 23%, 22%
	#b09980	rgb(176, 153, 128)	hsl(31 23% 60%)	hwb(31 50% 31%)	lch(64.8 17.5 70.2)	lab(64.8 5.92 16.5)	cmyk 0%, 13%, 27%, 31%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#F5F5DC

AA - 1.1



#E0CDB7

AA - 1.54



#C8B39B

AA - 2.02



#B09980

AA - 2.72



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(96.4% -0.01 0.031), oklab(85.8% 0.012 0.035), oklab(77.8% 0.013 0.039), oklab(69.7% 0.016 0.042))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #F5F5DC, #E0CDB7, #C8B39B, #B09980)

Colors



<!-- Primary Colors -->
<color name="beach_sand_color_10">#F5F5DC</color>
<color name="beach_sand_color_20">#E0CDB7</color>
<color name="beach_sand_color_30">#C8B39B</color>
<color name="beach_sand_color_40">#B09980</color>

Gradient PRO

Pro feature only

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

PWA prompt