Nearest named color · #C3F3D7
#C3F3D7
Nearest named color: Mystery Mint
#C3F3D7 (rgb(195 243 215), hsl(145 67% 86%), oklch(0.923 0.062 159.3)) is closest to the named color Mystery Mint. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#C3F3D7
oklch(0.923 0.062 159.3)
Color conversions
- HEX
- #c3f3d7
- RGB
- rgb(195 243 215)
- HSL
- hsl(145 67% 86%)
- HWB
- hwb(145 76% 5%)
- OKLCH
- oklch(0.923 0.062 159.3)
- OKLab
- oklab(0.923 -0.058 0.022)
- CIE Lab
- lab(91.91 -20.02 8.24)
- LCH
- lch(91.91 21.65 157.6)
- CMYK
- cmyk(20% 0% 12% 5%)
Tints · Shades · Tones
Tints
- C9F4DB
- CFF6DF
- D6F7E3
- DCF8E7
- E2F9EB
- E8FAEF
- EDFCF3
- F3FDF7
- F9FEFB
Shades
- A9D3BB
- 90B49F
- 789785
- 607A6B
- 4A5E52
- 34443B
- 202B25
- 0E1411
- 020302
Tones
- BCE7CE
- B6DBC5
- AFCFBC
- A8C4B3
- A2B8AB
- 9BADA2
- 94A199
- 8D9691
- 878B88
Color harmonies
Complementary +180°
- C3F3D7
Mystery Mint
- FFD8F1
≈ Sweet Sachet
Analogous -30° +30°
- C3F3D7
Mystery Mint
- D9EEC3
≈ Greenette
- B6F4EE
≈ Pale King’s Blue
Triadic +120° +240°
- C3F3D7
Mystery Mint
- E0E4FF
≈ Lavender Mist
- FFDDD2
≈ Soft Orange Bloom
Split-complementary +150° +210°
- C3F3D7
Mystery Mint
- EFDDFF
≈ Lavender Savour
- FFDBE0
≈ It’s a Girl!
Tetradic +90° +180° +270°
- C3F3D7
Mystery Mint
- D3E8FF
≈ Veiling Waterfalls
- FFD8F1
≈ Sweet Sachet
- FFE0BE
≈ Odious Orange
Contrast & accessibility
Ag
FailOn white
WCAG 1.22:1 · APCA Lc 11
Ag
AAAOn black
WCAG 17.12:1 · APCA Lc 93
Best text color: #000000
WCAG 17.12:1 (AAA) · APCA Lc 93
Contrast pairs
Code snippets
CSS
:root {
--mystery-mint: #c3f3d7;
--mystery-mint-rgb: 195 243 215;
--mystery-mint-oklch: oklch(0.923 0.062 159.3);
}
.element {
color: var(--mystery-mint);
background-color: hsl(145 67% 86%);
border-color: oklch(0.923 0.062 159.3);
}Tailwind CSS v4
@theme {
--color-mystery-mint: #c3f3d7;
--color-mystery-mint-50: #e6fbef;
--color-mystery-mint-100: #d7efe1;
--color-mystery-mint-200: #beddcc;
--color-mystery-mint-300: #9cc2ad;
--color-mystery-mint-400: #7faa91;
--color-mystery-mint-500: #619377;
--color-mystery-mint-600: #537c65;
--color-mystery-mint-700: #426451;
--color-mystery-mint-800: #30493a;
--color-mystery-mint-900: #203328;
--color-mystery-mint-950: #101e16;
}SCSS
$mystery-mint: #c3f3d7;
$mystery-mint-rgb: 195, 243, 215;
$mystery-mint-light: mix(#fff, $mystery-mint, 20%);
$mystery-mint-dark: mix(#000, $mystery-mint, 20%);
.element {
color: $mystery-mint;
box-shadow: 0 0 0 2px rgba($mystery-mint, 0.35);
}