Palette

Chalkboard Doodle Fun

The classic contrast of a dark chalkboard background with light, playful chalk doodles.

neutralplayful5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Chalkboard Doodle Fun 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 Chalkboard Doodle Fun.

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

Data visualization

#2C3E50#E0E0E0#F0F0F0#D3D3D3#A9A9A9

Palette guide

How to use Chalkboard Doodle Fun

Overview

The "Chalkboard Doodle Fun" palette captures the classic contrast of a dark chalkboard background with light, playful chalk doodles. It features the deep, grounding #2C3E50, a dark slate gray, providing a perfect backdrop. The palette then offers a range of light grays from #E0E0E0 and #F0F0F0 to #D3D3D3 and #A9A9A9, mimicking various chalk shades. This collection is ideal for designers seeking to evoke creativity, simplicity, or a nostalgic educational aesthetic. Developers can apply these hues to create engaging user interfaces for educational apps, creative tools, or playful brand identities, ensuring a clear and interactive visual experience.

Best used for

Educational app interfaces
Children's learning platforms
Creative workshop websites
Art and design portfolios
Nostalgic branding
Interactive whiteboard tools

Suggested color roles

primary

#2C3E50 - A deep, dark slate gray, ideal for main backgrounds, navigation bars, or foundational UI elements, mimicking a chalkboard.

secondary

#A9A9A9 - A medium gray, excellent for subheadings, borders, or secondary content blocks, like a well-used chalk.

accent

#F0F0F0 - A very light gray, perfect for simulating fresh chalk doodles, call-to-action buttons, or interactive elements.

background

#2C3E50 - A deep, dark slate gray, serving as an immersive, classic chalkboard canvas for content.

text

#E0E0E0 - A light gray, providing excellent contrast and readability for text on the dark #2C3E50 background.

Accessibility notes

Ensure #E0E0E0 text on #2C3E50 background meets WCAG contrast standards for optimal readability.
Avoid using #D3D3D3 or #A9A9A9 for small text against similarly light backgrounds, as contrast may be low.
The darkest color, #2C3E50, provides excellent contrast for white or very light text.
For body text, prefer #E0E0E0 against the darkest color for optimal readability, simulating chalk.

Recommended combinations

Classic Chalkboard

Creates the iconic chalkboard look, with light chalk text and subtle gray accents on a dark background.

#2C3E50 · #E0E0E0 · #A9A9A9

Doodle Contrast

Ideal for highlighting playful elements, with bright chalk colors standing out against the deep slate.

#F0F0F0 · #D3D3D3 · #2C3E50

Subtle Sketch

Excellent for layered UI elements or subtle patterns, mimicking varied chalk pressure on the board.

#A9A9A9 · #D3D3D3 · #2C3E50

CSS variables

:root {
  --chalkboard-doodle-fun-1: #2C3E50;
  --chalkboard-doodle-fun-2: #E0E0E0;
  --chalkboard-doodle-fun-3: #F0F0F0;
  --chalkboard-doodle-fun-4: #D3D3D3;
  --chalkboard-doodle-fun-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "chalkboard-doodle-fun": {
        1: "#2C3E50",
        2: "#E0E0E0",
        3: "#F0F0F0",
        4: "#D3D3D3",
        5: "#A9A9A9",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#E0E0E0

Color 3#F0F0F0

Color 4#D3D3D3

Color 5#A9A9A9

Accessibility

Contrast checker

8.3:1AAA

9.6:1AAA

7.3:1AAA

4.7:1AA

8.3:1AAA

1.2:1Fail

1.1:1Fail

1.8:1Fail

9.6:1AAA

1.2:1Fail

1.3:1Fail

2.1:1Fail