Nazwany kolor · #C88554
Maple Syrup Brown
Maple Syrup Brown to #C88554: rgb(200 133 84), hsl(25 51% 56%), oklch(0.675 0.105 56). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Maple Syrup Brown color name →
#C88554
oklch(0.675 0.105 56)
Konwersje koloru
- HEX
- #c88554
- RGB
- rgb(200 133 84)
- HSL
- hsl(25 51% 56%)
- HWB
- hwb(25 33% 22%)
- OKLCH
- oklch(0.675 0.105 56)
- OKLab
- oklab(0.675 0.059 0.087)
- CIE Lab
- lab(61.83 22.84 37.19)
- LCH
- lch(61.83 43.65 58.4)
- CMYK
- cmyk(0% 34% 58% 22%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- CE9166
- D49D77
- DAA988
- E0B599
- E5C2A9
- EBCEBA
- F0DACB
- F5E6DC
- FAF3EE
Odcienie ciemniejsze
- AE7348
- 94613C
- 7B5031
- 634026
- 4C301B
- 362111
- 211308
- 0F0602
- 020100
Tony
- C1855A
- BA855F
- B38464
- AC8468
- A5846D
- 9E8371
- 968275
- 8F8279
- 88817C
Harmonie kolorów
Komplementarna +180°
- C88554
Maple Syrup Brown
- 4FA0CF
≈ Peaceful River
Analogowa -30° +30°
- C88554
Maple Syrup Brown
- D07C74
≈ Bite My Tongue
- B39243
≈ Venetian Gold
Triada +120° +240°
- C88554
Maple Syrup Brown
- 3FAC94
≈ Hole in One
- 9C89D0
≈ Petrified Purple
Komplementarna rozszczepiona +150° +210°
- C88554
Maple Syrup Brown
- 2DA9B6
≈ Green Buoy
- 7895D8
≈ Pannikin
Tetrada +90° +180° +270°
- C88554
Maple Syrup Brown
- 6AA86F
≈ Happy Cricket
- 4FA0CF
≈ Peaceful River
- B87FB9
≈ Colombo Red Mauve
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.02:1 · APCA Lc 57
Ag
AANa czerni
WCAG 6.93:1 · APCA Lc 45
Najlepszy kolor tekstu: #000000
WCAG 6.93:1 (AA) · APCA Lc 45
Contrast pairs
Fragmenty kodu
CSS
:root {
--maple-syrup-brown: #c88554;
--maple-syrup-brown-rgb: 200 133 84;
--maple-syrup-brown-oklch: oklch(0.675 0.105 56);
}
.element {
color: var(--maple-syrup-brown);
background-color: hsl(25 51% 56%);
border-color: oklch(0.675 0.105 56);
}Tailwind CSS v4
@theme {
--color-maple-syrup-brown: #c88554;
--color-maple-syrup-brown-50: #ffefd8;
--color-maple-syrup-brown-100: #ffe0c6;
--color-maple-syrup-brown-200: #f7caa8;
--color-maple-syrup-brown-300: #e1aa82;
--color-maple-syrup-brown-400: #ce8e60;
--color-maple-syrup-brown-500: #ba723a;
--color-maple-syrup-brown-600: #9d6133;
--color-maple-syrup-brown-700: #7e4d28;
--color-maple-syrup-brown-800: #5e381c;
--color-maple-syrup-brown-900: #422613;
--color-maple-syrup-brown-950: #2a1405;
}SCSS
$maple-syrup-brown: #c88554;
$maple-syrup-brown-rgb: 200, 133, 84;
$maple-syrup-brown-light: mix(#fff, $maple-syrup-brown, 20%);
$maple-syrup-brown-dark: mix(#000, $maple-syrup-brown, 20%);
.element {
color: $maple-syrup-brown;
box-shadow: 0 0 0 2px rgba($maple-syrup-brown, 0.35);
}