Najbliższy nazwany kolor · #8F4400
#8F4400
Najbliższy nazwany kolor: Otterly Brown
#8F4400 (rgb(143 68 0), hsl(29 100% 28%), oklch(0.474 0.121 52.4)) jest najbliższy nazwanemu kolorowi Otterly Brown. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#8F4400
oklch(0.474 0.121 52.4)
Konwersje koloru
- HEX
- #8f4400
- RGB
- rgb(143 68 0)
- HSL
- hsl(29 100% 28%)
- HWB
- hwb(29 0% 44%)
- OKLCH
- oklch(0.474 0.121 52.4)
- OKLab
- oklab(0.474 0.074 0.096)
- CIE Lab
- lab(38.3 30.02 48.55)
- LCH
- lch(38.3 57.09 58.3)
- CMYK
- cmyk(0% 52% 100% 44%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 9B5727
- A76941
- B37B59
- BE8D70
- CAA087
- D5B29E
- DFC5B6
- EAD8CE
- F5ECE6
Odcienie ciemniejsze
- 7C3A00
- 693000
- 572600
- 451D00
- 341400
- 240C00
- 150500
- 070200
- 010000
Tony
- 8E4B1A
- 8E5229
- 8D5836
- 8C5E42
- 8A644D
- 896A57
- 877062
- 85756C
- 837B76
Harmonie kolorów
Komplementarna +180°
- 8F4400
Otterly Brown
- 006489
≈ Reservoir
Analogowa -30° +30°
- 8F4400
Otterly Brown
- 943B3B
≈ New Sled
- 775600
≈ Pickled Grape Leaves
Triada +120° +240°
- 8F4400
Otterly Brown
- 006C56
≈ Teal Dark Green
- 5F4C9A
≈ Coronation Blue
Komplementarna rozszczepiona +150° +210°
- 8F4400
Otterly Brown
- 006970
≈ Tahitian Treat
- 3559A0
≈ Neptune Blue
Tetrada +90° +180° +270°
- 8F4400
Otterly Brown
- 2C6C28
≈ Brazilian Green
- 006489
≈ Reservoir
- 7B4184
≈ Nightly Violet
Kontrast i dostępność
Ag
AAANa bieli
WCAG 7.01:1 · APCA Lc 84
Ag
FailNa czerni
WCAG 2.99:1 · APCA Lc 18
Najlepszy kolor tekstu: #FFFFFF
WCAG 7.01:1 (AAA) · APCA Lc 84
Contrast pairs
Fragmenty kodu
CSS
:root {
--otterly-brown: #8f4400;
--otterly-brown-rgb: 143 68 0;
--otterly-brown-oklch: oklch(0.474 0.121 52.4);
}
.element {
color: var(--otterly-brown);
background-color: hsl(29 100% 28%);
border-color: oklch(0.474 0.121 52.4);
}Tailwind CSS v4
@theme {
--color-otterly-brown: #8f4400;
--color-otterly-brown-50: #ffedd5;
--color-otterly-brown-100: #ffdec2;
--color-otterly-brown-200: #fec7a3;
--color-otterly-brown-300: #e8a77b;
--color-otterly-brown-400: #d78957;
--color-otterly-brown-500: #c36c2e;
--color-otterly-brown-600: #a55c29;
--color-otterly-brown-700: #854920;
--color-otterly-brown-800: #633417;
--color-otterly-brown-900: #46240f;
--color-otterly-brown-950: #2d1203;
}SCSS
$otterly-brown: #8f4400;
$otterly-brown-rgb: 143, 68, 0;
$otterly-brown-light: mix(#fff, $otterly-brown, 20%);
$otterly-brown-dark: mix(#000, $otterly-brown, 20%);
.element {
color: $otterly-brown;
box-shadow: 0 0 0 2px rgba($otterly-brown, 0.35);
}