HEX na HSL: #EA580C
Znany także jako: Tailwind v3 orange-600
Wynik
#EA580C → hsl(21 90% 48%)
Wartości podano z pełną precyzją, więc przeliczenie z powrotem daje dokładnie #ea580c. Zaokrągloną postać zwykle wklejasz do CSS.
Obliczenia krok po kroku
Każda liczba jest wyliczona z danych wejściowych, nic nie jest pobierane z tabel.
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%)
Wszystkie formaty
- 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 i Display P3
#EA580C to kolor szesnastkowy, więc mieści się w sRGB, a zatem także w Display P3. Przy tej jasności i barwie sRGB osiąga chromę 0.198, a Display P3 0.224; ten kolor wykorzystuje 98% dostępnej chromy sRGB.
Fragmenty 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); }Kolory w pobliżu
Najbliższe kolory w paletach Tailwind i CSS (odległość OKLab).
- orange-600#F54900
- orangered#FF4500
- chocolate#D2691E
- amber-600#E17100
- orange-500#FF6900
- v3 red-500#EF4444
- tomato#FF6347
- v3 orange-500#F97316
Jaśniejszy i ciemniejszy, ta sama barwa i chroma
- #FF6C2C · oklch(0.706 0.194 41.1) · ΔL +0.06
- #D54300 · oklch(0.586 0.194 41.1) · ΔL −0.06