HEX para HSL: #2DD4BF
Também conhecida como: Tailwind v3 teal-400
Resultado
#2DD4BF → hsl(172 66% 50%)
Os valores aparecem com precisão total, então converter de volta dá exatamente #2dd4bf. A forma arredondada é a que normalmente se cola no CSS.
Cálculo passo a passo
Cada número é calculado a partir da entrada; nada é consultado em tabelas.
1. RGB ÷ 255
R = 0.1765 G = 0.8314 B = 0.7490
2. max, min, Δ
max = 0.8314 min = 0.1765 Δ = max − min = 0.6549
3. L
L = (max + min) / 2 = 0.5039 = 50.39%
4. S
S = Δ / (1 − |2L − 1|) = 0.6601 = 66.01%
5. H
max is G → H = 60° × ((B − R) / Δ + 2) = 60° × ((0.7490 − 0.1765) / 0.6549 + 2) = 172.46°
6. HSL
hsl(172.46 66.01% 50.39%)
Todos os formatos
- HEX
- #2dd4bf
- RGB
- rgb(45 212 191)
- RGB (legacy)
- rgb(45, 212, 191)
- HSL
- hsl(172.46 66.01% 50.39%) → hsl(172 66% 50%)
- HWB
- hwb(172 18% 17%)
- OKLCH
- oklch(0.785 0.133 181.9) · oklch(78.5% 0.133 181.9)
- OKLab
- oklab(0.785 -0.132 -0.004)
- Lab (D50)
- lab(76.64 -46.24 -2.00)
- LCH (D50)
- lch(76.64 46.29 182.48)
- Display P3
- color(display-p3 0.4079 0.8195 0.7500)
- Linear sRGB
- color(srgb-linear 0.0262 0.6584 0.5210)
Gamut: sRGB e Display P3
#2DD4BF é uma cor hexadecimal, portanto está dentro do sRGB e, por isso, do Display P3. Com esta luminosidade e matiz, o sRGB chega a um croma de 0.141 e o Display P3 a 0.190; esta cor usa 94% do croma sRGB disponível.
Trechos de CSS
.element {
color: #2dd4bf;
color: rgb(45 212 191);
color: hsl(172 66% 50%);
color: oklch(0.785 0.133 181.9);
}
/* Tailwind CSS v4 */
@theme {
--color-brand: oklch(0.785 0.133 181.9);
}
/* arbitrary values */
class="text-[#2dd4bf] bg-[oklch(0.785_0.133_181.9)]"
/* wide-gamut screens */
@media (color-gamut: p3) {
.element { color: color(display-p3 0.4079 0.8195 0.7500); }
}
/* relative color syntax: 10% darker */
.element-dark { color: oklch(from #2dd4bf calc(l - 0.1) c h); }Cores próximas
Cores mais próximas nas paletas do Tailwind e do CSS (distância OKLab).
- teal-400#00D5BE
- mediumturquoise#48D1CC
- darkturquoise#00CED1
- mediumaquamarine#66CDAA
- turquoise#40E0D0
- v3 emerald-400#34D399
- emerald-400#00D492
- v3 cyan-400#22D3EE
Mais claro e mais escuro, mesmo matiz e croma
- #4BE8D2 · oklch(0.845 0.133 181.9) · ΔL +0.06
- #00C0AC · oklch(0.725 0.133 181.9) · ΔL −0.06