Benannte Farbe · #D2C7B7
Accessible Beige
Accessible Beige ist #D2C7B7: rgb(210 199 183), hsl(36 23% 77%), oklch(0.834 0.025 77.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Accessible Beige color name →
#D2C7B7
oklch(0.834 0.025 77.4)
Farbumrechnungen
- HEX
- #d2c7b7
- RGB
- rgb(210 199 183)
- HSL
- hsl(36 23% 77%)
- HWB
- hwb(36 72% 18%)
- OKLCH
- oklch(0.834 0.025 77.4)
- OKLab
- oklab(0.834 0.005 0.024)
- CIE Lab
- lab(80.82 1.97 9.49)
- LCH
- lch(80.82 9.69 78.3)
- CMYK
- cmyk(0% 5% 13% 18%)
Tints · Shades · Tones
Tints
- D6CCBE
- DBD2C5
- DFD8CC
- E4DDD3
- E8E3DB
- EDE8E2
- F1EEE9
- F6F4F0
- FAF9F8
Shades
- B6AD9F
- 9B9387
- 817A70
- 68625A
- 504C45
- 393631
- 24211E
- 100E0C
- 020202
Tones
- C9C0B1
- C1B8AC
- B9B1A6
- B0AAA1
- A8A39B
- A09C96
- 989590
- 908E8B
- 888785
Farbharmonien
Komplementär +180°
- D2C7B7
Accessible Beige
- BFCAD9
≈ Icy Brook
Analog -30° +30°
- D2C7B7
Accessible Beige
- D7C4BB
≈ New Wool
- CACAB8
≈ Tropical Fog
Triadisch +120° +240°
- D2C7B7
Accessible Beige
- B7CECE
≈ Turquoise Grey
- D0C4D4
≈ Mecha Kitty
Geteilt komplementär +150° +210°
- D2C7B7
Accessible Beige
- B9CCD6
≈ Light Sea Breeze
- C7C7D9
≈ Pax
Tetradisch +90° +180° +270°
- D2C7B7
Accessible Beige
- BACEC5
≈ Quiet Drizzle
- BFCAD9
≈ Icy Brook
- D6C2CC
≈ Mint Blossom Rose
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.66:1 · APCA Lc 29
Ag
AAAAuf Schwarz
WCAG 12.59:1 · APCA Lc 73
Beste Textfarbe: #000000
WCAG 12.59:1 (AAA) · APCA Lc 73
Contrast pairs
Code-Snippets
CSS
:root {
--accessible-beige: #d2c7b7;
--accessible-beige-rgb: 210 199 183;
--accessible-beige-oklch: oklch(0.834 0.025 77.4);
}
.element {
color: var(--accessible-beige);
background-color: hsl(36 23% 77%);
border-color: oklch(0.834 0.025 77.4);
}Tailwind CSS v4
@theme {
--color-accessible-beige: #d2c7b7;
--color-accessible-beige-50: #f9f4ed;
--color-accessible-beige-100: #ece7df;
--color-accessible-beige-200: #dad3c9;
--color-accessible-beige-300: #beb6a9;
--color-accessible-beige-400: #a79d8e;
--color-accessible-beige-500: #908474;
--color-accessible-beige-600: #7a7062;
--color-accessible-beige-700: #615a4e;
--color-accessible-beige-800: #484139;
--color-accessible-beige-900: #322d27;
--color-accessible-beige-950: #1e1a15;
}SCSS
$accessible-beige: #d2c7b7;
$accessible-beige-rgb: 210, 199, 183;
$accessible-beige-light: mix(#fff, $accessible-beige, 20%);
$accessible-beige-dark: mix(#000, $accessible-beige, 20%);
.element {
color: $accessible-beige;
box-shadow: 0 0 0 2px rgba($accessible-beige, 0.35);
}