Named color · #B67DAF
Cheddar Pink Mauve
Cheddar Pink Mauve is #B67DAF: rgb(182 125 175), hsl(307 28% 60%), oklch(0.664 0.097 331). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Cheddar Pink Mauve color name →
#B67DAF
oklch(0.664 0.097 331)
Color conversions
- HEX
- #b67daf
- RGB
- rgb(182 125 175)
- HSL
- hsl(307 28% 60%)
- HWB
- hwb(307 49% 29%)
- OKLCH
- oklch(0.664 0.097 331)
- OKLab
- oklab(0.664 0.085 -0.047)
- CIE Lab
- lab(59.62 28.75 -17.35)
- LCH
- lch(59.62 33.58 328.9)
- CMYK
- cmyk(0% 31% 4% 29%)
Tints · Shades · Tones
Tints
- BE8AB7
- C596BF
- CDA3C7
- D4B0CF
- DBBDD7
- E3CADF
- EAD7E7
- F1E4EF
- F8F2F7
Shades
- 9E6C98
- 865B81
- 6F4B6B
- 593B56
- 442C41
- 301E2E
- 1D111C
- 0C050B
- 020101
Tones
- B17EAA
- AC7EA6
- A67FA1
- A17F9C
- 9C7F98
- 968093
- 91808E
- 8B8089
- 868085
Color harmonies
Complementary +180°
- B67DAF
Cheddar Pink Mauve
- 64A574
≈ Aqua Forest
Analogous -30° +30°
- B67DAF
Cheddar Pink Mauve
- 9D85C6
≈ Petrified Purple
- C57990
≈ Watermelon Pink
Triadic +120° +240°
- B67DAF
Cheddar Pink Mauve
- AA9148
≈ Epidote Olvene Ore
- 3AA3B5
≈ Marine Tinge
Split-complementary +150° +210°
- B67DAF
Cheddar Pink Mauve
- 8A9D56
≈ Yanagizome Green
- 40A797
≈ Jewel Weed
Tetradic +90° +180° +270°
- B67DAF
Cheddar Pink Mauve
- BF8553
≈ Mulling Spice
- 64A574
≈ Aqua Forest
- 589BCA
≈ Canadian Tuxedo
Contrast & accessibility
Ag
FailOn white
WCAG 3.21:1 · APCA Lc 59
Ag
AAOn black
WCAG 6.54:1 · APCA Lc 43
Best text color: #000000
WCAG 6.54:1 (AA) · APCA Lc 43
Contrast pairs
Code snippets
CSS
:root {
--cheddar-pink-mauve: #b67daf;
--cheddar-pink-mauve-rgb: 182 125 175;
--cheddar-pink-mauve-oklch: oklch(0.664 0.097 331);
}
.element {
color: var(--cheddar-pink-mauve);
background-color: hsl(307 28% 60%);
border-color: oklch(0.664 0.097 331);
}Tailwind CSS v4
@theme {
--color-cheddar-pink-mauve: #b67daf;
--color-cheddar-pink-mauve-50: #ffebff;
--color-cheddar-pink-mauve-100: #fddcf6;
--color-cheddar-pink-mauve-200: #efc5e6;
--color-cheddar-pink-mauve-300: #d6a5cd;
--color-cheddar-pink-mauve-400: #c089b9;
--color-cheddar-pink-mauve-500: #ab6da4;
--color-cheddar-pink-mauve-600: #915d8a;
--color-cheddar-pink-mauve-700: #744a6f;
--color-cheddar-pink-mauve-800: #553653;
--color-cheddar-pink-mauve-900: #3b253a;
--color-cheddar-pink-mauve-950: #251324;
}SCSS
$cheddar-pink-mauve: #b67daf;
$cheddar-pink-mauve-rgb: 182, 125, 175;
$cheddar-pink-mauve-light: mix(#fff, $cheddar-pink-mauve, 20%);
$cheddar-pink-mauve-dark: mix(#000, $cheddar-pink-mauve, 20%);
.element {
color: $cheddar-pink-mauve;
box-shadow: 0 0 0 2px rgba($cheddar-pink-mauve, 0.35);
}