Nazwany kolor · #DDC7A2
Oatmeal Bath
Oatmeal Bath to #DDC7A2: rgb(221 199 162), hsl(38 46% 75%), oklch(0.839 0.055 80.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Oatmeal Bath color name →
#DDC7A2
oklch(0.839 0.055 80.6)
Konwersje koloru
- HEX
- #ddc7a2
- RGB
- rgb(221 199 162)
- HSL
- hsl(38 46% 75%)
- HWB
- hwb(38 64% 13%)
- OKLCH
- oklch(0.839 0.055 80.6)
- OKLab
- oklab(0.839 0.009 0.054)
- CIE Lab
- lab(81.41 3.86 21.57)
- LCH
- lch(81.41 21.91 79.9)
- CMYK
- cmyk(0% 10% 27% 13%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- E0CDAB
- E4D2B5
- E7D8BE
- EBDDC7
- EEE3D0
- F1E8DA
- F5EEE3
- F8F4EC
- FCF9F6
Odcienie ciemniejsze
- C0AD8C
- A49377
- 887A63
- 6E624F
- 554C3C
- 3D362A
- 262119
- 110E0A
- 020201
Tony
- D3C09F
- CAB89B
- C0B198
- B7AA95
- ADA391
- A49C8E
- 9B958B
- 928E87
- 898784
Harmonie kolorów
Komplementarna +180°
- DDC7A2
Oatmeal Bath
- B6CBEF
≈ Cuddle
Analogowa -30° +30°
- DDC7A2
Oatmeal Bath
- E9C1AA
≈ Copper Blush
- CBCEA5
≈ Crisp Celery
Triada +120° +240°
- DDC7A2
Oatmeal Bath
- A0D6D9
≈ Lake Reflection
- DBBFE1
≈ Sky Blue Pink
Komplementarna rozszczepiona +150° +210°
- DDC7A2
Oatmeal Bath
- A6D1E8
≈ Chefchaouen Blue
- C9C5EC
≈ Soap
Tetrada +90° +180° +270°
- DDC7A2
Oatmeal Bath
- A7D6C5
≈ Southern Belle
- B6CBEF
≈ Cuddle
- E7BCCF
≈ Pink Mist
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.64:1 · APCA Lc 29
Ag
AAANa czerni
WCAG 12.76:1 · APCA Lc 74
Najlepszy kolor tekstu: #000000
WCAG 12.76:1 (AAA) · APCA Lc 74
Contrast pairs
Fragmenty kodu
CSS
:root {
--oatmeal-bath: #ddc7a2;
--oatmeal-bath-rgb: 221 199 162;
--oatmeal-bath-oklch: oklch(0.839 0.055 80.6);
}
.element {
color: var(--oatmeal-bath);
background-color: hsl(38 46% 75%);
border-color: oklch(0.839 0.055 80.6);
}Tailwind CSS v4
@theme {
--color-oatmeal-bath: #ddc7a2;
--color-oatmeal-bath-50: #fdf4e4;
--color-oatmeal-bath-100: #f1e7d4;
--color-oatmeal-bath-200: #e0d3ba;
--color-oatmeal-bath-300: #c5b598;
--color-oatmeal-bath-400: #b09b7a;
--color-oatmeal-bath-500: #99835c;
--color-oatmeal-bath-600: #826f4e;
--color-oatmeal-bath-700: #68583e;
--color-oatmeal-bath-800: #4d402c;
--color-oatmeal-bath-900: #352c1e;
--color-oatmeal-bath-950: #21190e;
}SCSS
$oatmeal-bath: #ddc7a2;
$oatmeal-bath-rgb: 221, 199, 162;
$oatmeal-bath-light: mix(#fff, $oatmeal-bath, 20%);
$oatmeal-bath-dark: mix(#000, $oatmeal-bath, 20%);
.element {
color: $oatmeal-bath;
box-shadow: 0 0 0 2px rgba($oatmeal-bath, 0.35);
}