HEX in HSL: #3F3F46
Noto anche come: Tailwind zinc-700, Tailwind v3 zinc-700
Risultato
#3F3F46 → hsl(240 5% 26%)
I valori sono mostrati a piena precisione, quindi riconvertendo si ottiene esattamente #3f3f46. 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.2471 G = 0.2471 B = 0.2745
2. max, min, Δ
max = 0.2745 min = 0.2471 Δ = max − min = 0.0275
3. L
L = (max + min) / 2 = 0.2608 = 26.08%
4. S
S = Δ / (1 − |2L − 1|) = 0.0526 = 5.26%
5. H
max is B → H = 60° × ((R − G) / Δ + 4) = 60° × ((0.2471 − 0.2471) / 0.0275 + 4) = 240.00°
6. HSL
hsl(240.00 5.26% 26.08%)
Tutti i formati
- HEX
- #3f3f46
- RGB
- rgb(63 63 70)
- RGB (legacy)
- rgb(63, 63, 70)
- HSL
- hsl(240.00 5.26% 26.08%) → hsl(240 5% 26%)
- HWB
- hwb(240 25% 73%)
- OKLCH
- oklch(0.370 0.012 285.8) · oklch(37.0% 0.012 285.8)
- OKLab
- oklab(0.370 0.003 -0.011)
- Lab (D50)
- lab(26.85 1.23 -4.28)
- LCH (D50)
- lch(26.85 4.46 286.00)
- Display P3
- color(display-p3 0.2471 0.2471 0.2722)
- Linear sRGB
- color(srgb-linear 0.0497 0.0497 0.0612)
Gamut: sRGB e Display P3
#3F3F46 è 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.215 e Display P3 a 0.220; questo colore usa il 6% della croma sRGB disponibile.
Snippet CSS
.element {
color: #3f3f46;
color: rgb(63 63 70);
color: hsl(240 5% 26%);
color: oklch(0.370 0.012 285.8);
}
/* Tailwind CSS v4 */
@theme {
--color-brand: oklch(0.370 0.012 285.8);
}
/* arbitrary values */
class="text-[#3f3f46] bg-[oklch(0.370_0.012_285.8)]"
/* wide-gamut screens */
@media (color-gamut: p3) {
.element { color: color(display-p3 0.2471 0.2471 0.2722); }
}
/* relative color syntax: 10% darker */
.element-dark { color: oklch(from #3f3f46 calc(l - 0.1) c h); }Colori vicini
I colori più vicini nelle palette Tailwind e CSS (distanza OKLab).
- neutral-700#404040
- mist-700#394447
- v3 stone-700#44403C
- v3 gray-700#374151
- stone-700#44403B
- mauve-700#463947
- taupe-700#473C39
- gray-700#364153
Più chiaro e più scuro, stessa tonalità e croma
- #4F4F56 · oklch(0.430 0.012 285.8) · ΔL +0.06
- #303036 · oklch(0.310 0.012 285.8) · ΔL −0.06