Back to palettes

Palette

Graphite Sketch

A range of deep to light greys, capturing the quiet elegance and subtle nuances of a graphite drawing.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#5D6D7E#9FB3C8#2A343A#475765

Palette guide

How to use Graphite Sketch

Overview

The "Graphite Sketch" palette presents a cool, sophisticated range of slightly desaturated blue-greys, perfect for modern designs seeking subtle yet distinct character. From the deep, anchoring #2A343A to the airy #9FB3C8, this collection, including versatile mid-tones like #36454F, #5D6D7E, and #475765, offers a contemporary twist on monochrome. Designers and developers can leverage these hues to capture the quiet elegance and nuanced depth of a refined graphite drawing, creating professional interfaces, corporate branding, or minimalist web experiences with a touch of cool serenity.

Best used for

  • Modern tech and software interfaces
  • Corporate and business reports
  • Minimalist branding and logos
  • Architectural visualizations
  • Professional online portfolios
  • Web applications with clean aesthetics

Suggested color roles

primary

Use #2A343A for strong headings, foundational elements, or as a sophisticated dark mode background.

secondary

Apply #36454F for main content areas, navigation, or as a contrasting panel, offering depth.

accent

Employ #5D6D7E for interactive elements, subtle highlights, or calls to action, providing gentle emphasis.

background

Utilize #9FB3C8 as a clean, cool, and airy canvas, offering a light and inviting base.

text

For optimal readability, #2A343A provides strong contrast against lighter backgrounds like #9FB3C8 or a near-white.

Accessibility notes

  • Ensure high contrast for text; #2A343A on #9FB3C8 is an excellent combination for legibility.
  • Be cautious when using #5D6D7E on #9FB3C8 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 #475765 on #5D6D7E, for critical information.

Recommended combinations

Deep Contrast

Creates a bold and clear layout with a strong dark, a bright light, and a balancing mid-tone.

#2A343A · #9FB3C8 · #36454F

Cool Harmony

Ideal for layered interfaces or subtle background patterns, providing depth and a cohesive feel.

#36454F · #5D6D7E · #475765

Light Accent

A strong base with a light background and a slightly darker accent for visual interest and hierarchy.

#2A343A · #9FB3C8 · #5D6D7E

CSS variables

:root {
  --graphite-sketch-1: #36454F;
  --graphite-sketch-2: #5D6D7E;
  --graphite-sketch-3: #9FB3C8;
  --graphite-sketch-4: #2A343A;
  --graphite-sketch-5: #475765;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "graphite-sketch": {
        1: "#36454F",
        2: "#5D6D7E",
        3: "#9FB3C8",
        4: "#2A343A",
        5: "#475765",
      }
    }
  }
}

Related searches

cool grey color paletteblue-grey monochromemodern graphite colorssubtle grey schemesophisticated neutrals

Palette colors

Hex values

Color 1#36454F
·
Color 2#5D6D7E
·
Color 3#9FB3C8
·
Color 4#2A343A
·
Color 5#475765
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
4.6:1AA
1.3:1Fail
1.3:1Fail
2
1.9:1Fail
2.5:1Fail
2.4:1Fail
1.4:1Fail
3
4.6:1AA
2.5:1Fail
5.9:1AA
3.5:1AA18
4
1.3:1Fail
2.4:1Fail
5.9:1AA
1.7:1Fail
5
1.3:1Fail
1.4:1Fail
3.5:1AA18
1.7:1Fail

Similar palettes

More like Graphite Sketch

View all monochrome
Architectural Grid Hues
Charcoal Sketchbook Grey
Charcoal Whisper Scale
City Loft Minimal
City Steel Gleam
Concrete Jungle Bloom