Palette

Cloudberry Patch Mist

Soft yellows and gentle off-whites inspired by delicate cloudberries in morning mist.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cloudberry Patch Mist 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 Cloudberry Patch Mist.

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

Data visualization

#FFB000#FFD268#FDEEBA#A6A6A6#EBEBEB

Palette guide

How to use Cloudberry Patch Mist

Overview

The Cloudberry Patch Mist palette offers soft yellows and gentle off-whites, inspired by delicate cloudberries in morning mist. With the vibrant #FFB000, the warm #FFD268 and #FDEEBA, grounded by the subtle greys #A6A6A6 and #EBEBEB, this collection evokes a sense of natural calm and rustic charm. It's an excellent choice for designers and developers aiming for a fresh, organic, and inviting aesthetic. Leverage these warm yet muted hues to create cheerful websites, natural product branding, or cozy physical spaces, fostering a welcoming and visually appealing presence that reflects the gentle beauty of a cloudberry patch.

Best used for

Natural food product branding
Farm-to-table restaurant websites
Artisan craft marketing
Autumn event invitations
Cozy café interiors
Children's educational content

Suggested color roles

primary

Use #FFB000 as the dominant, vibrant color for main headers, key calls-to-action, or strong brand elements. It provides a cheerful focal point.

secondary

Employ #FFD268 for supporting sections, subheadings, or secondary content. It offers a softer yet distinct yellow presence.

accent

Apply #A6A6A6 for subtle grounding elements, dividers, or sophisticated accents. Its neutral grey provides balance.

background

Utilize #EBEBEB or #FDEEBA for clean, expansive backgrounds. These very light shades create an airy, serene canvas.

text

For body text on light backgrounds like #EBEBEB or #FDEEBA, #A6A6A6 provides good readability. For darker backgrounds, a crisp white is recommended.

Accessibility notes

Ensure #A6A6A6 text on #EBEBEB or #FDEEBA backgrounds meets WCAG contrast standards. Yellows will likely not pass for text.
Avoid using #FFB000, #FFD268, or #FDEEBA for body text, as their lightness makes them hard to read.
Always use a contrast checker to verify all text and interactive element color combinations for accessibility compliance.
For critical text elements, consider using a very dark charcoal or black if palette colors don't provide enough contrast on the lightest shades.

Recommended combinations

Berry Harvest

Ideal for a vibrant yet natural brand. #FFB000 for primary, #FFD268 for secondary, and #EBEBEB for a clean background.

#FFB000 · #FFD268 · #EBEBEB

Misty Patch

Excellent for subtle gradients or delicate illustrations, evoking softness and calm.

#FDEEBA · #A6A6A6 · #FFD268

Golden Haze

Creates an airy, expansive feel. #FFD268 for grounding, #EBEBEB as main background, with #A6A6A6 for subtle text or lines.

#FFD268 · #EBEBEB · #A6A6A6

CSS variables

:root {
  --cloudberry-patch-mist-1: #FFB000;
  --cloudberry-patch-mist-2: #FFD268;
  --cloudberry-patch-mist-3: #FDEEBA;
  --cloudberry-patch-mist-4: #A6A6A6;
  --cloudberry-patch-mist-5: #EBEBEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloudberry-patch-mist": {
        1: "#FFB000",
        2: "#FFD268",
        3: "#FDEEBA",
        4: "#A6A6A6",
        5: "#EBEBEB",
      }
    }
  }
}

Hex values

Color 1#FFB000

Color 2#FFD268

Color 3#FDEEBA

Color 4#A6A6A6

Color 5#EBEBEB

Accessibility

Contrast checker

1.3:1Fail

1.6:1Fail

1.3:1Fail

1.5:1Fail

1.3:1Fail

1.2:1Fail

1.7:1Fail

1.2:1Fail

1.6:1Fail

1.2:1Fail

2.1:1Fail

1:1Fail

1.3:1Fail

1.7:1Fail

2.1:1Fail

2:1Fail

1.5:1Fail

1.2:1Fail

1:1Fail

2:1Fail

Similar palettes

More like Cloudberry Patch Mist

Cloudberry Patch Mist

See it in context.

Ready when you are.

Built with Cloudberry Patch Mist.

How to use Cloudberry Patch Mist

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Berry Harvest

Misty Patch

Golden Haze

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cloudberry Patch Mist