Cor nomeada · #84B6A2
Source Green
Source Green é #84B6A2: rgb(132 182 162), hsl(156 26% 62%), oklch(0.735 0.06 168). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Teal mean? → · Source Green color name →
#84B6A2
oklch(0.735 0.06 168)
Conversões de cor
- HEX
- #84b6a2
- RGB
- rgb(132 182 162)
- HSL
- hsl(156 26% 62%)
- HWB
- hwb(156 52% 29%)
- OKLCH
- oklch(0.735 0.06 168)
- OKLab
- oklab(0.735 -0.059 0.013)
- CIE Lab
- lab(70.08 -20.41 4.62)
- LCH
- lch(70.08 20.93 167.3)
- CMYK
- cmyk(27% 0% 11% 29%)
Tons claros · Sombras · Tons
Tons claros
- 90BDAB
- 9DC4B4
- A9CCBD
- B5D3C6
- C1DAD0
- CEE2D9
- DAE9E2
- E6F0EC
- F3F8F5
Sombras
- 729E8C
- 608677
- 4F6F63
- 3F594F
- 2F443C
- 20302A
- 121D19
- 060C0A
- 010201
Tons
- 84B19F
- 84AB9B
- 84A698
- 84A094
- 839B91
- 83958D
- 82908A
- 828B87
- 818583
Harmonias de cor
Complementar +180°
- 84B6A2
Source Green
- C79AB0
≈ Lady’s Cushions Pink
Análoga -30° +30°
- 84B6A2
Source Green
- 97B38E
≈ Basilisk
- 7BB5B7
≈ Kingfisher Turquoise
Tríade +120° +240°
- 84B6A2
Source Green
- A7A4CE
≈ Puturple
- CA9E89
≈ Artefact
Complementar dividida +150° +210°
- 84B6A2
Source Green
- BA9EC2
≈ Lupine
- CD9A9B
≈ Silk Stone
Tétrade +90° +180° +270°
- 84B6A2
Source Green
- 92ABD0
≈ Hopeful Dream
- C79AB0
≈ Lady’s Cushions Pink
- BFA57E
≈ Graham Cracker
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.28:1 · APCA Lc 45
Ag
AAASobre preto
WCAG 9.19:1 · APCA Lc 57
Melhor cor de texto: #000000
WCAG 9.19:1 (AAA) · APCA Lc 57
Contrast pairs
Trechos de código
CSS
:root {
--source-green: #84b6a2;
--source-green-rgb: 132 182 162;
--source-green-oklch: oklch(0.735 0.06 168);
}
.element {
color: var(--source-green);
background-color: hsl(156 26% 62%);
border-color: oklch(0.735 0.06 168);
}Tailwind CSS v4
@theme {
--color-source-green: #84b6a2;
--color-source-green-50: #e5fbf2;
--color-source-green-100: #d5efe5;
--color-source-green-200: #bcddd0;
--color-source-green-300: #99c2b3;
--color-source-green-400: #7baa98;
--color-source-green-500: #5d937e;
--color-source-green-600: #4f7d6b;
--color-source-green-700: #3f6456;
--color-source-green-800: #2e493e;
--color-source-green-900: #1f332a;
--color-source-green-950: #0e1e18;
}SCSS
$source-green: #84b6a2;
$source-green-rgb: 132, 182, 162;
$source-green-light: mix(#fff, $source-green, 20%);
$source-green-dark: mix(#000, $source-green, 20%);
.element {
color: $source-green;
box-shadow: 0 0 0 2px rgba($source-green, 0.35);
}