Swamp

#faffd6

#d8e267

#55c291

#035a54



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

Cyan

Green

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#faffd6	rgb(250, 255, 214)	hsl(67 100% 92%)	hwb(67 84% 0%)	lch(98.8 20.2 109)	lab(98.8 -6.7 19.1)	cmyk 2%, 0%, 16%, 0%
	#d8e267	rgb(216, 226, 103)	hsl(65 68% 65%)	hwb(65 40% 11%)	lch(87.3 59.7 105)	lab(87.3 -15.6 57.7)	cmyk 4%, 0%, 54%, 11%
	#55c291	rgb(85, 194, 145)	hsl(150 47% 55%)	hwb(150 33% 24%)	lch(71.2 44.1 160)	lab(71.2 -41.5 14.9)	cmyk 56%, 0%, 25%, 24%
	#035a54	rgb(3, 90, 84)	hsl(180 94% 18%)	hwb(180 1.2% 65%)	lch(33.7 25.2 188)	lab(33.7 -25 -3.45)	cmyk 97%, 0%, 7%, 65%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#faffd6

AA - 1.03



#d8e267

AA - 1.4



#55c291

AA - 2.2



#035a54

AAA - 8.09



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(98.6% -0.021 0.049), oklab(88.1% -0.058 0.135), oklab(73.7% -0.118 0.039), oklab(42.1% -0.072 -0.009))

Fallback colors



background: linear-gradient(45deg, #faffd6, #d8e267, #55c291, #035a54)

Colors



<!-- Primary Colors -->
<color name="swamp_color_10">#faffd6</color>
<color name="swamp_color_20">#d8e267</color>
<color name="swamp_color_30">#55c291</color>
<color name="swamp_color_40">#035a54</color>

PWA prompt