Nearest named color · #D3C4F7
#D3C4F7
Nearest named color: Innocent Snowdrop
#D3C4F7 (rgb(211 196 247), hsl(258 76% 87%), oklch(0.849 0.072 298.3)) is closest to the named color Innocent Snowdrop. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#D3C4F7
oklch(0.849 0.072 298.3)
Color conversions
- HEX
- #d3c4f7
- RGB
- rgb(211 196 247)
- HSL
- hsl(258 76% 87%)
- HWB
- hwb(258 77% 3%)
- OKLCH
- oklch(0.849 0.072 298.3)
- OKLab
- oklab(0.849 0.034 -0.063)
- CIE Lab
- lab(81.68 12.77 -23.31)
- LCH
- lch(81.68 26.58 298.7)
- CMYK
- cmyk(15% 21% 0% 3%)
Tints · Shades · Tones
Tints
- D7CAF8
- DCD0F9
- E0D6FA
- E4DCFB
- E9E1FC
- EDE7FC
- F2EDFD
- F6F3FE
- FAF9FE
Shades
- B7AAD7
- 9C91B7
- 827899
- 69617C
- 514A60
- 3A3545
- 24212C
- 100E15
- 020203
Tones
- CABDEB
- C2B6DE
- B9AFD2
- B1A8C6
- A8A2BA
- A09BAE
- 9894A3
- 908D97
- 88878B
Color harmonies
Complementary +180°
- D3C4F7
Innocent Snowdrop
- C9D59F
≈ Cucumber Ice
Analogous -30° +30°
- D3C4F7
Innocent Snowdrop
- BACDFE
≈ Ice Cold Stare
- E8BDE5
≈ Blackberry Yoghurt
Triadic +120° +240°
- D3C4F7
Innocent Snowdrop
- F2C39F
≈ Carving Party
- 9ADDCE
≈ Tropical Freeze
Split-complementary +150° +210°
- D3C4F7
Innocent Snowdrop
- E1CC98
≈ Abstract
- AEDBB4
≈ Celtic Spring
Tetradic +90° +180° +270°
- D3C4F7
Innocent Snowdrop
- F9BCB3
≈ Mixed Fruit
- C9D59F
≈ Cucumber Ice
- 95DBE6
≈ Cool Water Lake
Contrast & accessibility
Ag
FailOn white
WCAG 1.61:1 · APCA Lc 28
Ag
AAAOn black
WCAG 13.00:1 · APCA Lc 75
Best text color: #000000
WCAG 13.00:1 (AAA) · APCA Lc 75
Contrast pairs
Code snippets
CSS
:root {
--innocent-snowdrop: #d3c4f7;
--innocent-snowdrop-rgb: 211 196 247;
--innocent-snowdrop-oklch: oklch(0.849 0.072 298.3);
}
.element {
color: var(--innocent-snowdrop);
background-color: hsl(258 76% 87%);
border-color: oklch(0.849 0.072 298.3);
}Tailwind CSS v4
@theme {
--color-innocent-snowdrop: #d3c4f7;
--color-innocent-snowdrop-50: #f8f1ff;
--color-innocent-snowdrop-100: #ebe3fd;
--color-innocent-snowdrop-200: #d9ceef;
--color-innocent-snowdrop-300: #bdb0d7;
--color-innocent-snowdrop-400: #a396c4;
--color-innocent-snowdrop-500: #8c7cb0;
--color-innocent-snowdrop-600: #766994;
--color-innocent-snowdrop-700: #5f5477;
--color-innocent-snowdrop-800: #453d59;
--color-innocent-snowdrop-900: #2f2a3e;
--color-innocent-snowdrop-950: #1c1827;
}SCSS
$innocent-snowdrop: #d3c4f7;
$innocent-snowdrop-rgb: 211, 196, 247;
$innocent-snowdrop-light: mix(#fff, $innocent-snowdrop, 20%);
$innocent-snowdrop-dark: mix(#000, $innocent-snowdrop, 20%);
.element {
color: $innocent-snowdrop;
box-shadow: 0 0 0 2px rgba($innocent-snowdrop, 0.35);
}