Loading color tools…
Loading color tools…
Loading color tools…
Generate a complete tint and shade scale from any base color. Perfect for building design system palettes.
:root {
--shade-0: #000000;
--shade-1: #04122f;
--shade-2: #09235d;
--shade-3: #0d358c;
--shade-4: #1147bb;
--shade-5: #1659e9;
--shade-6: #447aee;
--shade-7: #739bf2;
--shade-8: #a2bcf6;
--shade-9: #d0defb;
--shade-10: #ffffff;
}Pick any color and instantly get its HEX, RGB, HSL, and CMYK values
Generate beautiful multi-color palettes from a single seed color
Create CSS linear, radial, and conic gradients with live preview and code output
Upload an image and extract its dominant colors as a palette
Pick a base color
Use the color picker or type a HEX code as your base.
Choose the number of steps
Select 7, 9, 11, or 13 steps to control the granularity of the shade range.
Review the shade strip
Shades are shown from darkest (near black) to lightest (near white) with readable HEX labels.
Copy individual shades
Click any copy button to grab a specific shade's HEX code.
Export CSS variables
Copy the :root block to use all shades as CSS custom properties in your project.