Named color · #C1ABD4
Purple Gladiola
Purple Gladiola is #C1ABD4: rgb(193 171 212), hsl(272 32% 75%), oklch(0.774 0.062 309.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Purple Gladiola color name →
#C1ABD4
oklch(0.774 0.062 309.1)
Color conversions
- HEX
- #c1abd4
- RGB
- rgb(193 171 212)
- HSL
- hsl(272 32% 75%)
- HWB
- hwb(272 67% 17%)
- OKLCH
- oklch(0.774 0.062 309.1)
- OKLab
- oklab(0.774 0.039 -0.048)
- CIE Lab
- lab(72.93 13.95 -17.83)
- LCH
- lch(72.93 22.64 308)
- CMYK
- cmyk(9% 19% 0% 17%)
Tints · Shades · Tones
Tints
- C7B3D8
- CDBBDD
- D3C4E1
- D9CCE5
- E0D4EA
- E6DDEE
- ECE5F2
- F2EEF7
- F9F6FB
Shades
- A794B8
- 8F7E9D
- 776883
- 5F5469
- 494051
- 342D3A
- 201B24
- 0E0B10
- 020102
Tones
- BAA7CB
- B4A2C3
- AD9EBA
- A69AB2
- A095A9
- 9991A1
- 938D99
- 8D8990
- 868488
Color harmonies
Complementary +180°
- C1ABD4
Purple Gladiola
- A9BE94
≈ Japanese Horseradish
Analogous -30° +30°
- C1ABD4
Purple Gladiola
- ACB2DD
≈ Sassy Violet
- D1A6C2
≈ Enhance
Triadic +120° +240°
- C1ABD4
Purple Gladiola
- D0AF8B
≈ Cracker Bitz
- 87C3BD
≈ Undine
Split-complementary +150° +210°
- C1ABD4
Purple Gladiola
- BFB789
≈ Baby Bok Choy
- 94C2A7
≈ Spearmint Frosting
Tetradic +90° +180° +270°
- C1ABD4
Purple Gladiola
- D9A898
≈ Cottage Rose
- A9BE94
≈ Japanese Horseradish
- 88BFD1
≈ Aftercare
Contrast & accessibility
Ag
FailOn white
WCAG 2.09:1 · APCA Lc 41
Ag
AAAOn black
WCAG 10.04:1 · APCA Lc 61
Best text color: #000000
WCAG 10.04:1 (AAA) · APCA Lc 61
Contrast pairs
Code snippets
CSS
:root {
--purple-gladiola: #c1abd4;
--purple-gladiola-rgb: 193 171 212;
--purple-gladiola-oklch: oklch(0.774 0.062 309.1);
}
.element {
color: var(--purple-gladiola);
background-color: hsl(272 32% 75%);
border-color: oklch(0.774 0.062 309.1);
}Tailwind CSS v4
@theme {
--color-purple-gladiola: #c1abd4;
--color-purple-gladiola-50: #fbf0ff;
--color-purple-gladiola-100: #efe2f8;
--color-purple-gladiola-200: #ddcde8;
--color-purple-gladiola-300: #c2afcf;
--color-purple-gladiola-400: #a995bb;
--color-purple-gladiola-500: #927ba6;
--color-purple-gladiola-600: #7c688c;
--color-purple-gladiola-700: #635370;
--color-purple-gladiola-800: #483d53;
--color-purple-gladiola-900: #322a3a;
--color-purple-gladiola-950: #1e1724;
}SCSS
$purple-gladiola: #c1abd4;
$purple-gladiola-rgb: 193, 171, 212;
$purple-gladiola-light: mix(#fff, $purple-gladiola, 20%);
$purple-gladiola-dark: mix(#000, $purple-gladiola, 20%);
.element {
color: $purple-gladiola;
box-shadow: 0 0 0 2px rgba($purple-gladiola, 0.35);
}