Skip to content

#caaa22

a balanced, vivid yellow · cool · closest name: olive

RGB
202, 170, 34
HSL
49°, 71%, 46%
CMYK
0, 16, 83, 21
Luminance
0.4142

Every format

HEX#caaa22
RGBrgb(202, 170, 34)
HSLhsl(49, 71%, 46%)
CMYKcmyk(0%, 16%, 83%, 21%)
LABlab(70.5 -1.1 67.3)
LCHlch(70.5 67.3 90.9)
OKLCHoklch(0.745 0.145 94.4)

Copy-ready code

/* CSS */
color: #caaa22;
background-color: #caaa22;
/* Tailwind (arbitrary) */
class="text-[#caaa22] bg-[#caaa22]"
/* SCSS */
$brand: #caaa22;
/* SwiftUI */
Color(red: 0.792, green: 0.667, blue: 0.133)
/* Android */
Color.parseColor("#caaa22")

Accessibility — WCAG contrast

Aa
#caaa22 on white: 2.26:1
AA ✗ fail · AA-large · AAA
Aa
#caaa22 on black: 9.28:1
AA ✓ pass · AA-large · AAA
true color
protanopia
deuteranopia
tritanopia

RGB percentages

Red79.2%
Green66.7%
Blue13.3%

CMYK percentages

Cyan0.0%
Magenta15.8%
Yellow83.2%
Key (black)20.8%

Color previews

#caaa22 text on a black background

contrast 9.28:1

Card sample

#caaa22 text on a white background

contrast 2.26:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #caaa22;
Background color
Panel with #caaa22 background
background-color: #caaa22;
Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #caaa22;
Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(202, 170, 34, 0.45);
Div box shadow
Elevated card
box-shadow: 0 12px 32px -8px rgba(202, 170, 34, 0.45);
Border & gradient
Gradient panel
border: 3px solid #caaa22;
background: linear-gradient(135deg, #caaa22, #7ACA22);

Monochromatic scale

Palettes built from #caaa22

Shades — darker

Tints — lighter

Hue & tone neighbors

Color harmonies

Nearest named colors

Work with #caaa22 in the Color Lab