Needler

#f3bfff

#e665c3

#c42097

#5e1944



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

Pink

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f3bfff	rgb(243, 191, 255)	hsl(290 100% 87%)	hwb(290 75% 0%)	lch(83.6 36.5 318)	lab(83.6 27.2 -24.3)	cmyk 5%, 25%, 0%, 0%
	#e665c3	rgb(230, 101, 195)	hsl(320 72% 65%)	hwb(320 40% 9.8%)	lch(61.9 63.7 337)	lab(61.9 58.8 -24.6)	cmyk 0%, 56%, 15%, 10%
	#c42097	rgb(196, 32, 151)	hsl(320 72% 45%)	hwb(320 13% 23%)	lch(45.9 72.5 341)	lab(45.9 68.4 -23.9)	cmyk 0%, 84%, 23%, 23%
	#5e1944	rgb(94, 25, 68)	hsl(320 58% 23%)	hwb(320 9.8% 63%)	lch(22.1 36.2 345)	lab(22.1 34.9 -9.5)	cmyk 0%, 73%, 28%, 63%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#f3bfff

AA - 1.53



#e665c3

AA - 2.99



#c42097

AA - 5.24



#5e1944

AAA - 12.36



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(87.1% 0.079 -0.066), oklab(69.5% 0.179 -0.068), oklab(56.1% 0.213 -0.067), oklab(34.2% 0.108 -0.026))

Fallback colors



background: linear-gradient(45deg, #f3bfff, #e665c3, #c42097, #5e1944)

Colors



<!-- Primary Colors -->
<color name="needler_color_10">#f3bfff</color>
<color name="needler_color_20">#e665c3</color>
<color name="needler_color_30">#c42097</color>
<color name="needler_color_40">#5e1944</color>

PWA prompt