Named color · #B9B1C8
Violet Bouquet
Violet Bouquet is #B9B1C8: rgb(185 177 200), hsl(261 17% 74%), oklch(0.774 0.033 301.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Violet Bouquet color name →
#B9B1C8
oklch(0.774 0.033 301.4)
Color conversions
- HEX
- #b9b1c8
- RGB
- rgb(185 177 200)
- HSL
- hsl(261 17% 74%)
- HWB
- hwb(261 69% 22%)
- OKLCH
- oklch(0.774 0.033 301.4)
- OKLab
- oklab(0.774 0.017 -0.029)
- CIE Lab
- lab(73.42 6.22 -10.65)
- LCH
- lch(73.42 12.34 300.3)
- CMYK
- cmyk(8% 12% 0% 22%)
Tints · Shades · Tones
Tints
- C0B9CD
- C7C0D3
- CEC8D8
- D4D0DE
- DBD7E3
- E2DFE9
- EAE7EE
- F1EFF4
- F8F7F9
Shades
- A099AE
- 898394
- 716C7B
- 5B5763
- 46424C
- 312F36
- 1E1C21
- 0D0C0F
- 020102
Tones
- B3ACC1
- ADA7B9
- A7A2B2
- A29DAB
- 9C98A3
- 96939C
- 918E95
- 8B8A8E
- 868587
Color harmonies
Complementary +180°
- B9B1C8
Violet Bouquet
- B2B9A2
≈ Matt Sage
Analogous -30° +30°
- B9B1C8
Violet Bouquet
- AEB5CC
≈ Spacious Sky
- C3AEBF
≈ Lavish Lavender
Triadic +120° +240°
- B9B1C8
Violet Bouquet
- C6B1A0
≈ Cracked Earth
- 9FBDB7
≈ Nursery Wall
Split-complementary +150° +210°
- B9B1C8
Violet Bouquet
- BDB59E
≈ Polished Stone
- A7BCAB
≈ Rockfall
Tetradic +90° +180° +270°
- B9B1C8
Violet Bouquet
- CAAEA9
≈ Lacey
- B2B9A2
≈ Matt Sage
- 9EBCC2
≈ French Moire
Contrast & accessibility
Ag
FailOn white
WCAG 2.06:1 · APCA Lc 40
Ag
AAAOn black
WCAG 10.18:1 · APCA Lc 62
Best text color: #000000
WCAG 10.18:1 (AAA) · APCA Lc 62
Contrast pairs
Code snippets
CSS
:root {
--violet-bouquet: #b9b1c8;
--violet-bouquet-rgb: 185 177 200;
--violet-bouquet-oklch: oklch(0.774 0.033 301.4);
}
.element {
color: var(--violet-bouquet);
background-color: hsl(261 17% 74%);
border-color: oklch(0.774 0.033 301.4);
}Tailwind CSS v4
@theme {
--color-violet-bouquet: #b9b1c8;
--color-violet-bouquet-50: #f7f3fd;
--color-violet-bouquet-100: #eae5f1;
--color-violet-bouquet-200: #d7d1e0;
--color-violet-bouquet-300: #bbb4c6;
--color-violet-bouquet-400: #a29aaf;
--color-violet-bouquet-500: #8a8199;
--color-violet-bouquet-600: #756e82;
--color-violet-bouquet-700: #5d5868;
--color-violet-bouquet-800: #44404d;
--color-violet-bouquet-900: #2f2c35;
--color-violet-bouquet-950: #1b1920;
}SCSS
$violet-bouquet: #b9b1c8;
$violet-bouquet-rgb: 185, 177, 200;
$violet-bouquet-light: mix(#fff, $violet-bouquet, 20%);
$violet-bouquet-dark: mix(#000, $violet-bouquet, 20%);
.element {
color: $violet-bouquet;
box-shadow: 0 0 0 2px rgba($violet-bouquet, 0.35);
}