Nazwany kolor · #D8BFC8
Magnolia White
Magnolia White to #D8BFC8: rgb(216 191 200), hsl(338 24% 80%), oklch(0.828 0.031 354). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Magnolia White color name →
#D8BFC8
oklch(0.828 0.031 354)
Konwersje koloru
- HEX
- #d8bfc8
- RGB
- rgb(216 191 200)
- HSL
- hsl(338 24% 80%)
- HWB
- hwb(338 75% 15%)
- OKLCH
- oklch(0.828 0.031 354)
- OKLab
- oklab(0.828 0.031 -0.003)
- CIE Lab
- lab(79.69 10.28 -1.12)
- LCH
- lch(79.69 10.34 353.8)
- CMYK
- cmyk(0% 12% 7% 15%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- DCC5CD
- E0CCD3
- E4D2D8
- E8D8DE
- ECDFE3
- EFE5E9
- F3ECEE
- F7F2F4
- FBF8F9
Odcienie ciemniejsze
- BCA6AE
- A08D94
- 85757B
- 6B5E63
- 53484C
- 3B3336
- 251F21
- 110D0F
- 020202
Tony
- CFB9C1
- C6B2B9
- BDACB2
- B4A5AB
- AB9FA3
- A2999C
- 9A9295
- 918C8E
- 888687
Harmonie kolorów
Komplementarna +180°
- D8BFC8
Magnolia White
- B3CEC5
≈ Steamy Spring
Analogowa -30° +30°
- D8BFC8
Magnolia White
- D1C0D2
≈ Amethyst Light Violet
- DAC0BD
≈ Peony Blush
Triada +120° +240°
- D8BFC8
Magnolia White
- C6C9B3
≈ Nature Spirits
- B4CBD8
≈ Arctic Circle
Komplementarna rozszczepiona +150° +210°
- D8BFC8
Magnolia White
- BBCCBB
≈ Jade Tinge
- B1CDD0
≈ Dewpoint
Tetrada +90° +180° +270°
- D8BFC8
Magnolia White
- D0C6B1
≈ Velvet Beige
- B3CEC5
≈ Steamy Spring
- BDC7DB
≈ Angel in Blue Jeans
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.72:1 · APCA Lc 31
Ag
AAANa czerni
WCAG 12.20:1 · APCA Lc 72
Najlepszy kolor tekstu: #000000
WCAG 12.20:1 (AAA) · APCA Lc 72
Contrast pairs
Fragmenty kodu
CSS
:root {
--magnolia-white: #d8bfc8;
--magnolia-white-rgb: 216 191 200;
--magnolia-white-oklch: oklch(0.828 0.031 354);
}
.element {
color: var(--magnolia-white);
background-color: hsl(338 24% 80%);
border-color: oklch(0.828 0.031 354);
}Tailwind CSS v4
@theme {
--color-magnolia-white: #d8bfc8;
--color-magnolia-white-50: #fdf2f5;
--color-magnolia-white-100: #f1e4e8;
--color-magnolia-white-200: #e0cfd4;
--color-magnolia-white-300: #c5b1b8;
--color-magnolia-white-400: #ae97a0;
--color-magnolia-white-500: #977e87;
--color-magnolia-white-600: #806b73;
--color-magnolia-white-700: #67555c;
--color-magnolia-white-800: #4b3e43;
--color-magnolia-white-900: #342b2f;
--color-magnolia-white-950: #20181b;
}SCSS
$magnolia-white: #d8bfc8;
$magnolia-white-rgb: 216, 191, 200;
$magnolia-white-light: mix(#fff, $magnolia-white, 20%);
$magnolia-white-dark: mix(#000, $magnolia-white, 20%);
.element {
color: $magnolia-white;
box-shadow: 0 0 0 2px rgba($magnolia-white, 0.35);
}