Named color · #C9E3CC
Katsura
Katsura is #C9E3CC: rgb(201 227 204), hsl(127 32% 84%), oklch(0.89 0.042 148.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Katsura color name →
#C9E3CC
oklch(0.89 0.042 148.5)
Color conversions
- HEX
- #c9e3cc
- RGB
- rgb(201 227 204)
- HSL
- hsl(127 32% 84%)
- HWB
- hwb(127 79% 11%)
- OKLCH
- oklch(0.89 0.042 148.5)
- OKLab
- oklab(0.89 -0.035 0.022)
- CIE Lab
- lab(87.84 -12.12 8.23)
- LCH
- lch(87.84 14.65 145.8)
- CMYK
- cmyk(11% 0% 10% 11%)
Tints · Shades · Tones
Tints
- CEE6D1
- D4E9D6
- D9EBDB
- DFEEE0
- E4F1E5
- E9F4EA
- EFF7F0
- F4F9F5
- FAFCFA
Shades
- AEC5B1
- 95A897
- 7C8C7E
- 647165
- 4C574E
- 363F37
- 222722
- 0F120F
- 020302
Tones
- C1D9C4
- BACEBC
- B3C4B5
- ABBAAD
- A4B0A5
- 9DA69E
- 959D96
- 8E938F
- 878987
Color harmonies
Complementary +180°
- C9E3CC
Katsura
- EBD2E9
≈ Champagne Elegance
Analogous -30° +30°
- C9E3CC
Katsura
- D8DFC1
≈ Security
- BFE4DB
≈ Tidewater
Triadic +120° +240°
- C9E3CC
Katsura
- CFDBF7
≈ Icy Plains
- F5D1CC
≈ Coral Candy
Split-complementary +150° +210°
- C9E3CC
Katsura
- DED5F3
≈ Japan Blush
- F3D0DA
≈ Ballerina
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.36:1 · APCA Lc 18
Ag
AAAOn black
WCAG 15.34:1 · APCA Lc 86
Best text color: #000000
WCAG 15.34:1 (AAA) · APCA Lc 86
Contrast pairs
Code snippets
CSS
:root {
--katsura: #c9e3cc;
--katsura-rgb: 201 227 204;
--katsura-oklch: oklch(0.89 0.042 148.5);
}
.element {
color: var(--katsura);
background-color: hsl(127 32% 84%);
border-color: oklch(0.89 0.042 148.5);
}Tailwind CSS v4
@theme {
--color-katsura: #c9e3cc;
--color-katsura-50: #edf9ef;
--color-katsura-100: #dfece1;
--color-katsura-200: #c8dacb;
--color-katsura-300: #a9bead;
--color-katsura-400: #8ea691;
--color-katsura-500: #748e77;
--color-katsura-600: #627865;
--color-katsura-700: #4e6051;
--color-katsura-800: #39463a;
--color-katsura-900: #273128;
--color-katsura-950: #151d16;
}SCSS
$katsura: #c9e3cc;
$katsura-rgb: 201, 227, 204;
$katsura-light: mix(#fff, $katsura, 20%);
$katsura-dark: mix(#000, $katsura, 20%);
.element {
color: $katsura;
box-shadow: 0 0 0 2px rgba($katsura, 0.35);
}