Softonic

Monochromatic Palette Generator

Step 1 / 3 Create the scale

Colors and palettes are generated in this browser. Funnel mode keeps the project in this tab’s session storage for up to 30 minutes; no color value reaches our servers or the URL.

Build a monochromatic scale

Enter one color, then choose the transformation, interpolation space and number of stops.

Accepted: #RGB, #RRGGBB, rgb(0–255) and hsl() with percentages. Alpha channels are not accepted.

Used in CSS variables, Tailwind, SCSS and design-token exports.

Pick a base color and the generator builds a monochromatic palette around it: tints (progressively mixed with white for a lighter ramp), shades (progressively mixed with black for a darker ramp), and tones (mixed with gray to reduce saturation). Useful for design systems that need a coherent ramp from one brand color, like Tailwind’s 50–950 scale but tunable, or for picking hover and active states without leaving the palette.

How the palette is generated

  1. 1

    Enter a base color

    Use #RGB, #RRGGBB, integer rgb() channels or hsl() percentages.

  2. 2

    Pick palette type

    Choose a full tint-and-shade ramp, tints toward white, shades toward black or tones toward neutral.

  3. 3

    Pick step count

    5, 9 or 11 steps. Nine uses the common Material-style 100–900 labels; 11 adds 50 and 950 for a Tailwind-style scale.

  4. 4

    Copy or export

    Copy HEX, RGB, HSL or OkLCH values, or export CSS, Tailwind, SCSS and Design Tokens Community Group JSON text.

Tints vs. shades vs. tones

  • Tint = base color + white. Lighter, more pastel. mix(base, #fff, p%) where p is the percentage of white.
  • Shade = base color + black. Darker, moodier. mix(base, #000, p%).
  • Tone = base color + gray. Same lightness, lower saturation, more muted.

The three transformations produce different visual characters: tints feel airy and optimistic, shades feel grounded and serious, tones feel understated and sophisticated.

A 9-step ramp from one base

Step Description Typical use
100 Very light Surfaces, chip backgrounds
200 Light Disabled states
300 Mid-light Borders, dividers
400 Lightly dulled Secondary text (light bg)
500 Base color Default brand, your baseline
600 Mid-dark Hover states on primary actions
700 Dark Active states, headers
800 Very dark Strong text on light bg
900 Darkest shade Maximum contrast text

The numeric labels are inspired by common design-token conventions; the generated colors are not official Material or Tailwind palette values.

Why monochromatic works for interfaces

  • Familiarity. Every element looks unmistakably related.
  • Consistency. Reusing one hue makes relationships easy to recognize, but it does not by itself make an interface colorblind-accessible.
  • Simplicity. One decision, the base color, drives the whole palette.

Pairing with neutrals

A monochromatic palette needs grays too. Common pattern:

  • Primary ramp from your brand color (9 steps).
  • Neutral ramp from a desaturated version of the primary (9 steps).
  • Maybe one accent color (a single well-chosen step for alerts and CTAs).

Treat this as a starting structure, not a fixed rule. The number of palettes depends on the product’s states, data visualization, semantic colors and accessibility requirements.

Contrast checkpoints

For text on a background, WCAG requires 4.5:1 for normal text and 3:1 for large text. Labels such as 100, 500 and 900 do not imply a particular contrast ratio; the result changes with the base color, palette type and interpolation space.

Always check the specific combinations you plan to use against a contrast checker.

Exporting to your design system

Output formats:

  • CSS custom properties: --primary-50: #f0f9ff; --primary-100: ...
  • Tailwind config: JS object ready to paste into tailwind.config.js → theme.extend.colors.
  • SCSS map for Sass projects.
  • Design tokens JSON using the Design Tokens Community Group $type and $value shape.

Frequently Asked Questions

Tints intentionally move toward white, so highly saturated bases can become pastel quickly. Compare HSL and OkLCH, try fewer stops, or choose a less saturated base color before generating the scale.

You can choose HSL or OkLCH. HSL adjusts its lightness and saturation axes; OkLCH adjusts perceptual lightness and chroma, then reduces chroma when needed to keep the result inside sRGB.

In a full ramp, the base color is the middle 500 token. A tints-only scale ends at the base; shades-only starts at it; tones-only ends at it. The labels name tokens and do not promise a specific lightness.

There is no direct Figma integration. Copy individual values or use the CSS, Tailwind, SCSS or Design Tokens Community Group JSON text as a starting point for your own workflow.

Related Tools

Image Resizer

Resize images to pixel-exact dimensions or percentages while preserving aspect ratio. Batch-friendly, no upload.

QR Code Generator

Generate a browser-local QR code from a plain text or URL payload. Adjust size, colours and error correction, then download PNG.

Meme Generator

Add fixed top and bottom captions to a JPG, PNG, or WebP image in your browser. Set font, size, colors, and stroke, then download a PNG.

Barcode Generator

Create a 1D barcode in your browser in Code 128, EAN, UPC, ITF-14 and other supported formats. Download the rendered result as SVG or PNG.

Image Compressor

Compress JPG, PNG and WebP images to reduce file size while preserving visual quality. Entirely in your browser, no upload.

GIF Maker

Turn a sequence of images or a short video into an animated GIF. Set frame rate, loop count and dimensions before exporting.