What HEX colors are in the Sugar Petal Set palette?

The Sugar Petal Set palette uses #F39BA7, #F0F2B0, #AAEEB8, #2D6280. Its highest-contrast pair is 5.69:1.

Is the Sugar Petal Set palette accessible for text?

Use #F39BA7 on #F0F2B0 for the strongest contrast. Always check the WCAG ratio before setting body copy.

#F39BA7

#F0F2B0

#AAEEB8

#2D6280

Sugar Petal Set

Sugar Petal Set is a balanced warm and cool balanced contrast palette built with red, yellow, green, blue tones. Copy the HEX codes, download the palette image, save it to your collection, or open related palettes below.

0⬇ Image Link Copy

#F39BA7

Red

#F0F2B0

Yellow

#AAEEB8

Green

#2D6280

Blue

MoodSoft moodGentle colors made for calm and friendly layouts.

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

Main tonesred, yellow, greenThe strongest color families in this palette.

Best fitSoft brandsWellness, skincare, stationery, and calm UI.

Related Palettes

0 Link Copy⬇ Image

0 Link Copy⬇ Image

0 Link Copy⬇ Image

Cobalt Vista Fountain

0 Link Copy⬇ Image

1 Link Copy⬇ Image

0 Link Copy⬇ Image

0 Link Copy⬇ Image

0 Link Copy⬇ Image

1 Link Copy⬇ Image

0 Link Copy⬇ Image

Bluebell Mood Horizon

0 Link Copy⬇ Image

0 Link Copy⬇ Image

Use this palette for

Sugar Petal wellness page Red candy packaging Yellow baby shower card Balanced warm and cool gentle app UI Pastel palettes Warm Sugar Petal accents

Pairing tips

Background

Use #2D6280 for soft sections, cards, or open space.

Text and headings

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

Accent color

Use #AAEEB8 for buttons, labels, icons, or small highlights.

CSS variables

:root {
  --palette-color-1: #F39BA7;
  --palette-color-2: #F0F2B0;
  --palette-color-3: #AAEEB8;
  --palette-color-4: #2D6280;
}

Sugar Petal Set 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
#F39BA7	Light Pink	72 RGB pts	0.453	352°
#F0F2B0	Pale Golden Rod	23 RGB pts	0.852	62°
#AAEEB8	Pale Green	66 RGB pts	0.732	132°
#2D6280	Slate	64 RGB pts	0.109	202°

Contrast ratios (WCAG 2.1)

Colour pair	Ratio	Body text	Large text
#F0F2B0 on #2D6280	5.69:1	AA	AAA
#AAEEB8 on #2D6280	4.93:1	AA	AAA
#F39BA7 on #2D6280	3.17:1	fail	AA
#F39BA7 on #F0F2B0	1.79:1	fail	fail
#F39BA7 on #AAEEB8	1.55:1	fail	fail
#F0F2B0 on #AAEEB8	1.15:1	fail	fail

What this means in practice

Highest contrast: #F0F2B0 against #2D6280 at 5.69:1 — the safest pair here for body copy.
Lowest contrast: #F0F2B0 against #AAEEB8 at 1.15:1 — decorative use only, it does not meet WCAG AA for text.
Darkest colour: #2D6280 (Slate, luminance 0.109) — the natural choice for headings.
Lightest colour: #F0F2B0 (Pale Golden Rod, luminance 0.852) — best used for backgrounds.
Hue spread: 210° across 4 of 4 colours, which makes this a broad multicolour palette.
Text recommendation: set type in #F0F2B0 on a #2D6280 background, and reserve #F0F2B0 for borders, icons or accents.

FAQ

What type of palette is Sugar Petal Set?

It is a balanced warm and cool balanced contrast color palette with red, yellow, green, blue 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.