Cor nomeada · #3F5A50
Patio Green
Patio Green é #3F5A50: rgb(63 90 80), hsl(158 18% 30%), oklch(0.443 0.036 169.7). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Teal mean? → · Patio Green color name →
#3F5A50
oklch(0.443 0.036 169.7)
Conversões de cor
- HEX
- #3f5a50
- RGB
- rgb(63 90 80)
- HSL
- hsl(158 18% 30%)
- HWB
- hwb(158 25% 65%)
- OKLCH
- oklch(0.443 0.036 169.7)
- OKLab
- oklab(0.443 -0.036 0.007)
- CIE Lab
- lab(35.83 -12.36 2.37)
- LCH
- lch(35.83 12.58 169.1)
- CMYK
- cmyk(30% 0% 11% 65%)
Tons claros · Sombras · Tons
Tons claros
- 516960
- 627970
- 758881
- 879892
- 9AA9A3
- AEBAB5
- C2CBC7
- D6DCD9
- EAEDEC
Sombras
- 354D44
- 2C4139
- 23352E
- 1B2924
- 121E1A
- 0A1310
- 040907
- 010302
- 000000
Tons
- 465E55
- 4C6259
- 53655E
- 596963
- 5F6D68
- 66716C
- 6C7471
- 737876
- 797C7B
Harmonias de cor
Complementar +180°
- 3F5A50
Patio Green
- 634B56
≈ Berry Wine
Análoga -30° +30°
- 3F5A50
Patio Green
- 495845
≈ Grey Asparagus
- 3B5A5B
≈ Otter Creek
Tríade +120° +240°
- 3F5A50
Patio Green
- 525066
≈ Magic Spell
- 644E41
≈ Dark Tavern
Complementar dividida +150° +210°
- 3F5A50
Patio Green
- 5C4D60
≈ Purple Fury
- 664B4B
≈ Soul Searching
Tétrade +90° +180° +270°
- 3F5A50
Patio Green
- 475468
≈ Inkjet
- 634B56
≈ Berry Wine
- 5E513C
≈ Best Bronze
Contraste e acessibilidade
Ag
AAASobre branco
WCAG 7.52:1 · APCA Lc 86
Ag
FailSobre preto
WCAG 2.78:1 · APCA Lc 16
Melhor cor de texto: #FFFFFF
WCAG 7.52:1 (AAA) · APCA Lc 86
Contrast pairs
Trechos de código
CSS
:root {
--patio-green: #3f5a50;
--patio-green-rgb: 63 90 80;
--patio-green-oklch: oklch(0.443 0.036 169.7);
}
.element {
color: var(--patio-green);
background-color: hsl(158 18% 30%);
border-color: oklch(0.443 0.036 169.7);
}Tailwind CSS v4
@theme {
--color-patio-green: #3f5a50;
--color-patio-green-50: #ebf9f4;
--color-patio-green-100: #ddece6;
--color-patio-green-200: #c6dad2;
--color-patio-green-300: #a6beb5;
--color-patio-green-400: #8aa69b;
--color-patio-green-500: #6f8e82;
--color-patio-green-600: #5e786e;
--color-patio-green-700: #4b6058;
--color-patio-green-800: #364740;
--color-patio-green-900: #25312c;
--color-patio-green-950: #141d19;
}SCSS
$patio-green: #3f5a50;
$patio-green-rgb: 63, 90, 80;
$patio-green-light: mix(#fff, $patio-green, 20%);
$patio-green-dark: mix(#000, $patio-green, 20%);
.element {
color: $patio-green;
box-shadow: 0 0 0 2px rgba($patio-green, 0.35);
}