Named color · #22AABB
Kentucky Bluegrass
Kentucky Bluegrass is #22AABB: rgb(34 170 187), hsl(187 69% 43%), oklch(0.678 0.11 208.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Kentucky Bluegrass color name →
#22AABB
oklch(0.678 0.11 208.1)
Color conversions
- HEX
- #22aabb
- RGB
- rgb(34 170 187)
- HSL
- hsl(187 69% 43%)
- HWB
- hwb(187 13% 27%)
- OKLCH
- oklch(0.678 0.11 208.1)
- OKLab
- oklab(0.678 -0.097 -0.052)
- CIE Lab
- lab(63.5 -31.28 -19.28)
- LCH
- lch(63.5 36.74 211.6)
- CMYK
- cmyk(82% 9% 0% 27%)
Tints · Shades · Tones
Tints
- 47B3C2
- 61BBC9
- 78C4CF
- 8DCCD6
- A1D5DD
- B4DDE4
- C7E6EB
- DAEEF1
- ECF7F8
Shades
- 1C93A2
- 167D8A
- 116873
- 0B535C
- 073F46
- 032D32
- 011B1F
- 000B0D
- 000102
Tones
- 38A6B5
- 46A2AF
- 529EA9
- 5B9AA3
- 63969D
- 6A9197
- 708D92
- 76898C
- 7B8486
Color harmonies
Complementary +180°
- 22AABB
Kentucky Bluegrass
- D37C71
≈ Bite My Tongue
Analogous -30° +30°
- 22AABB
Kentucky Bluegrass
- 34AE98
≈ Hole in One
- 4EA1D3
≈ Peaceful River
Triadic +120° +240°
- 22AABB
Kentucky Bluegrass
- BC7EBA
≈ Lavender Sweater
- B4933E
≈ Venetian Gold
Split-complementary +150° +210°
- 22AABB
Kentucky Bluegrass
- CE7A97
≈ Wild Rose
- CA864F
≈ Coral Sand
Tetradic +90° +180° +270°
- 22AABB
Kentucky Bluegrass
- A088D3
≈ Middy’s Purple
- D37C71
≈ Bite My Tongue
- 91A14E
≈ Arathi Highlands
Contrast & accessibility
Ag
FailOn white
WCAG 2.78:1 · APCA Lc 53
Ag
AAAOn black
WCAG 7.53:1 · APCA Lc 49
Best text color: #000000
WCAG 7.53:1 (AAA) · APCA Lc 49
Contrast pairs
Code snippets
CSS
:root {
--kentucky-bluegrass: #22aabb;
--kentucky-bluegrass-rgb: 34 170 187;
--kentucky-bluegrass-oklch: oklch(0.678 0.11 208.1);
}
.element {
color: var(--kentucky-bluegrass);
background-color: hsl(187 69% 43%);
border-color: oklch(0.678 0.11 208.1);
}Tailwind CSS v4
@theme {
--color-kentucky-bluegrass: #22aabb;
--color-kentucky-bluegrass-50: #d2feff;
--color-kentucky-bluegrass-100: #bef3fc;
--color-kentucky-bluegrass-200: #9ce2ee;
--color-kentucky-bluegrass-300: #6ec7d7;
--color-kentucky-bluegrass-400: #3ab0c0;
--color-kentucky-bluegrass-500: #0099ac;
--color-kentucky-bluegrass-600: #008291;
--color-kentucky-bluegrass-700: #006875;
--color-kentucky-bluegrass-800: #004d55;
--color-kentucky-bluegrass-900: #00353b;
--color-kentucky-bluegrass-950: #002025;
}SCSS
$kentucky-bluegrass: #22aabb;
$kentucky-bluegrass-rgb: 34, 170, 187;
$kentucky-bluegrass-light: mix(#fff, $kentucky-bluegrass, 20%);
$kentucky-bluegrass-dark: mix(#000, $kentucky-bluegrass, 20%);
.element {
color: $kentucky-bluegrass;
box-shadow: 0 0 0 2px rgba($kentucky-bluegrass, 0.35);
}