Named color · #C0E2C5
Sugar Mint
Sugar Mint is #C0E2C5: rgb(192 226 197), hsl(129 37% 82%), oklch(0.88 0.053 149.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Sugar Mint color name →
#C0E2C5
oklch(0.88 0.053 149.3)
Color conversions
- HEX
- #c0e2c5
- RGB
- rgb(192 226 197)
- HSL
- hsl(129 37% 82%)
- HWB
- hwb(129 75% 11%)
- OKLCH
- oklch(0.88 0.053 149.3)
- OKLab
- oklab(0.88 -0.046 0.027)
- CIE Lab
- lab(86.82 -15.69 10.33)
- LCH
- lch(86.82 18.78 146.6)
- CMYK
- cmyk(15% 0% 13% 11%)
Tints · Shades · Tones
Tints
- C6E5CB
- CDE8D0
- D3EBD6
- D9EEDC
- E0F1E2
- E6F3E8
- ECF6ED
- F2F9F3
- F9FCF9
Shades
- A7C4AB
- 8EA892
- 768C79
- 5F7161
- 49574B
- 343E35
- 202721
- 0E120E
- 020302
Tones
- BAD8BE
- B3CEB7
- ADC4B0
- A6BAA9
- A0B0A2
- 99A69B
- 939C94
- 8D938D
- 868987
Color harmonies
Complementary +180°
- C0E2C5
Sugar Mint
- ECCCE9
≈ Bubblegum Crisis
Analogous -30° +30°
- C0E2C5
Sugar Mint
- D3DDB6
≈ Green Parlour
- B2E4D8
≈ Ice Cube
Triadic +120° +240°
- C0E2C5
Sugar Mint
- C9D7FC
≈ Pale Phthalo Blue
- F9CBC3
≈ Flush Pink
Split-complementary +150° +210°
- C0E2C5
Sugar Mint
- DCD0F7
≈ Pale Lavender
- F7CAD6
≈ Palace Rose
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.40:1 · APCA Lc 20
Ag
AAAOn black
WCAG 14.92:1 · APCA Lc 84
Best text color: #000000
WCAG 14.92:1 (AAA) · APCA Lc 84
Contrast pairs
Code snippets
CSS
:root {
--sugar-mint: #c0e2c5;
--sugar-mint-rgb: 192 226 197;
--sugar-mint-oklch: oklch(0.88 0.053 149.3);
}
.element {
color: var(--sugar-mint);
background-color: hsl(129 37% 82%);
border-color: oklch(0.88 0.053 149.3);
}Tailwind CSS v4
@theme {
--color-sugar-mint: #c0e2c5;
--color-sugar-mint-50: #ebfaee;
--color-sugar-mint-100: #dceddf;
--color-sugar-mint-200: #c4dbc9;
--color-sugar-mint-300: #a4c0aa;
--color-sugar-mint-400: #89a88e;
--color-sugar-mint-500: #6d9073;
--color-sugar-mint-600: #5d7a62;
--color-sugar-mint-700: #4a624e;
--color-sugar-mint-800: #364838;
--color-sugar-mint-900: #253226;
--color-sugar-mint-950: #141e15;
}SCSS
$sugar-mint: #c0e2c5;
$sugar-mint-rgb: 192, 226, 197;
$sugar-mint-light: mix(#fff, $sugar-mint, 20%);
$sugar-mint-dark: mix(#000, $sugar-mint, 20%);
.element {
color: $sugar-mint;
box-shadow: 0 0 0 2px rgba($sugar-mint, 0.35);
}