Named color · #BAB6A0
French Shutter
French Shutter is #BAB6A0: rgb(186 182 160), hsl(51 16% 68%), oklch(0.774 0.031 98.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · French Shutter color name →
#BAB6A0
oklch(0.774 0.031 98.6)
Color conversions
- HEX
- #bab6a0
- RGB
- rgb(186 182 160)
- HSL
- hsl(51 16% 68%)
- HWB
- hwb(51 63% 27%)
- OKLCH
- oklch(0.774 0.031 98.6)
- OKLab
- oklab(0.774 -0.005 0.03)
- CIE Lab
- lab(73.93 -1.35 11.78)
- LCH
- lch(73.93 11.86 96.6)
- CMYK
- cmyk(0% 2% 14% 27%)
Tints · Shades · Tones
Tints
- C1BDA9
- C7C4B2
- CECBBC
- D5D3C5
- DCDACF
- E3E1D8
- EAE9E2
- F1F0EB
- F8F8F5
Shades
- A19E8B
- 898676
- 726F61
- 5C594E
- 46443B
- 323029
- 1E1D19
- 0D0C09
- 020201
Tones
- B4B09D
- AEAB9A
- A8A596
- A2A093
- 9C9B90
- 97958D
- 91908A
- 8B8B86
- 868583
Color harmonies
Complementary +180°
- BAB6A0
French Shutter
- B0B4C9
≈ Soul Sister
Analogous -30° +30°
- BAB6A0
French Shutter
- C3B2A1
≈ Studio Beige
- AFB9A5
≈ Matt Sage
Triadic +120° +240°
- BAB6A0
French Shutter
- A0BBC3
≈ French Moire
- C3AEBC
≈ Mischief
Split-complementary +150° +210°
- BAB6A0
French Shutter
- A7B8C9
≈ Blue Tribute
- BBB0C5
≈ Violet Bouquet
Tetradic +90° +180° +270°
- BAB6A0
French Shutter
- A0BCB9
≈ Festoon Aqua
- B0B4C9
≈ Soul Sister
- C8AEB1
≈ Burnished Lilac
Contrast & accessibility
Ag
FailOn white
WCAG 2.04:1 · APCA Lc 40
Ag
AAAOn black
WCAG 10.28:1 · APCA Lc 63
Best text color: #000000
WCAG 10.28:1 (AAA) · APCA Lc 63
Contrast pairs
Code snippets
CSS
:root {
--french-shutter: #bab6a0;
--french-shutter-rgb: 186 182 160;
--french-shutter-oklch: oklch(0.774 0.031 98.6);
}
.element {
color: var(--french-shutter);
background-color: hsl(51 16% 68%);
border-color: oklch(0.774 0.031 98.6);
}Tailwind CSS v4
@theme {
--color-french-shutter: #bab6a0;
--color-french-shutter-50: #f7f6ec;
--color-french-shutter-100: #eae8dd;
--color-french-shutter-200: #d7d5c6;
--color-french-shutter-300: #bbb8a6;
--color-french-shutter-400: #a39f8b;
--color-french-shutter-500: #8b8770;
--color-french-shutter-600: #76725f;
--color-french-shutter-700: #5e5b4c;
--color-french-shutter-800: #454337;
--color-french-shutter-900: #302e25;
--color-french-shutter-950: #1c1b14;
}SCSS
$french-shutter: #bab6a0;
$french-shutter-rgb: 186, 182, 160;
$french-shutter-light: mix(#fff, $french-shutter, 20%);
$french-shutter-dark: mix(#000, $french-shutter, 20%);
.element {
color: $french-shutter;
box-shadow: 0 0 0 2px rgba($french-shutter, 0.35);
}