Aloe Vera
#678779
Muted greenish blue for softer, calmer panels
About Aloe Vera
Aloe Vera is quieter than it looks, there's real substance underneath, but it doesn't announce itself the way Baltic or Ambrosial Oceanside do. It's the color that sits in the background and actually earns that spot, muted enough to feel trustworthy without disappearing into the gray family. The saturation is pulled back just enough that it reads almost neutral until you pair it next to something else, then you see the blue-green undertone actually breathing.
Use it for secondary surfaces, inactive states, and subtle accents in health dashboards, fintech products, and information-dense interfaces where you need something that supports the layout without competing for attention. Card backgrounds, disabled buttons, supporting text accents, it pairs sharp with dark charcoal type and settles cleanly against white. This is the one you reach for when Atlas Cedar feels too present and you need something cooler but still grounded.
It'll shift slightly warmer on less color-accurate displays, which keeps it from reading cold. Test it early against your actual neutrals; the color works best when it's clearly secondary, not fighting for hierarchy.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.