HSL para HEX: #CD853F
Também conhecida como: CSS peru
Resultado
hsl(29.58 58.68% 52.55%) → #CD853F
Os valores aparecem com precisão total, então converter de volta dá exatamente #cd853f. 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. input
H = 29.58°, S = 58.68%, L = 52.55%
2. C
C = (1 − |2L − 1|) × S = 0.55687
3. X
X = C × (1 − |(H / 60°) mod 2 − 1|) = 0.27454 (H / 60° = 0.4930, sector 0)
4. m
m = L − C / 2 = 0.24706
5. (R′, G′, B′) + m
(R′, G′, B′) = (0.55687, 0.27454, 0.00000) R = round((0.55687 + 0.24706) × 255) = 205 G = round((0.27454 + 0.24706) × 255) = 133 B = round((0.00000 + 0.24706) × 255) = 63
6. RGB → HEX
#CD853F
Todos os formatos
- HEX
- #cd853f
- RGB
- rgb(205 133 63)
- RGB (legacy)
- rgb(205, 133, 63)
- HSL
- hsl(29.58 58.68% 52.55%) → hsl(30 59% 53%)
- HWB
- hwb(30 25% 20%)
- OKLCH
- oklch(0.678 0.123 62.2) · oklch(67.8% 0.123 62.2)
- OKLab
- oklab(0.678 0.057 0.109)
- Lab (D50)
- lab(62.25 23.95 48.41)
- LCH (D50)
- lch(62.25 54.01 63.68)
- Display P3
- color(display-p3 0.7635 0.5342 0.2988)
- Linear sRGB
- color(srgb-linear 0.6105 0.2346 0.0497)
Gamut: sRGB e Display P3
#CD853F é 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.156 e o Display P3 a 0.178; esta cor usa 79% do croma sRGB disponível.
Trechos de CSS
.element {
color: #cd853f;
color: rgb(205 133 63);
color: hsl(30 59% 53%);
color: oklch(0.678 0.123 62.2);
}
/* Tailwind CSS v4 */
@theme {
--color-brand: oklch(0.678 0.123 62.2);
}
/* arbitrary values */
class="text-[#cd853f] bg-[oklch(0.678_0.123_62.2)]"
/* wide-gamut screens */
@media (color-gamut: p3) {
.element { color: color(display-p3 0.7635 0.5342 0.2988); }
}
/* relative color syntax: 10% darker */
.element-dark { color: oklch(from #cd853f calc(l - 0.1) c h); }Cores próximas
Cores mais próximas nas paletas do Tailwind e do CSS (distância OKLab).
- yellow-600#D08700
- v3 yellow-600#CA8A04
- v3 amber-600#D97706
- darkgoldenrod#B8860B
- amber-600#E17100
- chocolate#D2691E
- v3 orange-500#F97316
- darksalmon#E9967A
Mais claro e mais escuro, mesmo matiz e croma
- #E19853 · oklch(0.738 0.123 62.2) · ΔL +0.06
- #B9732A · oklch(0.618 0.123 62.2) · ΔL −0.06