Nearest named color · #BAF1DB
#BAF1DB
Nearest named color: Mystery Mint
#BAF1DB (rgb(186 241 219), hsl(156 66% 84%), oklch(0.914 0.064 168.5)) is closest to the named color Mystery Mint. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#BAF1DB
oklch(0.914 0.064 168.5)
Color conversions
- HEX
- #baf1db
- RGB
- rgb(186 241 219)
- HSL
- hsl(156 66% 84%)
- HWB
- hwb(156 73% 5%)
- OKLCH
- oklch(0.914 0.064 168.5)
- OKLab
- oklab(0.914 -0.062 0.013)
- CIE Lab
- lab(90.91 -21.45 4.66)
- LCH
- lch(90.91 21.95 167.7)
- CMYK
- cmyk(23% 0% 9% 5%)
Tints · Shades · Tones
Tints
- C1F2DF
- C8F4E2
- CFF5E6
- D6F7E9
- DDF8ED
- E4FAF1
- EBFBF4
- F2FCF8
- F8FEFB
Shades
- A1D2BE
- 89B3A2
- 729587
- 5C796D
- 465D54
- 32433C
- 1E2B26
- 0D1411
- 020302
Tones
- B4E5D2
- AFD9C8
- A9CEBF
- A3C2B6
- 9EB7AC
- 98ACA3
- 92A19A
- 8C9691
- 868B89
Color harmonies
Complementary +180°
- BAF1DB
Mystery Mint
- FFD5E9
≈ Pink Currant
Analogous -30° +30°
- BAF1DB
Mystery Mint
- CEEEC5
≈ Celery Victor
- B1F0F2
≈ Mint Macaron
Triadic +120° +240°
- BAF1DB
Mystery Mint
- E1DFFF
≈ Stoic White
- FFDAC7
≈ Camisole
Split-complementary +150° +210°
- BAF1DB
Mystery Mint
- F5D6FE
≈ Pink Diamond
- FFD8D7
≈ Forgotten Pink
Tetradic +90° +180° +270°
- BAF1DB
Mystery Mint
- D2E4FF
≈ Veiling Waterfalls
- FFD5E9
≈ Pink Currant
- FADEB4
≈ Time Out
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 {
--mystery-mint: #baf1db;
--mystery-mint-rgb: 186 241 219;
--mystery-mint-oklch: oklch(0.914 0.064 168.5);
}
.element {
color: var(--mystery-mint);
background-color: hsl(156 66% 84%);
border-color: oklch(0.914 0.064 168.5);
}Tailwind CSS v4
@theme {
--color-mystery-mint: #baf1db;
--color-mystery-mint-50: #e4fbf2;
--color-mystery-mint-100: #d4efe5;
--color-mystery-mint-200: #baded0;
--color-mystery-mint-300: #97c2b3;
--color-mystery-mint-400: #79ab98;
--color-mystery-mint-500: #5a947e;
--color-mystery-mint-600: #4d7d6b;
--color-mystery-mint-700: #3d6456;
--color-mystery-mint-800: #2c4a3d;
--color-mystery-mint-900: #1e332a;
--color-mystery-mint-950: #0d1f18;
}SCSS
$mystery-mint: #baf1db;
$mystery-mint-rgb: 186, 241, 219;
$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);
}