Nazwany kolor · #D8D4D3
Mandarin Tusk
Mandarin Tusk to #D8D4D3: rgb(216 212 211), hsl(12 6% 84%), oklch(0.873 0.005 34.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Mandarin Tusk color name →
#D8D4D3
oklch(0.873 0.005 34.3)
Konwersje koloru
- HEX
- #d8d4d3
- RGB
- rgb(216 212 211)
- HSL
- hsl(12 6% 84%)
- HWB
- hwb(12 83% 15%)
- OKLCH
- oklch(0.873 0.005 34.3)
- OKLab
- oklab(0.873 0.004 0.003)
- CIE Lab
- lab(85.21 1.29 1.01)
- LCH
- lch(85.21 1.63 38.1)
- CMYK
- cmyk(0% 2% 2% 15%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- DCD8D7
- E0DCDC
- E4E1E0
- E7E5E4
- EBE9E9
- EFEEED
- F3F2F2
- F7F6F6
- FBFBFB
Odcienie ciemniejsze
- BCB8B7
- A09D9C
- 858382
- 6B6969
- 535151
- 3B3A3A
- 252424
- 111010
- 020202
Tony
- CFCBCA
- C6C3C2
- BDBAB9
- B4B1B1
- ABA9A9
- A2A1A0
- 9A9898
- 919090
- 888888
Harmonie kolorów
Komplementarna +180°
- D8D4D3
Mandarin Tusk
- D2D6D7
≈ Twilight Grey
Analogowa -30° +30°
- D8D4D3
Mandarin Tusk
- D8D4D5
≈ Mandarin Tusk
- D7D4D2
≈ Mandarin Tusk
Triada +120° +240°
- D8D4D3
Mandarin Tusk
- D3D6D4
≈ Reflection
- D4D5D8
≈ Mirror Ball
Komplementarna rozszczepiona +150° +210°
- D8D4D3
Mandarin Tusk
- D2D6D5
≈ Twilight Grey
- D3D5D8
≈ Sparkling Frost
Tetrada +90° +180° +270°
- D8D4D3
Mandarin Tusk
- D4D6D2
≈ Modern Monument
- D2D6D7
≈ Twilight Grey
- D6D4D8
≈ Mirror Ball
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.47:1 · APCA Lc 22
Ag
AAANa czerni
WCAG 14.27:1 · APCA Lc 81
Najlepszy kolor tekstu: #000000
WCAG 14.27:1 (AAA) · APCA Lc 81
Contrast pairs
Fragmenty kodu
CSS
:root {
--mandarin-tusk: #d8d4d3;
--mandarin-tusk-rgb: 216 212 211;
--mandarin-tusk-oklch: oklch(0.873 0.005 34.3);
}
.element {
color: var(--mandarin-tusk);
background-color: hsl(12 6% 84%);
border-color: oklch(0.873 0.005 34.3);
}Tailwind CSS v4
@theme {
--color-mandarin-tusk: #d8d4d3;
--color-mandarin-tusk-50: #f6f5f4;
--color-mandarin-tusk-100: #e9e7e7;
--color-mandarin-tusk-200: #d6d3d3;
--color-mandarin-tusk-300: #bab6b6;
--color-mandarin-tusk-400: #a19d9c;
--color-mandarin-tusk-500: #898584;
--color-mandarin-tusk-600: #747170;
--color-mandarin-tusk-700: #5d5a59;
--color-mandarin-tusk-800: #444241;
--color-mandarin-tusk-900: #2f2d2d;
--color-mandarin-tusk-950: #1b1a1a;
}SCSS
$mandarin-tusk: #d8d4d3;
$mandarin-tusk-rgb: 216, 212, 211;
$mandarin-tusk-light: mix(#fff, $mandarin-tusk, 20%);
$mandarin-tusk-dark: mix(#000, $mandarin-tusk, 20%);
.element {
color: $mandarin-tusk;
box-shadow: 0 0 0 2px rgba($mandarin-tusk, 0.35);
}