HEX naar HSL: #D97706
Ook bekend als: Tailwind v3 amber-600
Resultaat
#D97706 → hsl(32 95% 44%)
Waarden staan op volle precisie, dus terugrekenen geeft exact #d97706. De afgeronde vorm plak je gewoonlijk in CSS.
Stap-voor-stap berekening
Elk getal wordt uit de invoer berekend, er wordt niets opgezocht.
1. RGB ÷ 255
R = 0.8510 G = 0.4667 B = 0.0235
2. max, min, Δ
max = 0.8510 min = 0.0235 Δ = max − min = 0.8275
3. L
L = (max + min) / 2 = 0.4373 = 43.73%
4. S
S = Δ / (1 − |2L − 1|) = 0.9462 = 94.62%
5. H
max is R → H = 60° × (((G − B) / Δ) mod 6) = 60° × (((0.4667 − 0.0235) / 0.8275) mod 6) = 32.13°
6. HSL
hsl(32.13 94.62% 43.73%)
Alle formaten
- HEX
- #d97706
- RGB
- rgb(217 119 6)
- RGB (legacy)
- rgb(217, 119, 6)
- HSL
- hsl(32.13 94.62% 43.73%) → hsl(32 95% 44%)
- HWB
- hwb(32 2% 15%)
- OKLCH
- oklch(0.666 0.157 58.3) · oklch(66.6% 0.157 58.3)
- OKLab
- oklab(0.666 0.083 0.134)
- Lab (D50)
- lab(60.49 34.89 66.47)
- LCH (D50)
- lch(60.49 75.07 62.31)
- Display P3
- color(display-p3 0.7998 0.4861 0.1788)
- Linear sRGB
- color(srgb-linear 0.6939 0.1845 0.0018)
Gamut: sRGB en Display P3
#D97706 is een hexkleur en ligt dus binnen sRGB en daarmee binnen Display P3. Bij deze helderheid en tint haalt sRGB een chroma van 0.159 en Display P3 van 0.181; deze kleur gebruikt 99% van de beschikbare sRGB-chroma.
CSS-snippets
.element {
color: #d97706;
color: rgb(217 119 6);
color: hsl(32 95% 44%);
color: oklch(0.666 0.157 58.3);
}
/* Tailwind CSS v4 */
@theme {
--color-brand: oklch(0.666 0.157 58.3);
}
/* arbitrary values */
class="text-[#d97706] bg-[oklch(0.666_0.157_58.3)]"
/* wide-gamut screens */
@media (color-gamut: p3) {
.element { color: color(display-p3 0.7998 0.4861 0.1788); }
}
/* relative color syntax: 10% darker */
.element-dark { color: oklch(from #d97706 calc(l - 0.1) c h); }Kleuren in de buurt
Dichtstbijzijnde kleuren in de Tailwind- en CSS-paletten (OKLab-afstand).
- amber-600#E17100
- peru#CD853F
- chocolate#D2691E
- yellow-600#D08700
- v3 yellow-600#CA8A04
- v3 orange-500#F97316
- darkgoldenrod#B8860B
- v3 orange-600#EA580C
Lichter en donkerder, dezelfde tint en chroma
- #EE8A2C · oklch(0.726 0.157 58.3) · ΔL +0.06
- #C56400 · oklch(0.606 0.157 58.3) · ΔL −0.06