Named color · #CFD3A2
Calming Effect
Calming Effect is #CFD3A2: rgb(207 211 162), hsl(65 36% 73%), oklch(0.851 0.065 111.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Calming Effect color name →
#CFD3A2
oklch(0.851 0.065 111.6)
Color conversions
- HEX
- #cfd3a2
- RGB
- rgb(207 211 162)
- HSL
- hsl(65 36% 73%)
- HWB
- hwb(65 64% 17%)
- OKLCH
- oklch(0.851 0.065 111.6)
- OKLab
- oklab(0.851 -0.024 0.061)
- CIE Lab
- lab(83.32 -7.35 23.9)
- LCH
- lch(83.32 25 107.1)
- CMYK
- cmyk(2% 0% 23% 17%)
Tints · Shades · Tones
Tints
- D4D7AB
- D8DCB5
- DDE0BE
- E2E5C7
- E7E9D1
- EBEDDA
- F0F2E3
- F5F6EC
- FAFBF6
Shades
- B4B78C
- 999C77
- 7F8263
- 67694F
- 4F513C
- 383A2A
- 232419
- 10100A
- 020201
Tones
- C7CA9F
- BFC29C
- B7B998
- AEB195
- A7A992
- 9FA08E
- 97988B
- 8F9087
- 888884
Color harmonies
Complementary +180°
- CFD3A2
Calming Effect
- CEC7F6
≈ Soap
Analogous -30° +30°
- CFD3A2
Calming Effect
- E4CB9E
≈ Prairie Land
- B7DAB2
≈ Bleached Spruce
Triadic +120° +240°
- CFD3A2
Calming Effect
- A3D7F2
≈ Soft Summer Rain
- F1BDD3
≈ Parrot Tulip
Split-complementary +150° +210°
- CFD3A2
Calming Effect
- B7CFFA
≈ Ice Cold Stare
- E3C1E8
≈ Prom Corsage
Tetradic +90° +180° +270°
- CFD3A2
Calming Effect
- 9BDCE0
≈ Exotic Escape
- CEC7F6
≈ Soap
- F6BEBB
≈ Rainbow
Contrast & accessibility
Ag
FailOn white
WCAG 1.55:1 · APCA Lc 26
Ag
AAAOn black
WCAG 13.49:1 · APCA Lc 78
Best text color: #000000
WCAG 13.49:1 (AAA) · APCA Lc 78
Contrast pairs
Code snippets
CSS
:root {
--calming-effect: #cfd3a2;
--calming-effect-rgb: 207 211 162;
--calming-effect-oklch: oklch(0.851 0.065 111.6);
}
.element {
color: var(--calming-effect);
background-color: hsl(65 36% 73%);
border-color: oklch(0.851 0.065 111.6);
}Tailwind CSS v4
@theme {
--color-calming-effect: #cfd3a2;
--color-calming-effect-50: #f5f8e3;
--color-calming-effect-100: #e7ebd2;
--color-calming-effect-200: #d4d8b8;
--color-calming-effect-300: #b7bc96;
--color-calming-effect-400: #9fa376;
--color-calming-effect-500: #878b57;
--color-calming-effect-600: #72754a;
--color-calming-effect-700: #5b5e3b;
--color-calming-effect-800: #44442a;
--color-calming-effect-900: #2f2f1c;
--color-calming-effect-950: #1b1c0c;
}SCSS
$calming-effect: #cfd3a2;
$calming-effect-rgb: 207, 211, 162;
$calming-effect-light: mix(#fff, $calming-effect, 20%);
$calming-effect-dark: mix(#000, $calming-effect, 20%);
.element {
color: $calming-effect;
box-shadow: 0 0 0 2px rgba($calming-effect, 0.35);
}