Skip to main content
Back to Colors generators

Colors

Tinted Neutral Palette Generator

Used by developers, writers, and creators worldwide.

The tinted neutral palette generator produces near-gray colors with just enough hue undertone to feel intentional — warm greige, cool slate, rosy taupe, or sage-tinged off-white. Pure grays can read as sterile or disconnected from your accent colors. Tinted neutrals solve that by sharing undertone DNA with the rest of your palette, so backgrounds, borders, and muted text all feel like they belong together. You control the number of swatches (up to a full 9-step scale) and the tint direction — warm, cool, rosy, green, or random. Each generated set spans a full lightness range, giving you values from near-white through to near-black within a single coherent undertone.

Loading usage…

Free forever — no account required

How to use

  1. Choose your options above
  2. Click Generate
  3. Copy your result

Detailed instructions

  1. Set the Number of Colors slider to match how many neutral steps your project needs — 6 for a quick palette, 9–11 for a full design system scale.
  2. Choose a Tint Direction from the dropdown, or leave it on Random to explore unexpected undertones across multiple generations.
  3. Click Generate to produce a graduated palette of tinted neutral swatches from lightest to darkest.
  4. Click any individual swatch to copy its hex code, then paste it into Figma, your CSS custom properties, or your design token file.
  5. Regenerate with the same tint direction to get alternative lightness distributions until the range fits your contrast needs.

Use Cases

  • •Defining the neutral scale tokens in a Figma design system, from page background through disabled text
  • •Populating Tailwind's gray palette extension with warm or cool undertones that match a brand's accent colors
  • •Selecting surface, card, and border colors for a SaaS dashboard without introducing clashing undertones
  • •Building a presentation board for interior design mockups where warm sand or cool slate sets the room's mood
  • •Generating muted text hierarchy values for a Substack or editorial layout that stays readable without harsh contrast

Tips

  • →Compare the lightest swatch against pure white (#ffffff) — if the undertone disappears, increase the tint strength by regenerating until it's visible at full size.
  • →Pair a warm-tinted neutral scale with a cool accent color for maximum contrast and visual interest without using pure black or saturated tones.
  • →Use the darkest swatch in the palette for body text instead of black; it reads as softer and stays on-undertone with your backgrounds.
  • →When building a UI, assign the three lightest swatches to backgrounds (page, card, elevated), mid-tones to borders, and the darkest two to text — this creates instant hierarchy.
  • →Generate two palettes with complementary tints (e.g., warm and cool) and layer them: warm for backgrounds, cool for interactive states or hover effects.
  • →If a swatch looks muddier than neutral in context, check its HSL values — saturation above 15% is often too strong for true neutral use and will compete with accent colors.

FAQ

what's the difference between a tinted neutral and a plain gray

A plain gray has zero hue — it sits exactly on the achromatic axis and can feel cold or disconnected next to colored elements. A tinted neutral carries a small amount of hue (roughly 3–12% saturation), so it leans warm, cool, rosy, or green without reading as a color in its own right. That shared undertone is what makes it harmonize with your accent palette instead of fighting it.

how do I choose the right tint direction for my project

Match the undertone to your dominant accent colors. Warm tints pair naturally with terracotta, gold, and earth tones; cool tints complement navy, teal, and slate; rosy tints suit dusty rose and plum palettes; green tints work well with sage and olive schemes. If you're unsure, use the random setting and compare each output swatch directly against your existing accent colors — the one that makes the accent look most intentional is the right direction.

can I use this palette as a full design system neutral scale

Yes. Set the count to 9 or more to get fine-grained steps from near-white to near-black, which covers every neutral role: page background, card surface, input border, placeholder text, and body text. Copy the hex codes into Figma as local color styles named Neutral/100 through Neutral/900, or define them as CSS custom properties on :root for a Tailwind config or design token file.