Named color · #527E6D
Gremolata
Gremolata is #527E6D: rgb(82 126 109), hsl(157 21% 41%), oklch(0.556 0.056 168.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Gremolata color name →
#527E6D
oklch(0.556 0.056 168.1)
Color conversions
- HEX
- #527e6d
- RGB
- rgb(82 126 109)
- HSL
- hsl(157 21% 41%)
- HWB
- hwb(157 32% 51%)
- OKLCH
- oklch(0.556 0.056 168.1)
- OKLab
- oklab(0.556 -0.054 0.011)
- CIE Lab
- lab(49.21 -18.87 4.23)
- LCH
- lch(49.21 19.34 167.4)
- CMYK
- cmyk(35% 0% 13% 51%)
Tints · Shades · Tones
Tints
- 638A7B
- 749788
- 84A396
- 95B0A5
- A6BDB3
- B8CAC2
- C9D7D1
- DBE4E0
- EDF1EF
Shades
- 466D5E
- 3B5C4F
- 2F4C41
- 253C33
- 1A2D26
- 111F19
- 08110D
- 020504
- 000101
Tones
- 577E6F
- 5C7F71
- 617F73
- 667F75
- 6A7F76
- 6F7F78
- 73807A
- 78807C
- 7C807E
Color harmonies
Complementary +180°
- 527E6D
Gremolata
- 8C6679
≈ Sweet Violet
Analogous -30° +30°
- 527E6D
Gremolata
- 637B5B
≈ Silver Willow Green
- 4A7D7F
≈ Submerged
Triadic +120° +240°
- 527E6D
Gremolata
- 716E92
≈ Bureaucracy
- 8F6A57
≈ Leather
Split-complementary +150° +210°
- 527E6D
Gremolata
- 816989
≈ Matriarch
- 916667
≈ Roseland
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAOn white
WCAG 4.60:1 · APCA Lc 72
Ag
AAOn black
WCAG 4.56:1 · APCA Lc 30
Best text color: #FFFFFF
WCAG 4.60:1 (AA) · APCA Lc 72
Contrast pairs
Code snippets
CSS
:root {
--gremolata: #527e6d;
--gremolata-rgb: 82 126 109;
--gremolata-oklch: oklch(0.556 0.056 168.1);
}
.element {
color: var(--gremolata);
background-color: hsl(157 21% 41%);
border-color: oklch(0.556 0.056 168.1);
}Tailwind CSS v4
@theme {
--color-gremolata: #527e6d;
--color-gremolata-50: #e6fbf3;
--color-gremolata-100: #d7eee5;
--color-gremolata-200: #bedcd1;
--color-gremolata-300: #9cc1b3;
--color-gremolata-400: #7fa998;
--color-gremolata-500: #61927f;
--color-gremolata-600: #527c6c;
--color-gremolata-700: #426356;
--color-gremolata-800: #2f493e;
--color-gremolata-900: #20322b;
--color-gremolata-950: #101e18;
}SCSS
$gremolata: #527e6d;
$gremolata-rgb: 82, 126, 109;
$gremolata-light: mix(#fff, $gremolata, 20%);
$gremolata-dark: mix(#000, $gremolata, 20%);
.element {
color: $gremolata;
box-shadow: 0 0 0 2px rgba($gremolata, 0.35);
}