Named color · #DFCAE4
Syrian Violet
Syrian Violet is #DFCAE4: rgb(223 202 228), hsl(288 33% 84%), oklch(0.864 0.042 319.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Syrian Violet color name →
#DFCAE4
oklch(0.864 0.042 319.7)
Color conversions
- HEX
- #dfcae4
- RGB
- rgb(223 202 228)
- HSL
- hsl(288 33% 84%)
- HWB
- hwb(288 79% 11%)
- OKLCH
- oklch(0.864 0.042 319.7)
- OKLab
- oklab(0.864 0.032 -0.027)
- CIE Lab
- lab(83.68 11.02 -10.12)
- LCH
- lch(83.68 14.96 317.4)
- CMYK
- cmyk(2% 11% 0% 11%)
Tints · Shades · Tones
Tints
- E2CFE7
- E5D4E9
- E9DAEC
- ECDFEF
- EFE4F2
- F2EAF4
- F5EFF7
- F9F4FA
- FCFAFC
Shades
- C2AFC6
- A595A9
- 8A7C8D
- 6F6472
- 564D58
- 3D373F
- 272228
- 120F12
- 020203
Tones
- D5C2DA
- CBBBCF
- C2B3C5
- B8ACBB
- AEA4B1
- A59DA7
- 9C969D
- 928E93
- 89878A
Color harmonies
Complementary +180°
- DFCAE4
Syrian Violet
- C4DAC0
≈ Quintessential
Analogous -30° +30°
- DFCAE4
Syrian Violet
- D1CEED
≈ Miami White
- E9C8D6
≈ Cradle Pink
Triadic +120° +240°
- DFCAE4
Syrian Violet
- E1D0B4
≈ Lovely Bluff
- B3DBDD
≈ Light Watermark
Split-complementary +150° +210°
- DFCAE4
Syrian Violet
- D4D5B6
≈ Orinoco
- B8DCCE
≈ Mirador
Tetradic +90° +180° +270°
- DFCAE4
Syrian Violet
- EACBBA
≈ Scotchtone
- C4DAC0
≈ Quintessential
- B7D8E9
≈ Watercolour Sky
Contrast & accessibility
Ag
FailOn white
WCAG 1.53:1 · APCA Lc 25
Ag
AAAOn black
WCAG 13.70:1 · APCA Lc 78
Best text color: #000000
WCAG 13.70:1 (AAA) · APCA Lc 78
Contrast pairs
Code snippets
CSS
:root {
--syrian-violet: #dfcae4;
--syrian-violet-rgb: 223 202 228;
--syrian-violet-oklch: oklch(0.864 0.042 319.7);
}
.element {
color: var(--syrian-violet);
background-color: hsl(288 33% 84%);
border-color: oklch(0.864 0.042 319.7);
}Tailwind CSS v4
@theme {
--color-syrian-violet: #dfcae4;
--color-syrian-violet-50: #fbf1fc;
--color-syrian-violet-100: #efe4f0;
--color-syrian-violet-200: #ddcfdf;
--color-syrian-violet-300: #c2b1c5;
--color-syrian-violet-400: #aa97ae;
--color-syrian-violet-500: #937e98;
--color-syrian-violet-600: #7c6a80;
--color-syrian-violet-700: #635567;
--color-syrian-violet-800: #493e4c;
--color-syrian-violet-900: #322b35;
--color-syrian-violet-950: #1e1820;
}SCSS
$syrian-violet: #dfcae4;
$syrian-violet-rgb: 223, 202, 228;
$syrian-violet-light: mix(#fff, $syrian-violet, 20%);
$syrian-violet-dark: mix(#000, $syrian-violet, 20%);
.element {
color: $syrian-violet;
box-shadow: 0 0 0 2px rgba($syrian-violet, 0.35);
}