HEX na OKLCH: #84CC16
Znany także jako: Tailwind v3 lime-500
Wynik
#84CC16 → oklch(0.768 0.204 130.8)
Wartości podano z pełną precyzją, więc przeliczenie z powrotem daje dokładnie #84cc16. 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. sRGB → linear
R: 132/255 = 0.51765 → 0.230740 (((x + 0.055) / 1.055)^2.4) G: 204/255 = 0.80000 → 0.603827 (((x + 0.055) / 1.055)^2.4) B: 22/255 = 0.08627 → 0.008023 (((x + 0.055) / 1.055)^2.4)
2. linear sRGB → LMS
l = 0.4122·R + 0.5363·G + 0.0514·B = 0.419381 m = 0.2119·R + 0.6807·G + 0.1074·B = 0.460781 s = 0.0883·R + 0.2817·G + 0.6300·B = 0.195539
3. cube root
l′ = ∛0.419381 = 0.748519 m′ = ∛0.460781 = 0.772381 s′ = ∛0.195539 = 0.580423
4. LMS′ → Oklab
L = 0.2105·l′ + 0.7936·m′ − 0.0041·s′ = 0.76814 a = 1.9780·l′ − 2.4286·m′ + 0.4506·s′ = -0.13369 b = 0.0259·l′ + 0.7828·m′ − 0.8087·s′ = 0.15461
5. Oklab → OKLCH
C = √(a² + b²) = 0.20440 H = atan2(b, a) = 130.850° L = 0.76814
6. OKLCH
oklch(0.76814 0.20440 130.850) rounded: oklch(0.768 0.204 130.8)
Wszystkie formaty
- HEX
- #84cc16
- RGB
- rgb(132 204 22)
- RGB (legacy)
- rgb(132, 204, 22)
- HSL
- hsl(83.74 80.53% 44.31%) → hsl(84 81% 44%)
- HWB
- hwb(84 9% 20%)
- OKLCH
- oklch(0.768 0.204 130.8) · oklch(76.8% 0.204 130.8)
- OKLab
- oklab(0.768 -0.134 0.155)
- Lab (D50)
- lab(75.12 -41.50 70.26)
- LCH (D50)
- lch(75.12 81.60 120.57)
- Display P3
- color(display-p3 0.5811 0.7926 0.2600)
- Linear sRGB
- color(srgb-linear 0.2307 0.6038 0.0080)
Gamut: sRGB i Display P3
#84CC16 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.209, a Display P3 0.245; ten kolor wykorzystuje 98% dostępnej chromy sRGB.
Fragmenty CSS
.element {
color: #84cc16;
color: rgb(132 204 22);
color: hsl(84 81% 44%);
color: oklch(0.768 0.204 130.8);
}
/* Tailwind CSS v4 */
@theme {
--color-brand: oklch(0.768 0.204 130.8);
}
/* arbitrary values */
class="text-[#84cc16] bg-[oklch(0.768_0.204_130.8)]"
/* wide-gamut screens */
@media (color-gamut: p3) {
.element { color: color(display-p3 0.5811 0.7926 0.2600); }
}
/* relative color syntax: 10% darker */
.element-dark { color: oklch(from #84cc16 calc(l - 0.1) c h); }Kolory w pobliżu
Najbliższe kolory w paletach Tailwind i CSS (odległość OKLab).
- lime-500#7CCF00
- yellowgreen#9ACD32
- limegreen#32CD32
- green-500#00C950
- lime-400#9AE600
- green-400#05DF72
- v3 green-500#22C55E
- v3 green-400#4ADE80
Jaśniejszy i ciemniejszy, ta sama barwa i chroma
- #97E039 · oklch(0.828 0.204 130.8) · ΔL +0.06
- #72B800 · oklch(0.708 0.204 130.8) · ΔL −0.06