Cor nomeada · #537175
Sophisticated Teal
Sophisticated Teal é #537175: rgb(83 113 117), hsl(187 17% 39%), oklch(0.527 0.035 206.4). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Cyan mean? → · Sophisticated Teal color name →
#537175
oklch(0.527 0.035 206.4)
Conversões de cor
- HEX
- #537175
- RGB
- rgb(83 113 117)
- HSL
- hsl(187 17% 39%)
- HWB
- hwb(187 33% 54%)
- OKLCH
- oklch(0.527 0.035 206.4)
- OKLab
- oklab(0.527 -0.032 -0.016)
- CIE Lab
- lab(45.42 -10.48 -5.95)
- LCH
- lch(45.42 12.05 209.6)
- CMYK
- cmyk(29% 3% 0% 54%)
Tons claros · Sombras · Tons
Tons claros
- 637E82
- 738C8F
- 84999C
- 95A7AA
- A6B6B8
- B7C4C6
- C9D2D4
- DBE1E2
- EDF0F0
Sombras
- 476165
- 3B5255
- 304346
- 253537
- 1B2729
- 111A1C
- 080E0F
- 020405
- 000101
Tons
- 587376
- 5C7477
- 617678
- 667779
- 6A797B
- 6E7A7C
- 737C7D
- 777D7E
- 7C7F7F
Harmonias de cor
Complementar +180°
- 537175
Sophisticated Teal
- 7E6360
≈ Plumburn
Análoga -30° +30°
- 537175
Sophisticated Teal
- 55726A
≈ Evening Emerald
- 586E7D
≈ Deadwind Pass
Tríade +120° +240°
- 537175
Sophisticated Teal
- 766476
≈ Purple Suede
- 746A54
≈ Hip Waders
Complementar dividida +150° +210°
- 537175
Sophisticated Teal
- 7C636B
≈ Ephemera
- 7B6657
≈ Roman Coffee
Tétrade +90° +180° +270°
- 537175
Sophisticated Teal
- 6C677D
≈ Unexplained
- 7E6360
≈ Plumburn
- 696E57
≈ Iwai Brown
Contraste e acessibilidade
Ag
AASobre branco
WCAG 5.26:1 · APCA Lc 76
Ag
FailSobre preto
WCAG 3.98:1 · APCA Lc 26
Melhor cor de texto: #FFFFFF
WCAG 5.26:1 (AA) · APCA Lc 76
Contrast pairs
Trechos de código
CSS
:root {
--sophisticated-teal: #537175;
--sophisticated-teal-rgb: 83 113 117;
--sophisticated-teal-oklch: oklch(0.527 0.035 206.4);
}
.element {
color: var(--sophisticated-teal);
background-color: hsl(187 17% 39%);
border-color: oklch(0.527 0.035 206.4);
}Tailwind CSS v4
@theme {
--color-sophisticated-teal: #537175;
--color-sophisticated-teal-50: #eaf8fa;
--color-sophisticated-teal-100: #dbebee;
--color-sophisticated-teal-200: #c4d9dc;
--color-sophisticated-teal-300: #a4bdc1;
--color-sophisticated-teal-400: #87a5a9;
--color-sophisticated-teal-500: #6b8d92;
--color-sophisticated-teal-600: #5b777b;
--color-sophisticated-teal-700: #486063;
--color-sophisticated-teal-800: #344648;
--color-sophisticated-teal-900: #243132;
--color-sophisticated-teal-950: #121d1e;
}SCSS
$sophisticated-teal: #537175;
$sophisticated-teal-rgb: 83, 113, 117;
$sophisticated-teal-light: mix(#fff, $sophisticated-teal, 20%);
$sophisticated-teal-dark: mix(#000, $sophisticated-teal, 20%);
.element {
color: $sophisticated-teal;
box-shadow: 0 0 0 2px rgba($sophisticated-teal, 0.35);
}