Kira

#9F6E50

#281914

#EED0B6

#DDDED9

#782515

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Brown

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#9f6e50	rgb(159, 110, 80)	hsl(23 33% 47%)	oklab(58% 0.05 0.06)	oklch(58% 0.08 52)	color(display-p3 0.6 0.44 0.33)
	#281914	rgb(40, 25, 20)	hsl(15 33% 12%)	oklab(23% 0.02 0.02)	oklch(23% 0.03 39)	color(display-p3 0.15 0.1 0.08)
	#eed0b6	rgb(238, 208, 182)	hsl(28 62% 82%)	oklab(88% 0.02 0.04)	oklch(88% 0.05 63)	color(display-p3 0.91 0.82 0.73)
	#ddded9	rgb(221, 222, 217)	hsl(72 7% 86%)	oklab(90% 0 0.01)	oklch(90% 0.01 120)	color(display-p3 0.87 0.87 0.85)
	#782515	rgb(120, 37, 21)	hsl(9.7 70% 28%)	oklab(39% 0.1 0.06)	oklch(39% 0.12 33)	color(display-p3 0.43 0.17 0.11)

 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.

#9F6E50

AA - 4.35



#281914

AAA - 16.94



#EED0B6

AA - 1.46



#DDDED9

AA - 1.35



#782515

AAA - 10.12



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(58.2% 0.047 0.06), oklab(23.1% 0.02 0.016), oklab(87.6% 0.022 0.043), oklab(89.8% -0.003 0.006), oklab(39.1% 0.1 0.065))

Fallback colors



background: linear-gradient(45deg, #9F6E50, #281914, #EED0B6, #DDDED9, #782515)

Colors



<!-- Primary Colors -->
<color name="kira_color_10">#9F6E50</color>
<color name="kira_color_20">#281914</color>
<color name="kira_color_30">#EED0B6</color>
<color name="kira_color_40">#DDDED9</color>
<color name="kira_color_50">#782515</color>

PWA prompt