Nearest named color · #CFD2AC
#CFD2AC
Nearest named color: Bitter Melon
#CFD2AC (rgb(207 210 172), hsl(65 30% 75%), oklch(0.852 0.051 111.1)) is closest to the named color Bitter Melon. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#CFD2AC
oklch(0.852 0.051 111.1)
Color conversions
- HEX
- #cfd2ac
- RGB
- rgb(207 210 172)
- HSL
- hsl(65 30% 75%)
- HWB
- hwb(65 67% 18%)
- OKLCH
- oklch(0.852 0.051 111.1)
- OKLab
- oklab(0.852 -0.018 0.048)
- CIE Lab
- lab(83.22 -5.79 18.57)
- LCH
- lch(83.22 19.45 107.3)
- CMYK
- cmyk(1% 0% 18% 18%)
Tints · Shades · Tones
Tints
- D4D6B4
- D8DBBC
- DDDFC5
- E2E4CD
- E7E8D5
- EBEDDE
- F0F1E6
- F5F6EE
- FAFAF7
Shades
- B4B695
- 999B7F
- 7F8169
- 676854
- 4F5040
- 38392D
- 23241B
- 10100B
- 020201
Tones
- C7CAA8
- BFC1A3
- B7B99F
- AFB09B
- A7A896
- 9FA092
- 97988D
- 8F9089
- 888884
Color harmonies
Complementary +180°
- CFD2AC
Bitter Melon
- CEC9EE
≈ Soap
Analogous -30° +30°
- CFD2AC
Bitter Melon
- E0CCA9
≈ Hearth
- BDD7B8
≈ Lamina
Triadic +120° +240°
- CFD2AC
Bitter Melon
- ADD5EA
≈ Ariel
- EAC1D2
≈ Misty Memories
Split-complementary +150° +210°
- CFD2AC
Bitter Melon
- BCCFF0
≈ Frost Fairy
- DEC4E3
≈ Glittering Gemstone
Tetradic +90° +180° +270°
- CFD2AC
Bitter Melon
- A8D9DC
≈ Crystal
- CEC9EE
≈ Soap
- EEC2C0
≈ Cafe Pink
Contrast & accessibility
Ag
FailOn white
WCAG 1.55:1 · APCA Lc 26
Ag
AAAOn black
WCAG 13.46:1 · APCA Lc 77
Best text color: #000000
WCAG 13.46:1 (AAA) · APCA Lc 77
Contrast pairs
Code snippets
CSS
:root {
--bitter-melon: #cfd2ac;
--bitter-melon-rgb: 207 210 172;
--bitter-melon-oklch: oklch(0.852 0.051 111.1);
}
.element {
color: var(--bitter-melon);
background-color: hsl(65 30% 75%);
border-color: oklch(0.852 0.051 111.1);
}Tailwind CSS v4
@theme {
--color-bitter-melon: #cfd2ac;
--color-bitter-melon-50: #f5f7e7;
--color-bitter-melon-100: #e7ead7;
--color-bitter-melon-200: #d4d7be;
--color-bitter-melon-300: #b7bb9d;
--color-bitter-melon-400: #9fa27f;
--color-bitter-melon-500: #878a62;
--color-bitter-melon-600: #727554;
--color-bitter-melon-700: #5b5d43;
--color-bitter-melon-800: #43442f;
--color-bitter-melon-900: #2f2f20;
--color-bitter-melon-950: #1b1b10;
}SCSS
$bitter-melon: #cfd2ac;
$bitter-melon-rgb: 207, 210, 172;
$bitter-melon-light: mix(#fff, $bitter-melon, 20%);
$bitter-melon-dark: mix(#000, $bitter-melon, 20%);
.element {
color: $bitter-melon;
box-shadow: 0 0 0 2px rgba($bitter-melon, 0.35);
}