Sage

#080b09

#25352c

#43604f

#618a73

#9cdfb9

Actions

Explore the palette in different formats, and actions.

Colors overview

Green

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#080b09	rgb(8, 11, 9)	hsl(140 16% 3.7%)	oklab(15% -0.01 0)	oklch(15% 0.01 160)	color(display-p3 0.03 0.04 0.04)
	#25352c	rgb(37, 53, 44)	hsl(150 18% 18%)	oklab(31% -0.02 0.01)	oklch(31% 0.03 160)	color(display-p3 0.16 0.21 0.17)
	#43604f	rgb(67, 96, 79)	hsl(140 18% 32%)	oklab(46% -0.04 0.02)	oklch(46% 0.04 160)	color(display-p3 0.29 0.37 0.31)
	#618a73	rgb(97, 138, 115)	hsl(150 17% 46%)	oklab(60% -0.05 0.02)	oklch(60% 0.06 160)	color(display-p3 0.41 0.54 0.46)
	#9cdfb9	rgb(156, 223, 185)	hsl(150 51% 74%)	oklab(85% -0.08 0.03)	oklch(85% 0.09 160)	color(display-p3 0.67 0.87 0.74)

 Click on a color value to copy it to your clipboard.

Contrast ratios checker

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

#080b09

AAA - 19.77



#25352c

AAA - 12.92



#43604f

AA - 6.94



#618a73

AA - 3.89



#9cdfb9

AA - 1.53



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(14.5% -0.006 0.003), oklab(31.2% -0.025 0.009), oklab(46.1% -0.041 0.016), oklab(59.6% -0.054 0.02), oklab(84.8% -0.08 0.031))

Fallback colors



background: linear-gradient(45deg, #080b09, #25352c, #43604f, #618a73, #9cdfb9)

Colors



<!-- Primary Colors -->
<color name="sage_color_10">#080b09</color>
<color name="sage_color_20">#25352c</color>
<color name="sage_color_30">#43604f</color>
<color name="sage_color_40">#618a73</color>
<color name="sage_color_50">#9cdfb9</color>

PWA prompt