Nazwany kolor · #B5A39C
Chocolate Oatmeal
Chocolate Oatmeal to #B5A39C: rgb(181 163 156), hsl(17 14% 66%), oklch(0.729 0.023 42.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Chocolate Oatmeal color name →
#B5A39C
oklch(0.729 0.023 42.5)
Konwersje koloru
- HEX
- #b5a39c
- RGB
- rgb(181 163 156)
- HSL
- hsl(17 14% 66%)
- HWB
- hwb(17 61% 29%)
- OKLCH
- oklch(0.729 0.023 42.5)
- OKLab
- oklab(0.729 0.017 0.016)
- CIE Lab
- lab(68.43 5.9 6.16)
- LCH
- lch(68.43 8.53 46.3)
- CMYK
- cmyk(0% 10% 14% 29%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- BCACA6
- C4B5AF
- CBBEB9
- D2C7C3
- DAD0CC
- E1D9D6
- E8E3E0
- F0ECEB
- F7F5F5
Odcienie ciemniejsze
- 9D8D87
- 867873
- 6F635F
- 594F4C
- 443C39
- 302A28
- 1D1918
- 0C0A09
- 020101
Tony
- B09F99
- AA9C96
- A59894
- A09591
- 9A918E
- 958E8B
- 908A88
- 8A8786
- 858383
Harmonie kolorów
Komplementarna +180°
- B5A39C
Chocolate Oatmeal
- 98ABB2
≈ Meditative
Analogowa -30° +30°
- B5A39C
Chocolate Oatmeal
- B6A2A3
≈ Lilac Smoke
- B1A598
≈ Tranquil Taupe
Triada +120° +240°
- B5A39C
Chocolate Oatmeal
- 9BACA3
≈ Tower Grey
- A5A6B6
≈ Curated Lilac
Komplementarna rozszczepiona +150° +210°
- B5A39C
Chocolate Oatmeal
- 97ACAB
≈ Grey Mist
- 9DA9B6
≈ Wave Goodbye
Tetrada +90° +180° +270°
- B5A39C
Chocolate Oatmeal
- A2AB9C
≈ Green Balsam
- 98ABB2
≈ Meditative
- ACA3B2
≈ Luxe Lilac
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.41:1 · APCA Lc 48
Ag
AAANa czerni
WCAG 8.68:1 · APCA Lc 54
Najlepszy kolor tekstu: #000000
WCAG 8.68:1 (AAA) · APCA Lc 54
Contrast pairs
Fragmenty kodu
CSS
:root {
--chocolate-oatmeal: #b5a39c;
--chocolate-oatmeal-rgb: 181 163 156;
--chocolate-oatmeal-oklch: oklch(0.729 0.023 42.5);
}
.element {
color: var(--chocolate-oatmeal);
background-color: hsl(17 14% 66%);
border-color: oklch(0.729 0.023 42.5);
}Tailwind CSS v4
@theme {
--color-chocolate-oatmeal: #b5a39c;
--color-chocolate-oatmeal-50: #fbf3f0;
--color-chocolate-oatmeal-100: #efe6e2;
--color-chocolate-oatmeal-200: #ddd1cc;
--color-chocolate-oatmeal-300: #c2b4ae;
--color-chocolate-oatmeal-400: #ab9a94;
--color-chocolate-oatmeal-500: #94817a;
--color-chocolate-oatmeal-600: #7e6e67;
--color-chocolate-oatmeal-700: #645853;
--color-chocolate-oatmeal-800: #4a403c;
--color-chocolate-oatmeal-900: #332c29;
--color-chocolate-oatmeal-950: #1f1917;
}SCSS
$chocolate-oatmeal: #b5a39c;
$chocolate-oatmeal-rgb: 181, 163, 156;
$chocolate-oatmeal-light: mix(#fff, $chocolate-oatmeal, 20%);
$chocolate-oatmeal-dark: mix(#000, $chocolate-oatmeal, 20%);
.element {
color: $chocolate-oatmeal;
box-shadow: 0 0 0 2px rgba($chocolate-oatmeal, 0.35);
}