Nazwany kolor · #D4CDB5
Only Oatmeal
Only Oatmeal to #D4CDB5: rgb(212 205 181), hsl(46 26% 77%), oklch(0.848 0.033 93.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Only Oatmeal color name →
#D4CDB5
oklch(0.848 0.033 93.6)
Konwersje koloru
- HEX
- #d4cdb5
- RGB
- rgb(212 205 181)
- HSL
- hsl(46 26% 77%)
- HWB
- hwb(46 71% 17%)
- OKLCH
- oklch(0.848 0.033 93.6)
- OKLab
- oklab(0.848 -0.002 0.033)
- CIE Lab
- lab(82.49 -0.47 12.91)
- LCH
- lch(82.49 12.92 92.1)
- CMYK
- cmyk(0% 3% 15% 17%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- D8D2BC
- DCD7C4
- E1DCCB
- E5E1D2
- E9E6DA
- EEEBE1
- F2F0E9
- F6F5F0
- FBFAF7
Odcienie ciemniejsze
- B8B29D
- 9D9886
- 837E6F
- 696659
- 514E44
- 3A3830
- 24231D
- 100F0C
- 020202
Tony
- CBC5B0
- C3BDAA
- BAB5A5
- B1ADA0
- A9A69A
- A19E95
- 989690
- 908F8A
- 888785
Harmonie kolorów
Komplementarna +180°
- D4CDB5
Only Oatmeal
- C6CCE3
≈ Periwinkle Powder
Analogowa -30° +30°
- D4CDB5
Only Oatmeal
- DDC9B7
≈ Loft Light
- C8D1B9
≈ Sweet Surrender
Triada +120° +240°
- D4CDB5
Only Oatmeal
- B5D3DA
≈ Subtle Breeze
- DBC5D6
≈ Blissful
Komplementarna rozszczepiona +150° +210°
- D4CDB5
Only Oatmeal
- BBD0E2
≈ Bewitching Blue
- D1C8DF
≈ Lavender Water
Tetrada +90° +180° +270°
- D4CDB5
Only Oatmeal
- B6D4CF
≈ Dante Peak
- C6CCE3
≈ Periwinkle Powder
- E1C4CA
≈ Pink Pandora
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.59:1 · APCA Lc 27
Ag
AAANa czerni
WCAG 13.19:1 · APCA Lc 76
Najlepszy kolor tekstu: #000000
WCAG 13.19:1 (AAA) · APCA Lc 76
Contrast pairs
Fragmenty kodu
CSS
:root {
--only-oatmeal: #d4cdb5;
--only-oatmeal-rgb: 212 205 181;
--only-oatmeal-oklch: oklch(0.848 0.033 93.6);
}
.element {
color: var(--only-oatmeal);
background-color: hsl(46 26% 77%);
border-color: oklch(0.848 0.033 93.6);
}Tailwind CSS v4
@theme {
--color-only-oatmeal: #d4cdb5;
--color-only-oatmeal-50: #f8f5eb;
--color-only-oatmeal-100: #ebe8dc;
--color-only-oatmeal-200: #d8d4c5;
--color-only-oatmeal-300: #bcb8a5;
--color-only-oatmeal-400: #a59e89;
--color-only-oatmeal-500: #8d866d;
--color-only-oatmeal-600: #78725d;
--color-only-oatmeal-700: #605b4a;
--color-only-oatmeal-800: #464235;
--color-only-oatmeal-900: #312e24;
--color-only-oatmeal-950: #1d1a13;
}SCSS
$only-oatmeal: #d4cdb5;
$only-oatmeal-rgb: 212, 205, 181;
$only-oatmeal-light: mix(#fff, $only-oatmeal, 20%);
$only-oatmeal-dark: mix(#000, $only-oatmeal, 20%);
.element {
color: $only-oatmeal;
box-shadow: 0 0 0 2px rgba($only-oatmeal, 0.35);
}