Aloe Vera

#678779

Muted greenish blue for softer, calmer panels

Save
Share

About Aloe Vera

Aloe Vera is quieter than it looks, there's real substance underneath, but it doesn't announce itself the way or 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 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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
3.95:1FailAA Large

On Gray 100 #f5f5f5

Aa
3.62:1FailAA Large

On Gray 900 #18181b

Aa
4.49:1FailAA Large

On Black #000000

Aa
5.32:1AAAAA Large

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

#74857f
#677f70
#747f71
#76856a
#648589

Create a gradient with Aloe Vera

Open the generator with this color pre-loaded.

Start creating