Named color · #AFEEEE
Mint Macaron
Mint Macaron is #AFEEEE: rgb(175 238 238), hsl(180 65% 81%), oklch(0.907 0.063 196.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Mint Macaron color name →
#AFEEEE
oklch(0.907 0.063 196.1)
Color conversions
- HEX
- #afeeee
- RGB
- rgb(175 238 238)
- HSL
- hsl(180 65% 81%)
- HWB
- hwb(180 69% 7%)
- OKLCH
- oklch(0.907 0.063 196.1)
- OKLab
- oklab(0.907 -0.061 -0.018)
- CIE Lab
- lab(89.87 -20.5 -6.76)
- LCH
- lch(89.87 21.59 198.3)
- CMYK
- cmyk(26% 0% 0% 7%)
Tints · Shades · Tones
Tints
- B8F0F0
- C0F2F1
- C8F3F3
- D0F5F5
- D8F7F7
- E0F8F8
- E8FAFA
- F0FCFC
- F7FDFD
Shades
- 98CFCF
- 81B1B1
- 6B9393
- 567777
- 415C5C
- 2E4242
- 1C2A2A
- 0B1414
- 010303
Tones
- ABE3E2
- A6D7D7
- A2CCCC
- 9DC1C1
- 99B6B5
- 94ABAB
- 8FA0A0
- 8A9595
- 858A8A
Color harmonies
Complementary +180°
- AFEEEE
Mint Macaron
- FFD4D5
≈ Pink Clay
Analogous -30° +30°
- AFEEEE
Mint Macaron
- B9EED7
≈ Mystery Mint
- B7E9FF
≈ Blue Java Banana
Triadic +120° +240°
- AFEEEE
Mint Macaron
- F1D4FD
≈ Rose Dragée
- F9DBB2
≈ Tahitian Sand
Split-complementary +150° +210°
- AFEEEE
Mint Macaron
- FFD1E9
≈ Poplar Pink
- FFD6C4
≈ Tiny Pink
Tetradic +90° +180° +270°
- AFEEEE
Mint Macaron
- DDDCFF
≈ Transparent Blue
- FFD4D5
≈ Pink Clay
- E5E4B3
≈ Tusk
Contrast & accessibility
Ag
FailOn white
WCAG 1.28:1 · APCA Lc 14
Ag
AAAOn black
WCAG 16.28:1 · APCA Lc 90
Best text color: #000000
WCAG 16.28:1 (AAA) · APCA Lc 90
Contrast pairs
Code snippets
CSS
:root {
--mint-macaron: #afeeee;
--mint-macaron-rgb: 175 238 238;
--mint-macaron-oklch: oklch(0.907 0.063 196.1);
}
.element {
color: var(--mint-macaron);
background-color: hsl(180 65% 81%);
border-color: oklch(0.907 0.063 196.1);
}Tailwind CSS v4
@theme {
--color-mint-macaron: #afeeee;
--color-mint-macaron-50: #e1fbfc;
--color-mint-macaron-100: #d1efef;
--color-mint-macaron-200: #b6ddde;
--color-mint-macaron-300: #92c2c3;
--color-mint-macaron-400: #71aaab;
--color-mint-macaron-500: #4f9394;
--color-mint-macaron-600: #447d7d;
--color-mint-macaron-700: #366464;
--color-mint-macaron-800: #264949;
--color-mint-macaron-900: #193332;
--color-mint-macaron-950: #0a1f1e;
}SCSS
$mint-macaron: #afeeee;
$mint-macaron-rgb: 175, 238, 238;
$mint-macaron-light: mix(#fff, $mint-macaron, 20%);
$mint-macaron-dark: mix(#000, $mint-macaron, 20%);
.element {
color: $mint-macaron;
box-shadow: 0 0 0 2px rgba($mint-macaron, 0.35);
}