#FFC966

#FFC033

#FFB700

#FFAF00

Naranja

Actions

Explore the gradient in different formats, and actions.

Colors overview

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ffc966	rgb(255, 201, 102)	hsl(39 100% 70%)	hwb(39 40% 0%)	lch(84.4 57.4 77.8)	lab(84.4 12.1 56.1)	cmyk 0%, 21%, 60%, 0%
	#ffc033	rgb(255, 192, 51)	hsl(41 100% 60%)	hwb(41 20% 0%)	lch(82 75.3 78.7)	lab(82 14.7 73.8)	cmyk 0%, 25%, 80%, 0%
	#ffb700	rgb(255, 183, 0)	hsl(43 100% 50%)	hwb(43 0% 0%)	lch(79.7 83.7 77.2)	lab(79.7 18.6 81.6)	cmyk 0%, 28%, 100%, 0%
	#ffaf00	rgb(255, 175, 0)	hsl(41 100% 50%)	hwb(41 0% 0%)	lch(77.9 83.6 74.3)	lab(77.9 22.6 80.5)	cmyk 0%, 31%, 100%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#FFC966

AA - 1.52



#FFC033

AA - 1.63



#FFB700

AA - 1.74



#FFAF00

AA - 1.84



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(86.5% 0.021 0.13), oklab(84.4% 0.022 0.159), oklab(82.5% 0.03 0.168), oklab(81.1% 0.042 0.165))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #FFC966, #FFC033, #FFB700, #FFAF00)

Colors



<!-- Primary Colors -->
<color name="naranja_color_10">#FFC966</color>
<color name="naranja_color_20">#FFC033</color>
<color name="naranja_color_30">#FFB700</color>
<color name="naranja_color_40">#FFAF00</color>

Gradient PRO

Pro feature only

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

PWA prompt