Named color · #C1F80A
Chartreuse
Chartreuse is #C1F80A: rgb(193 248 10), hsl(74 94% 51%), oklch(0.908 0.225 124.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Chartreuse color name →
#C1F80A
oklch(0.908 0.225 124.4)
Color conversions
- HEX
- #c1f80a
- RGB
- rgb(193 248 10)
- HSL
- hsl(74 94% 51%)
- HWB
- hwb(74 4% 3%)
- OKLCH
- oklch(0.908 0.225 124.4)
- OKLab
- oklab(0.908 -0.127 0.186)
- CIE Lab
- lab(91.31 -37.01 85.81)
- LCH
- lch(91.31 93.45 113.3)
- CMYK
- cmyk(22% 0% 96% 3%)
Tints · Shades · Tones
Tints
- C7F949
- CDFB67
- D3FC80
- D9FD95
- DFFDA9
- E6FEBB
- ECFFCD
- F2FFDE
- F9FFEF
Shades
- A7D807
- 8FB805
- 779A03
- 5F7C02
- 496001
- 344501
- 202C00
- 0E1500
- 020300
Tones
- BAEC36
- B4E04A
- ADD457
- A6C761
- A0BB69
- 99B070
- 93A475
- 8C987A
- 868C7D
Color harmonies
Complementary +180°
- C1F80A
Chartreuse
- E8D8FF
≈ Lavender Savour
Analogous -30° +30°
- C1F80A
Chartreuse
- FFDF68
≈ Lemon Tart
- 82FFB1
≈ Mint Bliss
Triadic +120° +240°
- C1F80A
Chartreuse
- C7E5FF
≈ Fresh Water
- FFD4DC
≈ No Need to Blush
Split-complementary +150° +210°
- C1F80A
Chartreuse
- D7DFFF
≈ Transparent Blue
- FFD0F4
≈ Shampoo
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.25:1 · APCA Lc 13
Ag
AAAOn black
WCAG 16.69:1 · APCA Lc 91
Best text color: #000000
WCAG 16.69:1 (AAA) · APCA Lc 91
Contrast pairs
Code snippets
CSS
:root {
--chartreuse: #c1f80a;
--chartreuse-rgb: 193 248 10;
--chartreuse-oklch: oklch(0.908 0.225 124.4);
}
.element {
color: var(--chartreuse);
background-color: hsl(74 94% 51%);
border-color: oklch(0.908 0.225 124.4);
}Tailwind CSS v4
@theme {
--color-chartreuse: #c1f80a;
--color-chartreuse-50: #e5ffbb;
--color-chartreuse-100: #d5f6a3;
--color-chartreuse-200: #bce677;
--color-chartreuse-300: #9acb34;
--color-chartreuse-400: #83b200;
--color-chartreuse-500: #679a00;
--color-chartreuse-600: #588200;
--color-chartreuse-700: #466900;
--color-chartreuse-800: #364c00;
--color-chartreuse-900: #253500;
--color-chartreuse-950: #142000;
}SCSS
$chartreuse: #c1f80a;
$chartreuse-rgb: 193, 248, 10;
$chartreuse-light: mix(#fff, $chartreuse, 20%);
$chartreuse-dark: mix(#000, $chartreuse, 20%);
.element {
color: $chartreuse;
box-shadow: 0 0 0 2px rgba($chartreuse, 0.35);
}