What HEX colors are in the Sage Echo Collection palette?

The Sage Echo Collection palette uses #2B77F0, #F4B300, #00CF99, #7DEA96. Its highest-contrast pair is 2.82:1.

Is the Sage Echo Collection palette accessible for text?

Use #2B77F0 on #F4B300 for the strongest contrast. Always check the WCAG ratio before setting body copy.

#2B77F0

#F4B300

#00CF99

#7DEA96

Sage Echo Collection

Sage Echo Collection is a cool soft contrast palette built with blue, orange, mint, green tones. Copy the HEX codes, download the palette image, save it to your collection, or open related palettes below.

0⬇ Image Link Copy

#2B77F0

Blue

#F4B300

Orange

#00CF99

Mint

#7DEA96

Green

MoodColor moodA palette built from its color balance.

ContrastSoft contrastHelps decide how to use text, buttons, and backgrounds.

Main tonesblue, orange, mintThe strongest color families in this palette.

Best fitDesign useUseful for web, brand, and social layouts.

Related Palettes

Spring Beach Wave Colorway

0 Link Copy⬇ Image

Spring Fresh Story Colorway

0 Link Copy⬇ Image

Spring Bloom Palette Colorway

0 Link Copy⬇ Image

Spring Rust Mood Colorway

0 Link Copy⬇ Image

Spring Olive Horizon Colorway

0 Link Copy⬇ Image

Spring Emerald Splash Colorway

0 Link Copy⬇ Image

Spring Ruby Dream Colorway

0 Link Copy⬇ Image

Spring Frost Vista Colorway

0 Link Copy⬇ Image

Spring Maple Glow Colorway

0 Link Copy⬇ Image

Spring Autumn Journal Colorway

0 Link Copy⬇ Image

Spring Winter Whisper Colorway

0 Link Copy⬇ Image

Spring Spring Waltz Colorway

0 Link Copy⬇ Image

Use this palette for

Sage Echo UI accents Blue layout colors Orange design set Cool outfit colors Spring palettes Bright Spring colors

Pairing tips

Background

Use #7DEA96 for soft sections, cards, or open space.

Text and headings

Use #F4B300 or a deeper nearby shade for readable type.

Accent color

Use #00CF99 for buttons, labels, icons, or small highlights.

CSS variables

:root {
  --palette-color-1: #2B77F0;
  --palette-color-2: #F4B300;
  --palette-color-3: #00CF99;
  --palette-color-4: #7DEA96;
}

Sage Echo Collection colour names and contrast

Every value on this page is calculated from this palette's own HEX codes. The closest CSS named colour tells you what to call each shade, relative luminance shows how light or dark it truly is, and the contrast table shows which pairs are safe to set text in.

Swatch reference

Swatch	Closest named colour	Match	Luminance	Hue
#2B77F0	Royal Blue	49 RGB pts	0.200	217°
#F4B300	Amber	29 RGB pts	0.515	44°
#00CF99	Light Sea Green	79 RGB pts	0.469	164°
#7DEA96	Light Green	30 RGB pts	0.654	134°

Contrast ratios (WCAG 2.1)

Colour pair	Ratio	Body text	Large text
#2B77F0 on #7DEA96	2.82:1	fail	fail
#2B77F0 on #F4B300	2.26:1	fail	fail
#2B77F0 on #00CF99	2.08:1	fail	fail
#00CF99 on #7DEA96	1.36:1	fail	fail
#F4B300 on #7DEA96	1.25:1	fail	fail
#F4B300 on #00CF99	1.09:1	fail	fail

What this means in practice

Highest contrast: #2B77F0 against #7DEA96 at 2.82:1 — the safest pair here for body copy.
Lowest contrast: #F4B300 against #00CF99 at 1.09:1 — decorative use only, it does not meet WCAG AA for text.
Darkest colour: #2B77F0 (Royal Blue, luminance 0.200) — the natural choice for headings.
Lightest colour: #7DEA96 (Light Green, luminance 0.654) — best used for backgrounds.
Hue spread: 173° across 4 of 4 colours, which makes this a broad multicolour palette.
Text recommendation: set type in #2B77F0 on a #7DEA96 background, and reserve #F4B300 for borders, icons or accents.

FAQ

What type of palette is Sage Echo Collection?

It is a cool soft contrast color palette with blue, orange, mint, green tones.

Can this palette work for websites?

Yes. Use the lightest color for backgrounds, deeper colors for text, and mid tones for buttons or accents. Check the contrast table above before setting body copy.

Can I copy the HEX colors?

Yes. Use the copy buttons for the full palette or for a single color row.