HEX in HSL: #EA580C
Noto anche come: Tailwind v3 orange-600
Risultato
#EA580C → hsl(21 90% 48%)
I valori sono mostrati a piena precisione, quindi riconvertendo si ottiene esattamente #ea580c. La forma arrotondata è quella che di solito incolli nel CSS.
Calcolo passo passo
Ogni numero è calcolato dall’input, nulla viene cercato in tabelle.
1. RGB ÷ 255
R = 0.9176 G = 0.3451 B = 0.0471
2. max, min, Δ
max = 0.9176 min = 0.0471 Δ = max − min = 0.8706
3. L
L = (max + min) / 2 = 0.4824 = 48.24%
4. S
S = Δ / (1 − |2L − 1|) = 0.9024 = 90.24%
5. H
max is R → H = 60° × (((G − B) / Δ) mod 6) = 60° × (((0.3451 − 0.0471) / 0.8706) mod 6) = 20.54°
6. HSL
hsl(20.54 90.24% 48.24%)
Tutti i formati
- HEX
- #ea580c
- RGB
- rgb(234 88 12)
- RGB (legacy)
- rgb(234, 88, 12)
- HSL
- hsl(20.54 90.24% 48.24%) → hsl(21 90% 48%)
- HWB
- hwb(21 5% 8%)
- OKLCH
- oklch(0.646 0.194 41.1) · oklch(64.6% 0.194 41.1)
- OKLab
- oklab(0.646 0.146 0.128)
- Lab (D50)
- lab(57.39 55.59 65.41)
- LCH (D50)
- lch(57.39 85.84 49.64)
- Display P3
- color(display-p3 0.8511 0.3836 0.1698)
- Linear sRGB
- color(srgb-linear 0.8228 0.0976 0.0037)
Gamut: sRGB e Display P3
#EA580C è un colore esadecimale, quindi sta dentro sRGB e di conseguenza dentro Display P3. A questa luminosità e tonalità sRGB arriva a una croma di 0.198 e Display P3 a 0.224; questo colore usa il 98% della croma sRGB disponibile.
Snippet CSS
.element {
color: #ea580c;
color: rgb(234 88 12);
color: hsl(21 90% 48%);
color: oklch(0.646 0.194 41.1);
}
/* Tailwind CSS v4 */
@theme {
--color-brand: oklch(0.646 0.194 41.1);
}
/* arbitrary values */
class="text-[#ea580c] bg-[oklch(0.646_0.194_41.1)]"
/* wide-gamut screens */
@media (color-gamut: p3) {
.element { color: color(display-p3 0.8511 0.3836 0.1698); }
}
/* relative color syntax: 10% darker */
.element-dark { color: oklch(from #ea580c calc(l - 0.1) c h); }Colori vicini
I colori più vicini nelle palette Tailwind e CSS (distanza OKLab).
- orange-600#F54900
- orangered#FF4500
- chocolate#D2691E
- amber-600#E17100
- orange-500#FF6900
- v3 red-500#EF4444
- tomato#FF6347
- v3 orange-500#F97316
Più chiaro e più scuro, stessa tonalità e croma
- #FF6C2C · oklch(0.706 0.194 41.1) · ΔL +0.06
- #D54300 · oklch(0.586 0.194 41.1) · ΔL −0.06