Named color · #40E0D0
Fresh Turquoise
Fresh Turquoise is #40E0D0: rgb(64 224 208), hsl(174 72% 56%), oklch(0.822 0.131 185.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Fresh Turquoise color name →
#40E0D0
oklch(0.822 0.131 185.1)
Color conversions
- HEX
- #40e0d0
- RGB
- rgb(64 224 208)
- HSL
- hsl(174 72% 56%)
- HWB
- hwb(174 25% 12%)
- OKLCH
- oklch(0.822 0.131 185.1)
- OKLab
- oklab(0.822 -0.13 -0.012)
- CIE Lab
- lab(80.96 -45.14 -4.68)
- LCH
- lch(80.96 45.38 185.9)
- CMYK
- cmyk(71% 0% 7% 12%)
Tints · Shades · Tones
Tints
- 60E3D5
- 78E7D9
- 8CEADE
- 9FEDE3
- B1F0E7
- C1F4EC
- D1F7F1
- E1F9F5
- F0FCFA
Shades
- 36C3B5
- 2DA69A
- 248A80
- 1B7067
- 13564F
- 0B3E39
- 052723
- 011210
- 000202
Tones
- 50D6C8
- 5CCCBF
- 65C3B7
- 6CB9AF
- 71B0A7
- 76A69F
- 7A9C97
- 7C938F
- 7F8988
Color harmonies
Complementary +180°
- 40E0D0
Fresh Turquoise
- FFA8BC
≈ Amélie’s Tutu
Analogous -30° +30°
- 40E0D0
Fresh Turquoise
- 79DE9F
≈ Enchanted Emerald
- 40DAFA
≈ Berta Blue
Triadic +120° +240°
- 40E0D0
Fresh Turquoise
- D6B2FF
≈ Light Violet
- FFB263
≈ Burning Flame
Split-complementary +150° +210°
- 40E0D0
Fresh Turquoise
- F9A4E6
≈ Lavender Rose
- FFAD98
≈ Discreet Orange
Tetradic +90° +180° +270°
- 40E0D0
Fresh Turquoise
- B4C1FF
≈ Dried Lilac
- FFA8BC
≈ Amélie’s Tutu
- DFC458
≈ Cream Gold
Contrast & accessibility
Ag
FailOn white
WCAG 1.64:1 · APCA Lc 28
Ag
AAAOn black
WCAG 12.79:1 · APCA Lc 75
Best text color: #000000
WCAG 12.79:1 (AAA) · APCA Lc 75
Contrast pairs
Code snippets
CSS
:root {
--fresh-turquoise: #40e0d0;
--fresh-turquoise-rgb: 64 224 208;
--fresh-turquoise-oklch: oklch(0.822 0.131 185.1);
}
.element {
color: var(--fresh-turquoise);
background-color: hsl(174 72% 56%);
border-color: oklch(0.822 0.131 185.1);
}Tailwind CSS v4
@theme {
--color-fresh-turquoise: #40e0d0;
--color-fresh-turquoise-50: #ccfffb;
--color-fresh-turquoise-100: #b6f7ef;
--color-fresh-turquoise-200: #90e7de;
--color-fresh-turquoise-300: #5bcdc3;
--color-fresh-turquoise-400: #00b7a9;
--color-fresh-turquoise-500: #00a192;
--color-fresh-turquoise-600: #00887b;
--color-fresh-turquoise-700: #006d63;
--color-fresh-turquoise-800: #005047;
--color-fresh-turquoise-900: #003831;
--color-fresh-turquoise-950: #00221d;
}SCSS
$fresh-turquoise: #40e0d0;
$fresh-turquoise-rgb: 64, 224, 208;
$fresh-turquoise-light: mix(#fff, $fresh-turquoise, 20%);
$fresh-turquoise-dark: mix(#000, $fresh-turquoise, 20%);
.element {
color: $fresh-turquoise;
box-shadow: 0 0 0 2px rgba($fresh-turquoise, 0.35);
}