Palette

Peppermint Twist Fresh

A refreshing blend of cool blues and minty greens, with a playful touch of pink.

coolplayful5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Peppermint Twist Fresh reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Peppermint Twist Fresh.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#FFB6C1#F0F8FF#87CEEB#20B2AA#008B8B

Palette guide

How to use Peppermint Twist Fresh

Overview

The Peppermint Twist Fresh palette delivers a crisp and invigorating blend of cool blues and minty greens, accented with a playful touch of pink. Featuring the serene `#87CEEB` (SkyBlue) and the refreshing `#20B2AA` (LightSeaGreen), alongside the delicate `#FFB6C1` (LightPink), this palette is perfect for designers and developers creating lively, clean, and engaging digital experiences. The deeper `#008B8B` (DarkCyan) provides a grounded contrast, while `#F0F8FF` (AliceBlue) ensures a light, airy base. This collection is excellent for projects that aim to evoke freshness, energy, and a touch of playful sophistication.

Best used for

Health and wellness app interfaces
Refreshing beverage branding
Travel and tourism websites (coastal themes)
Children's educational content
Clean and modern e-commerce sites
Interactive dashboards with a cool aesthetic

Suggested color roles

primary

Use `#87CEEB` for main content areas or headers, providing a calm yet invigorating base.

secondary

Employ `#20B2AA` for secondary information, accents, or interactive elements to add a fresh, energetic touch.

accent

Apply `#FFB6C1` sparingly for playful highlights, notifications, or small calls-to-action to introduce warmth.

background

Utilize `#F0F8FF` as the primary background color for a clean, light, and expansive canvas.

text

For optimal readability, use `#008B8B`, dark blue, or black text on lighter backgrounds like `#F0F8FF` or `#87CEEB`.

Accessibility notes

Ensure `#008B8B` text on `#F0F8FF` backgrounds meets WCAG contrast standards for excellent readability.
Avoid using `#FFB6C1` for text on `#F0F8FF` backgrounds, as contrast will be insufficient.
Check contrast ratios for text set in `#87CEEB` or `#20B2AA` on different background colors.
For small text or critical UI elements, prioritize the deepest color, `#008B8B`, against the lightest backgrounds.

Recommended combinations

Fresh Breeze

Creates a light, airy background with refreshing blue-green accents, suitable for clean layouts.

#F0F8FF · #87CEEB · #20B2AA

Vibrant Twist

Ideal for highlighting key information or interactive elements, with pink providing a playful pop.

#20B2AA · #FFB6C1 · #F0F8FF

Deep Mint

Use for strong headers, footers, or sections that require a grounded, cool presence with subtle depth.

#008B8B · #87CEEB · #F0F8FF

CSS variables

:root {
  --peppermint-twist-fresh-1: #FFB6C1;
  --peppermint-twist-fresh-2: #F0F8FF;
  --peppermint-twist-fresh-3: #87CEEB;
  --peppermint-twist-fresh-4: #20B2AA;
  --peppermint-twist-fresh-5: #008B8B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "peppermint-twist-fresh": {
        1: "#FFB6C1",
        2: "#F0F8FF",
        3: "#87CEEB",
        4: "#20B2AA",
        5: "#008B8B",
      }
    }
  }
}

Hex values

Color 1#FFB6C1

Color 2#F0F8FF

Color 3#87CEEB

Color 4#20B2AA

Color 5#008B8B

Accessibility

Contrast checker

1.5:1Fail

1.1:1Fail

1.6:1Fail

2.5:1Fail

1.5:1Fail

1.6:1Fail

2.4:1Fail

3.9:1AA18

1.1:1Fail

1.6:1Fail

1.5:1Fail

2.4:1Fail

1.6:1Fail

2.4:1Fail

1.5:1Fail

1.6:1Fail

2.5:1Fail

3.9:1AA18

2.4:1Fail

1.6:1Fail

Similar palettes

More like Peppermint Twist Fresh

Peppermint Twist Fresh

See it in context.

Ready when you are.

Built with Peppermint Twist Fresh.

How to use Peppermint Twist Fresh

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Fresh Breeze

Vibrant Twist

Deep Mint

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Peppermint Twist Fresh