Palette

Botanical Sketch Book

A gentle collection of greens, like illustrations from an old botanical sketchbook, quiet and earthy.

EarthNatural5 colors

More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A4739#647B5A#95B48B#C2D8B9#E1EADD

Palette guide

How to use Botanical Sketch Book

Overview

The Botanical Sketch Book palette offers a gentle, progressive collection of greens, reminiscent of illustrations from an old, quiet botanical sketchbook. Spanning from the deep #3A4739 to the very light #E1EADD, and featuring harmonious mid-tones like #647B5A and #95B48B, this scheme is perfect for designs seeking an organic, calm, and artistic aesthetic. The versatile #C2D8B9 provides a soft transition. Designers can leverage this palette for projects requiring a grounded yet refined feel, such as artisanal product branding, educational materials, or websites for natural wellness. Its gradient of greens ensures visual depth and a soothing user experience, evoking a timeless connection to nature.

Best used for

Artisanal product branding and packaging
Educational materials on nature and botany
Natural wellness and mindfulness apps
Handmade stationery and craft blogs
Museum and gallery exhibition design
Eco-conscious interior design concepts

Suggested color roles

primary

Utilize #3A4739 as a strong, grounding primary color for headers, important text, or impactful brand elements, conveying depth.

secondary

Apply #647B5A for subheadings, secondary content blocks, or graphic elements, providing a balanced mid-green.

accent

Employ #95B48B or #C2D8B9 for subtle accents or highlights, ensuring they stand out against deeper tones without being overly bright.

background

The lightest shade, #E1EADD, is perfect for clean, serene backgrounds, allowing the darker greens to breathe and stand out.

text

The deep #3A4739 is ideal for body text and critical information, ensuring excellent readability on light backgrounds like #E1EADD.

Accessibility notes

Ensure strong contrast using #3A4739 for text on #E1EADD or #C2D8B9 backgrounds to meet WCAG AA standards.
Be cautious when pairing #647B5A with #95B48B for text and background without careful contrast testing due to their similar values.
For interactive elements, use distinct visual cues beyond color, especially with the more subtle color differences in the mid-tones.
Consider using a slightly larger font size for body text when using mid-tone greens on similar light backgrounds.

Recommended combinations

Deep Earth

Creates a strong, grounded aesthetic, ideal for main brand elements or professional content blocks with a light backdrop.

#3A4739 · #647B5A · #E1EADD

Sketch Gradient

Offers a soft, harmonious transition, perfect for subtle gradients, background textures, or layered graphic elements.

#647B5A · #95B48B · #C2D8B9

Page Contrast

Emphasizes readability and visual hierarchy, with dark text on a light background and a complementary mid-tone for accents.

#3A4739 · #C2D8B9 · #95B48B

CSS variables

:root {
  --botanical-sketch-book-1: #3A4739;
  --botanical-sketch-book-2: #647B5A;
  --botanical-sketch-book-3: #95B48B;
  --botanical-sketch-book-4: #C2D8B9;
  --botanical-sketch-book-5: #E1EADD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "botanical-sketch-book": {
        1: "#3A4739",
        2: "#647B5A",
        3: "#95B48B",
        4: "#C2D8B9",
        5: "#E1EADD",
      }
    }
  }
}

Hex values

Color 1#3A4739

Color 2#647B5A

Color 3#95B48B

Color 4#C2D8B9

Color 5#E1EADD

Accessibility

Contrast checker

2.1:1Fail

4.3:1AA18

6.5:1AA

7.9:1AAA

2.1:1Fail

2:1Fail

3.1:1AA18

3.8:1AA18