Tint and Shade Generator

Generate an 11-step 50–950 color scale with perceptually uniform tints and shades for any HEX input.

Paste a HEX value or pick a base color, then copy the full 50–950 scale as HEX, OKLCH, Tailwind config, or CSS custom properties.

Settings

Color Scale Preview

Export Code


                    


                    

                        
⚡ Quick actions

                        

                            

                                
                                
                            

                            

                                
                            

                        

                    


                    
Build a complete 50–950 scale with a perceptual tint and shade generator


This tint and shade generator takes a single HEX base color and produces a full 11-step palette — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950 — that mirrors the structure of modern design systems. Tints mix the base with white to brighten it; shades mix it with black to darken it. Instead of naive RGB blending, the generator steps through a perceptually uniform space so every stop looks like an equal visual jump from the last.


Why perceptual uniformity matters


Linear RGB or HSL interpolation tends to drift the hue at the extremes — blues fade toward purple, reds drift toward orange, and yellows lose saturation in the middle of the ramp. Working in OKLCH or Oklab keeps the lightness changes aligned with human vision, so the scale stays balanced from lightest tint to darkest shade. This is also why most production design tokens converge on a 50–950 color scale with at least 9–11 stops: that range gives you backgrounds, borders, body text, and dark-mode surfaces without gaps in between.


Use the scale across Tailwind, Material, and custom themes


The output is structured to drop straight into the systems you already use:


    

  • Tailwind CSS — the standard 50→950 numeric scale per hue.
    • 

  • Material Design 2 — the 50→900 plus accent structure.
    • 

  • Bootstrap — the 100→900 tint/shade convention.
    • 

  • Plain CSS — --brand-50 through --brand-950 custom properties.
    • 



Copy a Tailwind config object, SCSS variables, or CSS variables in one click. If you already have a primary HEX from a logo, you can feed the same value into the Tailwind Scale Generator for a class-name-aware export, or audit the resulting stops against your UI with the Palette Contrast Grid.


From base color to design tokens


A typical workflow looks like this:


    

  1. Enter a base HEX (usually your 500 stop).
    2. 

  2. Review the generated 50–950 ramp and check contrast on each end.
    3. 

  3. Export to your framework of choice and wire the values to semantic aliases such as surface, border, and text-primary.
    4. 



If you need to push the palette further — extracting tints from imagery or shipping cross-format tokens — pair this generator with the Palette from Image tool and the Design Token Exporter for CSS, SCSS, and JSON output.


Built for real design-system work


Whether you're spinning up a brand palette, extending Tailwind with custom hues, or aligning a marketing site with a product UI, a fast tint and shade generator removes the guesswork from creating a coherent 11-step ramp. The math handles the perceptual heavy lifting; you focus on choosing the right base color.

                        

        

            
            Frequently Asked Questions