Named color · #A7E6D4
Botanical Tint
Botanical Tint is #A7E6D4: rgb(167 230 212), hsl(163 56% 78%), oklch(0.877 0.068 175). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Botanical Tint color name →
#A7E6D4
oklch(0.877 0.068 175)
Color conversions
- HEX
- #a7e6d4
- RGB
- rgb(167 230 212)
- HSL
- hsl(163 56% 78%)
- HWB
- hwb(163 65% 10%)
- OKLCH
- oklch(0.877 0.068 175)
- OKLab
- oklab(0.877 -0.068 0.006)
- CIE Lab
- lab(86.66 -23.5 2.04)
- LCH
- lch(86.66 23.59 175)
- CMYK
- cmyk(27% 0% 8% 10%)
Tints · Shades · Tones
Tints
- B0E9D8
- BAEBDC
- C3EEE1
- CBF0E5
- D4F3E9
- DDF5EE
- E6F8F2
- EEFAF6
- F7FDFB
Shades
- 91C8B8
- 7BAB9D
- 668E83
- 527369
- 3E5951
- 2C403A
- 1A2824
- 0A1310
- 010302
Tones
- A4DBCB
- A0D1C3
- 9CC6BA
- 99BCB1
- 95B2A9
- 91A8A1
- 8D9E98
- 899490
- 848A88
Color harmonies
Complementary +180°
- A7E6D4
Botanical Tint
- FCC5D9
≈ Sweet Serenade
Analogous -30° +30°
- A7E6D4
Botanical Tint
- BBE3BB
≈ Lime Sorbet
- A1E4EC
≈ Blizzard Blue
Triadic +120° +240°
- A7E6D4
Botanical Tint
- D9CFFF
≈ Pale Lavender
- FBCBAC
≈ Whipped Peach
Split-complementary +150° +210°
- A7E6D4
Botanical Tint
- EEC8F0
≈ Sugar High
- FFC7C1
≈ The Bluff
Tetradic +90° +180° +270°
- A7E6D4
Botanical Tint
- C4D7FF
≈ Pale Phthalo Blue
- FCC5D9
≈ Sweet Serenade
- EBD4A3
≈ Tangent
Contrast & accessibility
Ag
FailOn white
WCAG 1.40:1 · APCA Lc 20
Ag
AAAOn black
WCAG 14.91:1 · APCA Lc 84
Best text color: #000000
WCAG 14.91:1 (AAA) · APCA Lc 84
Contrast pairs
Code snippets
CSS
:root {
--botanical-tint: #a7e6d4;
--botanical-tint-rgb: 167 230 212;
--botanical-tint-oklch: oklch(0.877 0.068 175);
}
.element {
color: var(--botanical-tint);
background-color: hsl(163 56% 78%);
border-color: oklch(0.877 0.068 175);
}Tailwind CSS v4
@theme {
--color-botanical-tint: #a7e6d4;
--color-botanical-tint-50: #e2fcf5;
--color-botanical-tint-100: #d1f0e7;
--color-botanical-tint-200: #b6ded4;
--color-botanical-tint-300: #92c3b7;
--color-botanical-tint-400: #72ac9c;
--color-botanical-tint-500: #519584;
--color-botanical-tint-600: #457e6f;
--color-botanical-tint-700: #376559;
--color-botanical-tint-800: #274a40;
--color-botanical-tint-900: #1a332c;
--color-botanical-tint-950: #0a1f19;
}SCSS
$botanical-tint: #a7e6d4;
$botanical-tint-rgb: 167, 230, 212;
$botanical-tint-light: mix(#fff, $botanical-tint, 20%);
$botanical-tint-dark: mix(#000, $botanical-tint, 20%);
.element {
color: $botanical-tint;
box-shadow: 0 0 0 2px rgba($botanical-tint, 0.35);
}