#0f0c9c

 #f141fa

 #ffe9a6

Loyalty



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

Blue

Pink

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#0f0c9c	rgb(15, 12, 156)	hsl(240 86% 33%)	hwb(240 4.7% 39%)	lch(17.4 86.5 300)	lab(17.4 43.8 -74.5)	cmyk 90%, 92%, 0%, 39%
	#f141fa	rgb(241, 65, 250)	hsl(300 95% 62%)	hwb(300 25% 2%)	lch(60.9 98.7 325)	lab(60.9 80.8 -56.7)	cmyk 4%, 74%, 0%, 2%
	#ffe9a6	rgb(255, 233, 166)	hsl(45 100% 83%)	hwb(45 65% 0%)	lch(93 35.5 88.6)	lab(93 0.846 35.5)	cmyk 0%, 9%, 35%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#0f0c9c

AAA - 13.52



#f141fa

AA - 3.05



#ffe9a6

AA - 1.2



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(32.5% -0.011 -0.208), oklab(70.2% 0.234 -0.158), oklab(93.6% -0.003 0.088))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #0f0c9c, 	#f141fa, 	#ffe9a6)

Colors



<!-- Primary Colors -->
<color name="loyalty_color_10">#0f0c9c</color>
<color name="loyalty_color_20">	#f141fa</color>
<color name="loyalty_color_30">	#ffe9a6</color>

Gradient PRO

Pro feature only

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

PWA prompt