Named color · #CCBBFF
Lavender Tonic
Lavender Tonic is #CCBBFF: rgb(204 187 255), hsl(255 100% 87%), oklch(0.83 0.096 295.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Lavender Tonic color name →
#CCBBFF
oklch(0.83 0.096 295.7)
Color conversions
- HEX
- #ccbbff
- RGB
- rgb(204 187 255)
- HSL
- hsl(255 100% 87%)
- HWB
- hwb(255 73% 0%)
- OKLCH
- oklch(0.83 0.096 295.7)
- OKLab
- oklab(0.83 0.041 -0.086)
- CIE Lab
- lab(79.11 16.37 -31.52)
- LCH
- lch(79.11 35.52 297.4)
- CMYK
- cmyk(20% 27% 0% 0%)
Tints · Shades · Tones
Tints
- D1C2FF
- D6C9FF
- DBD0FF
- E0D6FF
- E5DDFF
- EAE4FF
- EFEBFF
- F4F1FF
- FAF8FF
Shades
- B1A2DE
- 978ABE
- 7E739E
- 655C80
- 4E4663
- 373248
- 221F2E
- 0F0D16
- 020203
Tones
- C4B5F2
- BCAFE5
- B4A9D8
- ADA3CB
- A59DBE
- 9D98B2
- 9692A5
- 8F8C99
- 87868C
Color harmonies
Complementary +180°
- CCBBFF
Lavender Tonic
- C4CF87
≈ Soft Celery
Analogous -30° +30°
- CCBBFF
Lavender Tonic
- ADC7FF
≈ Night Snow
- E8B2E9
≈ Land of Dreams
Triadic +120° +240°
- CCBBFF
Lavender Tonic
- F8B78A
≈ Beach Sand
- 7FDCC4
≈ Tender Turquoise
Split-complementary +150° +210°
- CCBBFF
Lavender Tonic
- E3C37D
≈ Table Pear Yellow
- 9FD8A2
≈ Green Trance
Tetradic +90° +180° +270°
- CCBBFF
Lavender Tonic
- FFB0A8
≈ Cornflower Lilac
- C4CF87
≈ Soft Celery
- 75D9E5
≈ Aquamarine Blue
Contrast & accessibility
Ag
FailOn white
WCAG 1.73:1 · APCA Lc 31
Ag
AAAOn black
WCAG 12.11:1 · APCA Lc 71
Best text color: #000000
WCAG 12.11:1 (AAA) · APCA Lc 71
Contrast pairs
Code snippets
CSS
:root {
--lavender-tonic: #ccbbff;
--lavender-tonic-rgb: 204 187 255;
--lavender-tonic-oklch: oklch(0.83 0.096 295.7);
}
.element {
color: var(--lavender-tonic);
background-color: hsl(255 100% 87%);
border-color: oklch(0.83 0.096 295.7);
}Tailwind CSS v4
@theme {
--color-lavender-tonic: #ccbbff;
--color-lavender-tonic-50: #f8f0ff;
--color-lavender-tonic-100: #ebe2ff;
--color-lavender-tonic-200: #d8ccf9;
--color-lavender-tonic-300: #bdade3;
--color-lavender-tonic-400: #a393d1;
--color-lavender-tonic-500: #8c79be;
--color-lavender-tonic-600: #7666a1;
--color-lavender-tonic-700: #5e5281;
--color-lavender-tonic-800: #443c60;
--color-lavender-tonic-900: #2f2944;
--color-lavender-tonic-950: #1c172c;
}SCSS
$lavender-tonic: #ccbbff;
$lavender-tonic-rgb: 204, 187, 255;
$lavender-tonic-light: mix(#fff, $lavender-tonic, 20%);
$lavender-tonic-dark: mix(#000, $lavender-tonic, 20%);
.element {
color: $lavender-tonic;
box-shadow: 0 0 0 2px rgba($lavender-tonic, 0.35);
}