RGB
rgb(204, 244, 184)
HSL
hsl(100, 74%, 84%)
Metrics
S 74% · L 84%
Contrast (WCAG)
on white
1.2:1Fail
on black
17.2:1AA
About this color
Moss Pearl Vivid (#CCF4B8) belongs to the green family — hue 100°, 74% saturation, 84% lightness. Copy the hex, RGB, or HSL value above, or paste the CSS custom property below into your stylesheet to reference this color directly.
CSS
:root { --colorarchive-moss-pearl-vivid: #CCF4B8; --colorarchive-moss-pearl-vivid-hsl: hsl(100, 74%, 84%); --colorarchive-moss-pearl-vivid-rgb: rgb(204, 244, 184); }
Palette moves
Instead of stopping at one swatch, use nearby, opposite, and tonal neighbors to branch into a broader palette.
Lighter companion
Moss Mist Vivid
#DFF8D3 · hsl(100, 74%, 90%)
Darker companion
Moss Bloom Vivid
#B3EF95 · hsl(100, 74%, 76%)
Complementary counterpoint
Mulberry Pearl Vivid
#E0B8F4 · hsl(280, 74%, 84%)
Analogous lead
Emerald Pearl Vivid
#B8F4B8 · hsl(120, 74%, 84%)
Analogous echo
Olive Pearl Vivid
#E0F4B8 · hsl(80, 74%, 84%)
Triadic +120°
Cobalt Pearl Vivid
#B8CCF4 · hsl(220, 74%, 84%)
Triadic +240°
Garnet Pearl Vivid
#F4B8CC · hsl(340, 74%, 84%)
Split-comp +150°
Violet Pearl Vivid
#C2B8F4 · hsl(250, 74%, 84%)
Split-comp +210°
Peony Pearl Vivid
#F4B8EA · hsl(310, 74%, 84%)
Export preview
Base: Moss Pearl Vivid #CCF4B8 Lighter companion: Moss Mist Vivid #DFF8D3 Darker companion: Moss Bloom Vivid #B3EF95 Complementary counterpoint: Mulberry Pearl Vivid #E0B8F4 Analogous lead: Emerald Pearl Vivid #B8F4B8 Analogous echo: Olive Pearl Vivid #E0F4B8 Triadic +120°: Cobalt Pearl Vivid #B8CCF4 Triadic +240°: Garnet Pearl Vivid #F4B8CC Split-comp +150°: Violet Pearl Vivid #C2B8F4 Split-comp +210°: Peony Pearl Vivid #F4B8EA
Nearest neighbors
The closest archive matches by hue, saturation, and lightness.
Nearby match
Moss Mist Vivid
#DFF8D3 · hsl(100, 74%, 90%)
Nearby match
Moss Bloom Vivid
#B3EF95 · hsl(100, 74%, 76%)
Nearby match
Moss Whisper Vivid
#ECFBE4 · hsl(100, 74%, 94%)
Nearby match
Moss Pearl Clear
#CFECC0 · hsl(100, 54%, 84%)
Nearby match
Moss Veil Vivid
#F9FEF6 · hsl(100, 74%, 98%)
Nearby match
Lime Pearl Vivid
#D6F4B8 · hsl(90, 74%, 84%)
Accessible pairings
Archive colors that meet WCAG contrast standards when paired with this color. Use as text-on-background or background-on-text.
Ready to build
Turn these colors into design tokens
ColorArchive packs include CSS variables, Figma tokens, Tailwind config, and Procreate swatches — ready to drop into any project.
