Color shades generator
Turn one brand or interface color into a full palette of lighter tints and darker shades. Designers and front end developers use it to build color scales for buttons, backgrounds and borders.
- Runs in your browser
- Free, no account needed
- Copy or download the result
Result
Example
#3b82f6
Base: #3b82f6 9 tints and 9 shades, lightest to darkest: Name Hex Mix 50 #ebf3fe 90% white 100 #d8e6fd 80% white 150 #c4dafc 70% white 200 #b1cdfb 60% white 250 #9dc1fb 50% white 300 #89b4fa 40% white 350 #76a8f9 30% white 400 #629bf8 20% white 450 #4f8ff7 10% white 500 #3b82f6 base color 550 #3575dd 10% black 600 #2f68c5 20% black 650 #295bac 30% black 700 #234e94 40% black 750 #1e417b 50% black 800 #183462 60% black 850 #12274a 70% black 900 #0c1a31 80% black 950 #060d19 90% black CSS custom properties: :root { --color-50: #ebf3fe; --color-100: #d8e6fd; --color-150: #c4dafc; --color-200: #b1cdfb; --color-250: #9dc1fb; --color-300: #89b4fa; --color-350: #76a8f9; --color-400: #629bf8; --color-450: #4f8ff7; --color-500: #3b82f6; --color-550: #3575dd; --color-600: #2f68c5; --color-650: #295bac; --color-700: #234e94; --color-750: #1e417b; --color-800: #183462; --color-850: #12274a; --color-900: #0c1a31; --color-950: #060d19; }
How to use the color shades generator
- Type a base color in the box, such as #3b82f6 or royalblue.
- Set Tints and shades each, then choose CSS variable names and a Variable prefix.
- Press Run to see the table and the CSS custom properties block.
- Press Copy result or Download to paste the variables into your stylesheet.
How it works
Each tint mixes the base color with white, and each shade mixes it with black, channel by channel in plain sRGB.
For a count of n, the mix amounts are 1/(n+1), 2/(n+1) and so on, so the default of 9 gives steps of 10% and never reaches pure white or black.
Scale names put the base at 500, tints below it and shades above it, so 9 steps produce --color-50 to --color-950. Step names use tint-1, base and shade-1 instead.
The count can be 1 to 20. Transparent base colors are rejected, and the prefix must start with a letter and use only letters, digits and hyphens.
Everything runs in your browser. Your input is not uploaded or stored.
Questions and answers
What is the difference between a tint and a shade?
A tint is a color mixed with white, so it gets lighter. A shade is a color mixed with black, so it gets darker.
How do I use the CSS output?
Paste the :root block into your stylesheet, then use a value with var(), such as background: var(--color-100);.
Can I change the variable names?
Yes. Set Variable prefix to a word such as brand to get --brand-500, or switch CSS variable names to Steps for numbered tints and shades.