Palette

Botanical Sketch Green

Delicately portrays the varied greens of botanical illustrations, from deep forest to pale leaf.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Botanical Sketch Green 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 Botanical Sketch Green.

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

Data visualization

#4F6D55#7CA082#A8C4AC#D4E0D6#EFF4EF

Palette guide

How to use Botanical Sketch Green

Overview

The Botanical Sketch Green palette delicately portrays the varied greens of botanical illustrations, ranging from deep forest to pale leaf. With the grounding #4F6D55 and the softer #7CA082, transitioning to the airy #A8C4AC and the very light #D4E0D6, this scheme is perfect for designs seeking a subtle, organic, and natural aesthetic. The almost-white #EFF4EF provides a fresh canvas. Designers can leverage this palette for projects requiring a sophisticated yet understated feel, such as minimalist branding, natural product packaging, or serene web interfaces. Its harmonious progression of greens ensures visual tranquility and an elegant user experience, ideal for conveying purity and calm.

Best used for

Minimalist branding and web design
Natural and organic product packaging
Serene interior design concepts
Art and illustration portfolio websites
Eco-friendly stationery and print materials
Wellness and mindfulness app interfaces

Suggested color roles

primary

Use #4F6D55 as a sophisticated primary color for headings, brand logos, or key content sections, providing depth and elegance.

secondary

Apply #7CA082 for subheadings, secondary information, or supporting graphic elements, offering a softer, approachable green.

accent

Employ #A8C4AC for subtle highlights or interactive elements where a gentle visual cue is desired without strong contrast.

background

The lightest shade, #EFF4EF, is excellent for clean, airy backgrounds, ensuring clarity and a sense of spaciousness.

text

The deep #4F6D55 is ideal for body text and critical information, ensuring strong readability against light backgrounds like #EFF4EF.

Accessibility notes

Ensure strong contrast for text, using #4F6D55 on #EFF4EF or #D4E0D6 backgrounds, to meet WCAG AA standards.
Avoid using #A8C4AC for text on #D4E0D6 or #EFF4EF backgrounds due to insufficient contrast; reserve it for larger headlines or accents.
For interactive elements, ensure distinct hover/focus states, as color differences within this subtle palette might be minimal.
Consider larger font sizes for body text to enhance readability, especially when using mid-tone greens on similar light backgrounds.

Recommended combinations

Subtle Depth

Creates a refined, understated look, perfect for elegant headers or professional content blocks with a light, airy base.

#4F6D55 · #7CA082 · #EFF4EF

Leafy Transition

Offers a soft, harmonious gradient, ideal for background textures, subtle dividers, or layered graphic elements.

#7CA082 · #A8C4AC · #D4E0D6

Clean Contrast

Emphasizes readability with dark text on a light background, and a mid-tone for gentle accents or secondary information.

#4F6D55 · #D4E0D6 · #A8C4AC

CSS variables

:root {
  --botanical-sketch-green-1: #4F6D55;
  --botanical-sketch-green-2: #7CA082;
  --botanical-sketch-green-3: #A8C4AC;
  --botanical-sketch-green-4: #D4E0D6;
  --botanical-sketch-green-5: #EFF4EF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "botanical-sketch-green": {
        1: "#4F6D55",
        2: "#7CA082",
        3: "#A8C4AC",
        4: "#D4E0D6",
        5: "#EFF4EF",
      }
    }
  }
}

Hex values

Color 1#4F6D55

Color 2#7CA082

Color 3#A8C4AC

Color 4#D4E0D6

Color 5#EFF4EF

Accessibility

Contrast checker

2:1Fail

3.1:1AA18

4.2:1AA18

5.2:1AA

2:1Fail

1.5:1Fail

2.1:1Fail

2.6:1Fail

3.1:1AA18

1.5:1Fail

1.4:1Fail

1.7:1Fail