Nazwany kolor · #7D6848
Essential Brown
Essential Brown to #7D6848: rgb(125 104 72), hsl(36 27% 39%), oklch(0.529 0.054 77.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Brown mean? → · Essential Brown color name →
#7D6848
oklch(0.529 0.054 77.7)
Konwersje koloru
- HEX
- #7d6848
- RGB
- rgb(125 104 72)
- HSL
- hsl(36 27% 39%)
- HWB
- hwb(36 28% 51%)
- OKLCH
- oklch(0.529 0.054 77.7)
- OKLab
- oklab(0.529 0.011 0.052)
- CIE Lab
- lab(45.47 5.15 21.33)
- LCH
- lch(45.47 21.94 76.4)
- CMYK
- cmyk(0% 17% 42% 51%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 897659
- 96846A
- A2937C
- AFA28E
- BCB1A0
- C9C0B2
- D7D0C5
- E4DFD8
- F1EFEB
Odcienie ciemniejsze
- 6C593D
- 5B4B33
- 4B3E29
- 3B301F
- 2C2416
- 1E180D
- 110C06
- 050402
- 010000
Tony
- 7D6A4E
- 7E6D54
- 7E6F59
- 7E725F
- 7F7465
- 7F776A
- 7F7970
- 807B75
- 807E7B
Harmonie kolorów
Komplementarna +180°
- 7D6848
Essential Brown
- 586D8B
≈ Great Basin
Analogowa -30° +30°
- 7D6848
Essential Brown
- 866251
≈ How Now
- 6E6E4A
≈ Capulet Olive
Triada +120° +240°
- 7D6848
Essential Brown
- 447577
≈ Ming
- 796280
≈ Montana Grape
Komplementarna rozszczepiona +150° +210°
- 7D6848
Essential Brown
- 497284
≈ Wild River
- 6A6789
≈ Heron
Tetrada +90° +180° +270°
- 7D6848
Essential Brown
- 4C7666
≈ Hooker’s Green
- 586D8B
≈ Great Basin
- 835F71
≈ Majestic Plum
Kontrast i dostępność
Ag
AANa bieli
WCAG 5.32:1 · APCA Lc 76
Ag
FailNa czerni
WCAG 3.94:1 · APCA Lc 25
Najlepszy kolor tekstu: #FFFFFF
WCAG 5.32:1 (AA) · APCA Lc 76
Contrast pairs
Fragmenty kodu
CSS
:root {
--essential-brown: #7d6848;
--essential-brown-rgb: 125 104 72;
--essential-brown-oklch: oklch(0.529 0.054 77.7);
}
.element {
color: var(--essential-brown);
background-color: hsl(36 27% 39%);
border-color: oklch(0.529 0.054 77.7);
}Tailwind CSS v4
@theme {
--color-essential-brown: #7d6848;
--color-essential-brown-50: #fdf4e4;
--color-essential-brown-100: #f2e6d4;
--color-essential-brown-200: #e1d2bb;
--color-essential-brown-300: #c6b599;
--color-essential-brown-400: #b09b7b;
--color-essential-brown-500: #9a825e;
--color-essential-brown-600: #826e50;
--color-essential-brown-700: #68583f;
--color-essential-brown-800: #4d402d;
--color-essential-brown-900: #362c1f;
--color-essential-brown-950: #21190e;
}SCSS
$essential-brown: #7d6848;
$essential-brown-rgb: 125, 104, 72;
$essential-brown-light: mix(#fff, $essential-brown, 20%);
$essential-brown-dark: mix(#000, $essential-brown, 20%);
.element {
color: $essential-brown;
box-shadow: 0 0 0 2px rgba($essential-brown, 0.35);
}