Nazwany kolor · #976F4C
Chocolate Milk
Chocolate Milk to #976F4C: rgb(151 111 76), hsl(28 33% 45%), oklch(0.574 0.071 61.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Brown mean? → · Chocolate Milk color name →
#976F4C
oklch(0.574 0.071 61.9)
Konwersje koloru
- HEX
- #976f4c
- RGB
- rgb(151 111 76)
- HSL
- hsl(28 33% 45%)
- HWB
- hwb(28 30% 41%)
- OKLCH
- oklch(0.574 0.071 61.9)
- OKLab
- oklab(0.574 0.033 0.063)
- CIE Lab
- lab(50.36 13.12 25.97)
- LCH
- lch(50.36 29.09 63.2)
- CMYK
- cmyk(0% 26% 50% 41%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- A17D5D
- AC8B6E
- B69980
- C0A791
- CBB5A3
- D5C4B5
- E0D2C7
- EAE1DA
- F5F0EC
Odcienie ciemniejsze
- 836041
- 6F5136
- 5C422C
- 493422
- 372718
- 261A0F
- 170E06
- 080402
- 010100
Tony
- 957152
- 937357
- 91755D
- 8E7662
- 8C7867
- 8A7A6C
- 887B71
- 857D76
- 837E7B
Harmonie kolorów
Komplementarna +180°
- 976F4C
Chocolate Milk
- 517E9F
≈ Flattering Blue
Analogowa -30° +30°
- 976F4C
Chocolate Milk
- 9E695E
≈ Russet Red
- 887746
≈ Pickled Okra
Triada +120° +240°
- 976F4C
Chocolate Milk
- 43867B
≈ Carlisle
- 806F9C
≈ Queen’s
Komplementarna rozszczepiona +150° +210°
- 976F4C
Chocolate Milk
- 408491
≈ Precious Stone
- 6976A3
≈ Blue Batik
Tetrada +90° +180° +270°
- 976F4C
Chocolate Milk
- 588564
≈ Soylent Green
- 517E9F
≈ Flattering Blue
- 92698B
≈ Chinese Violet
Kontrast i dostępność
Ag
FailNa bieli
WCAG 4.47:1 · APCA Lc 71
Ag
AANa czerni
WCAG 4.69:1 · APCA Lc 31
Najlepszy kolor tekstu: #000000
WCAG 4.69:1 (AA) · APCA Lc 31
Contrast pairs
Fragmenty kodu
CSS
:root {
--chocolate-milk: #976f4c;
--chocolate-milk-rgb: 151 111 76;
--chocolate-milk-oklch: oklch(0.574 0.071 61.9);
}
.element {
color: var(--chocolate-milk);
background-color: hsl(28 33% 45%);
border-color: oklch(0.574 0.071 61.9);
}Tailwind CSS v4
@theme {
--color-chocolate-milk: #976f4c;
--color-chocolate-milk-50: #fff1e1;
--color-chocolate-milk-100: #f9e3d0;
--color-chocolate-milk-200: #ebcfb6;
--color-chocolate-milk-300: #d2b092;
--color-chocolate-milk-400: #bd9573;
--color-chocolate-milk-500: #a87b54;
--color-chocolate-milk-600: #8e6948;
--color-chocolate-milk-700: #725439;
--color-chocolate-milk-800: #553d29;
--color-chocolate-milk-900: #3b2a1b;
--color-chocolate-milk-950: #25170c;
}SCSS
$chocolate-milk: #976f4c;
$chocolate-milk-rgb: 151, 111, 76;
$chocolate-milk-light: mix(#fff, $chocolate-milk, 20%);
$chocolate-milk-dark: mix(#000, $chocolate-milk, 20%);
.element {
color: $chocolate-milk;
box-shadow: 0 0 0 2px rgba($chocolate-milk, 0.35);
}