Example: a monochromatic palette from #0f766e

Build yours from any hex →

How to Build a Monochromatic Color Palette from a Single Hex Code

Last updated: July 2026

A monochromatic color palette is the fastest route from "I have one brand color" to "I have a complete, coordinated color system." You take a single hue and vary only its lightness and saturation — producing tints, shades, and tones that are guaranteed to work together, because they all share the same hue DNA.

This guide shows you how to generate a monochromatic palette from any hex code with HexTints, how many steps a usable scale needs, and how to pick interactive-state colors from your ramp that actually pass WCAG contrast checks. No theory degree required — just one hex code.

What Is a Monochromatic Color Palette?

"Monochromatic" literally means "one color." In practice, a monochromatic color scheme is built from a single hue — teal, for example — extended into a range of variations:

The appeal is harmony by construction. When you hand-pick ten unrelated colors, you have to make them coordinate. When you derive ten colors from one hue, they coordinate automatically — every pairing looks intentional because the only thing changing is lightness.

One distinction worth getting right: monochromatic is not monochrome. Monochrome usually refers to grayscale — black, white, and grays with no hue at all. A monochromatic palette keeps a real hue throughout; it just explores that hue's full lightness range.

The Building Blocks: Color Tints, Shades, and Tones

Every monochromatic palette is assembled from three kinds of variation, and each has a precise meaning in color theory:

Tint (lighter): new_channel = base_channel + (255 − base_channel) × factor

Shade (darker): new_channel = base_channel × (1 − factor)

Where factor runs from 0 (base color) toward 1 (pure white or pure black).

Because all three variations preserve the hue, any combination of them remains monochromatic. If you want the full theory — with visual examples and the exact math worked through — our guide to tints and shades covers it in depth, and this comparison of color tints, shades, and tones untangles the terminology.

Generate a Monochromatic Palette from Any Hex Code

You could compute tints and shades by hand with the formulas above — but a generator does it in seconds and keeps the steps even. Here's the workflow with HexTints:

  1. Enter your base hex. Type or paste it into the input above (or grab one visually with our hex color picker — paste any value like #0f766e and go), or open /colors/#0f766e directly.
  2. Stay in Lightness mode. This is the monochromatic mode: hue and saturation stay fixed while the tool generates a 31-step ramp from near-white to near-black — your full run of tints and shades.
  3. Click swatches to copy. Each step is click-to-copy hex. Grab the handful of steps you need (more on choosing them below).
  4. Optionally explore Chroma mode. Chroma varies saturation instead of lightness, giving you the muted tones of the same hue — useful for disabled states and subtle backgrounds.

Not sure which base color to start from? Browse the color library — every entry ships with precomputed tints, shades, and contrast data — or start from a curated theme on the HexTints homepage and refine from there.

How Many Steps Does a Monochromatic Scale Need?

For a design system, the sweet spot is 9–11 steps. Fewer than that and you run out of room for subtle distinctions — border vs. background vs. hover fill — and start reusing the same value for jobs that need to look different. Most modern systems (Tailwind, Material, Radix) settle on a 50–900 or 50–950 naming scale for exactly this reason.

Here's the example teal ramp from the top of this page mapped to design tokens:

:root {
  --teal-50:  #ecf4f3;  /* subtle background   */
  --teal-100: #cfe4e2;  /* hover background    */
  --teal-200: #9fc8c5;  /* borders, dividers   */
  --teal-300: #6fada8;  /* disabled fills      */
  --teal-400: #3f918b;  /* icons, accents      */
  --teal-500: #0f766e;  /* base — buttons      */
  --teal-600: #0c5e58;  /* hover state         */
  --teal-700: #094742;  /* active state, text  */
  --teal-800: #062f2c;  /* headings on light   */
  --teal-900: #031a18;  /* highest contrast    */
}

The same values drop straight into tailwind.config.js as a custom color object — a monochromatic ramp is a Tailwind color scale. If you need the deeper how-and-why of full palette generation, our color shades generator guide covers step spacing, hue preservation, and export workflows in detail.

Hover and Active States That Pass WCAG

Monochromatic palettes shine for interactive states: your button, its hover, and its active state are just neighboring steps on the ramp. But this is also where accessibility mistakes hide, so let's be precise about what WCAG 2.1/2.2 actually requires:

Concretely, on the teal ramp above: white text on the #0f766e base is 5.47:1 — passes AA. On the #0c5e58 hover it rises to 7.58:1, and on the #094742 active state 10.57:1 — both pass AAA. The hover and base differ by only 1.38:1 from each other, and that's fine: the visible nudge is what matters, not a ratio between states.

Shortcut: every page in the HexTints color library includes a precomputed WCAG table showing white-text and black-text contrast for that exact hex — see the teal page for an example — so you can check a candidate before committing to it as a button background. For the full picture, read our guide to web accessibility and color contrast.

A monochromatic bonus: because your palette's contrast comes entirely from lightness, pairings that pass WCAG remain distinguishable for users with color vision deficiency — lightness differences survive every type of CVD, hue differences don't.

Color Spaces: HSL Today, OKLCH Rising

HexTints steps through the ramp in HSL — hue and saturation held constant, lightness swept from ~95% down to ~5%. HSL is fast, universally supported, and predictable for a single-hue ramp.

The emerging alternative is OKLCH, now natively supported in CSS via oklch(). Its advantage is perceptual uniformity: each step looks like an equal visual increment to the human eye, where HSL steps can bunch up in the middle of the range for some hues. For monochromatic work the practical difference is small — you're not crossing hues, which is where HSL struggles most — but if you're hand-tuning a ramp in code, oklch() is worth a look. A pragmatic workflow: generate your ramp here, copy the hex values, and convert the steps you want to fine-tune (our hex to RGB converter handles the first leg of that trip).

HexTints vs. Palette Generators like Coolors

Tools like Coolors, Adobe Color, and Paletton are excellent at what they do — discovering color schemes across multiple hues. A monochromatic workflow is a different job: you already have your hue, and you need depth, not discovery. That's the niche HexTints is built for:

Tool Best at Free No sign-up Deep single-hue ramps
HexTints Tints & shades of one hex Yes Yes 31 steps
Coolors Multi-hue scheme discovery Freemium Account encouraged Limited
Adobe Color Harmony-rule exploration Yes Adobe account Monochromatic rule, 5 swatches

They're complementary, not rivals: discover a scheme in a multi-hue tool if you're starting from nothing, then bring each hue here to build out its monochromatic ramp. (Comparing hex-level tools instead? See HexTints vs 0to255.)

Frequently Asked Questions

Got your palette sorted? Put it on a page that's yours — create your free MinglyLink page →