Back to palettes

Palette

Graphite Study Hues

A classic, minimalist palette inspired by the subtle range of a graphite pencil sketch on paper.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Graphite Study Hues 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 Graphite Study Hues.

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

Data visualization

#2F4F4F#696969#A9A9A9#D3D3D3#E8E8E8

Palette guide

How to use Graphite Study Hues

Overview

The "Graphite Study Hues" palette offers a sophisticated range of cool-toned greys, subtly leaning towards a muted blue-green, perfect for academic, understated, or minimalist designs. From the deep #2F4F4F to the very light #E8E8E8, this collection, including adaptable mid-tones like #696969, #A9A9A9, and #D3D3D3, provides a refined yet distinctive touch. Designers and developers can leverage these hues to evoke the precise and considered tones of a detailed graphite study, creating professional interfaces, scholarly publications, or elegant branding that conveys seriousness and clarity without being stark.

Best used for

  • Academic and research institution websites
  • Minimalist branding for professional services
  • Architectural and engineering presentations
  • Sophisticated tech interfaces and dashboards
  • Editorial design for high-brow content
  • Understated luxury product showcases

Suggested color roles

primary

Use #2F4F4F for strong headers, foundational elements, or as a deep, calming dark mode background.

secondary

Apply #696969 for main content, subheadings, or navigation, providing solid readability.

accent

Employ #A9A9A9 for subtle interactive elements, dividers, or less critical information, offering gentle emphasis.

background

Utilize #E8E8E8 as a clean, bright, and slightly cool canvas, providing optimal contrast.

text

For primary text, #2F4F4F ensures excellent readability on lighter backgrounds like #E8E8E8 or a true black for dark mode text.

Accessibility notes

  • Strong contrast between #2F4F4F and #E8E8E8 ensures high legibility for primary text.
  • Be mindful when using #A9A9A9 on #D3D3D3 for small text, as the contrast might be insufficient.
  • Always test interactive element states to ensure they are clearly distinguishable for all users.
  • Avoid using similar mid-tones for text and background, such as #696969 on #A9A9A9, for critical information.

Recommended combinations

Deep & Light

Creates a strong visual hierarchy with a dark base, bright background, and a balanced mid-tone accent.

#2F4F4F · #E8E8E8 · #A9A9A9

Cool Progression

Ideal for layered interfaces or subtle gradients, providing smooth transitions and depth.

#696969 · #A9A9A9 · #D3D3D3

Base & Accent

A robust foundation with a lighter content area and a darker mid-tone for key elements.

#2F4F4F · #D3D3D3 · #696969

CSS variables

:root {
  --graphite-study-hues-1: #2F4F4F;
  --graphite-study-hues-2: #696969;
  --graphite-study-hues-3: #A9A9A9;
  --graphite-study-hues-4: #D3D3D3;
  --graphite-study-hues-5: #E8E8E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "graphite-study-hues": {
        1: "#2F4F4F",
        2: "#696969",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#E8E8E8",
      }
    }
  }
}

Related searches

cool grey color paletteacademic grey schemeunderstated color palettesubtle blue-grey tonesminimalist study palette

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#696969
·
Color 3#A9A9A9
·
Color 4#D3D3D3
·
Color 5#E8E8E8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.8:1AA18
6:1AA
7.3:1AAA
2
1.6:1Fail
2.3:1Fail
3.7:1AA18
4.5:1AA18
3
3.8:1AA18
2.3:1Fail
1.6:1Fail
1.9:1Fail
4
6:1AA
3.7:1AA18
1.6:1Fail
1.2:1Fail
5
7.3:1AAA
4.5:1AA18
1.9:1Fail
1.2:1Fail

Similar palettes

More like Graphite Study Hues

View all monochrome