Nazwany kolor · #8A4438
Chocolate Cherry
Chocolate Cherry to #8A4438: rgb(138 68 56), hsl(9 42% 38%), oklch(0.472 0.098 31.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Chocolate Cherry color name →
#8A4438
oklch(0.472 0.098 31.1)
Konwersje koloru
- HEX
- #8a4438
- RGB
- rgb(138 68 56)
- HSL
- hsl(9 42% 38%)
- HWB
- hwb(9 22% 46%)
- OKLCH
- oklch(0.472 0.098 31.1)
- OKLab
- oklab(0.472 0.084 0.051)
- CIE Lab
- lab(37.91 29.63 21.65)
- LCH
- lch(37.91 36.69 36.2)
- CMYK
- cmyk(0% 51% 59% 46%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 97564A
- A3685D
- AF7A70
- BB8C83
- C79F97
- D2B2AB
- DEC5C0
- E9D8D4
- F4EBEA
Odcienie ciemniejsze
- 773A2F
- 653027
- 53261F
- 421D17
- 32140F
- 220C08
- 140504
- 070201
- 010000
Tony
- 8A4B3F
- 8A5147
- 89574E
- 895D55
- 88635C
- 876963
- 856F6A
- 847572
- 827A79
Harmonie kolorów
Komplementarna +180°
- 8A4438
Chocolate Cherry
- 006776
≈ Bankson Lake
Analogowa -30° +30°
- 8A4438
Chocolate Cherry
- 874258
≈ Dark Earth
- 824D16
≈ Milk Chocolate
Triada +120° +240°
- 8A4438
Chocolate Cherry
- 296B3E
≈ Billiard Ball
- 475792
≈ Onion Skin Blue
Komplementarna rozszczepiona +150° +210°
- 8A4438
Chocolate Cherry
- 006B5E
≈ Pacific Queen
- 1A618D
≈ Pontoon
Tetrada +90° +180° +270°
- 8A4438
Chocolate Cherry
- 53631B
≈ Tabbouleh Green
- 006776
≈ Bankson Lake
- 654D89
≈ Violet Majesty
Kontrast i dostępność
Ag
AAANa bieli
WCAG 7.08:1 · APCA Lc 84
Ag
FailNa czerni
WCAG 2.96:1 · APCA Lc 18
Najlepszy kolor tekstu: #FFFFFF
WCAG 7.08:1 (AAA) · APCA Lc 84
Contrast pairs
Fragmenty kodu
CSS
:root {
--chocolate-cherry: #8a4438;
--chocolate-cherry-rgb: 138 68 56;
--chocolate-cherry-oklch: oklch(0.472 0.098 31.1);
}
.element {
color: var(--chocolate-cherry);
background-color: hsl(9 42% 38%);
border-color: oklch(0.472 0.098 31.1);
}Tailwind CSS v4
@theme {
--color-chocolate-cherry: #8a4438;
--color-chocolate-cherry-50: #ffece3;
--color-chocolate-cherry-100: #ffddd3;
--color-chocolate-cherry-200: #fbc6ba;
--color-chocolate-cherry-300: #e5a597;
--color-chocolate-cherry-400: #d2887b;
--color-chocolate-cherry-500: #be6c5d;
--color-chocolate-cherry-600: #a15c4f;
--color-chocolate-cherry-700: #81493f;
--color-chocolate-cherry-800: #60352e;
--color-chocolate-cherry-900: #43241f;
--color-chocolate-cherry-950: #2b120f;
}SCSS
$chocolate-cherry: #8a4438;
$chocolate-cherry-rgb: 138, 68, 56;
$chocolate-cherry-light: mix(#fff, $chocolate-cherry, 20%);
$chocolate-cherry-dark: mix(#000, $chocolate-cherry, 20%);
.element {
color: $chocolate-cherry;
box-shadow: 0 0 0 2px rgba($chocolate-cherry, 0.35);
}