Named color · #C1CAB0
Green Dragon Spring
Green Dragon Spring is #C1CAB0: rgb(193 202 176), hsl(81 20% 74%), oklch(0.825 0.037 122.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Green Dragon Spring color name →
#C1CAB0
oklch(0.825 0.037 122.8)
Color conversions
- HEX
- #c1cab0
- RGB
- rgb(193 202 176)
- HSL
- hsl(81 20% 74%)
- HWB
- hwb(81 69% 21%)
- OKLCH
- oklch(0.825 0.037 122.8)
- OKLab
- oklab(0.825 -0.02 0.031)
- CIE Lab
- lab(80.09 -6.64 11.93)
- LCH
- lch(80.09 13.65 119.1)
- CMYK
- cmyk(4% 0% 13% 21%)
Tints · Shades · Tones
Tints
- C7CFB8
- CDD4C0
- D3DAC7
- D9DFCF
- E0E4D7
- E6EADF
- ECEFE7
- F2F4EF
- F9FAF7
Shades
- A7AF99
- 8F9582
- 777C6C
- 5F6456
- 494D42
- 34372E
- 20221C
- 0E0F0B
- 020201
Tones
- BAC2AB
- B4BBA6
- ADB3A1
- A6AC9D
- A0A498
- 999D93
- 93968E
- 8D8E89
- 868785
Color harmonies
Complementary +180°
- C1CAB0
Green Dragon Spring
- CAC0DA
≈ Awesome Aura
Analogous -30° +30°
- C1CAB0
Green Dragon Spring
- CEC6AB
≈ Wild Hillside
- B5CDBA
≈ Mint Mousse
Triadic +120° +240°
- C1CAB0
Green Dragon Spring
- B2C9DC
≈ Big Sur
- DCBCC3
≈ Crystalline Pink
Split-complementary +150° +210°
- C1CAB0
Green Dragon Spring
- BDC5DE
≈ Agapanthus
- D5BDD0
≈ Cosmetic Mauve
Tetradic +90° +180° +270°
- C1CAB0
Green Dragon Spring
- ABCDD4
≈ Grand Entrance
- CAC0DA
≈ Awesome Aura
- DDBEB7
≈ Peach Blush
Contrast & accessibility
Ag
FailOn white
WCAG 1.70:1 · APCA Lc 30
Ag
AAAOn black
WCAG 12.34:1 · APCA Lc 72
Best text color: #000000
WCAG 12.34:1 (AAA) · APCA Lc 72
Contrast pairs
Code snippets
CSS
:root {
--green-dragon-spring: #c1cab0;
--green-dragon-spring-rgb: 193 202 176;
--green-dragon-spring-oklch: oklch(0.825 0.037 122.8);
}
.element {
color: var(--green-dragon-spring);
background-color: hsl(81 20% 74%);
border-color: oklch(0.825 0.037 122.8);
}Tailwind CSS v4
@theme {
--color-green-dragon-spring: #c1cab0;
--color-green-dragon-spring-50: #f3f7ec;
--color-green-dragon-spring-100: #e5eadd;
--color-green-dragon-spring-200: #d0d7c6;
--color-green-dragon-spring-300: #b3bba7;
--color-green-dragon-spring-400: #9aa28b;
--color-green-dragon-spring-500: #818a70;
--color-green-dragon-spring-600: #6e755f;
--color-green-dragon-spring-700: #585e4c;
--color-green-dragon-spring-800: #404436;
--color-green-dragon-spring-900: #2c2f25;
--color-green-dragon-spring-950: #191c14;
}SCSS
$green-dragon-spring: #c1cab0;
$green-dragon-spring-rgb: 193, 202, 176;
$green-dragon-spring-light: mix(#fff, $green-dragon-spring, 20%);
$green-dragon-spring-dark: mix(#000, $green-dragon-spring, 20%);
.element {
color: $green-dragon-spring;
box-shadow: 0 0 0 2px rgba($green-dragon-spring, 0.35);
}