Generator Tools
Color Shades and Tints Generator
Generate shades and tints from any hex color. Live HSL math, copy-ready hex, RGB, HSL, and CSS variables. No signup, no upload.
Tints
Lighter variants. Index 0 is the base color, higher numbers approach white.
Shades
Darker variants. Index 0 is the base color, higher numbers approach black.
CSS variables
Drop into your stylesheet. With 5 steps in Shades + Tints mode the prefix follows the common 50-900 numeric scale.
:root {
--brand-50: #f3fbfe;
--brand-100: #b8e6fb;
--brand-200: #7dd1f7;
--brand-300: #42bcf4;
--brand-400: #0ea5e9;
--brand-500: #0b7eb2;
--brand-600: #07577a;
--brand-700: #042f43;
--brand-800: #01080c;
}Hex list
Plain text labels and hex codes for use in design files, docs, or chat.
Shades:
Base: #0ea5e9
Shade 1: #0b7eb2
Shade 2: #07577a
Shade 3: #042f43
Shade 4: #01080c
Tints:
Base: #0ea5e9
Tint 1: #42bcf4
Tint 2: #7dd1f7
Tint 3: #b8e6fb
Tint 4: #f3fbfeHow to use
- Type a hex color, click a preset, or use the color picker to set the base color.
- Choose Shades + Tints, Shades only, or Tints only, and pick how many steps each ramp should have.
- Adjust strength to decide how close the last step gets to pure black or white. Optionally tick Also show tones for a desaturated ramp.
- Set the CSS variable prefix (defaults to brand). With 5 steps in Shades + Tints mode the export uses the 50 to 900 numeric scale.
- Copy individual swatches with the per-swatch Copy button, or grab the full CSS variables block, the labelled hex list, or the inline comma-separated list.
About this tool
Color Shades and Tints Generator turns a single hex color into a full ramp of darker shades, lighter tints, and optional desaturated tones. Pick a base color with the picker or paste a 3 or 6 digit hex value, then control how many steps each ramp has (3 to 12) and how close the final entry gets to pure black, pure white, or pure gray. With the default 5 steps in Shades + Tints mode the exported CSS variables follow the conventional 50 to 900 numeric scale used by Tailwind, Material, and most modern design systems, so you can drop the block straight into a stylesheet. Each swatch shows its hex, RGB, and HSL values, plus a per-swatch copy button. The math runs in HSL: hue and saturation stay fixed, lightness interpolates linearly toward the extreme. Tones are generated by interpolating saturation toward zero while keeping lightness, which is useful for muted UI surfaces and disabled states. Everything happens in your browser, so the colors you experiment with are never uploaded. The tool also picks a readable label color (black or white) for each swatch using the W3C-recommended luminance threshold, so you can preview text on each step without hopping into the contrast checker. Useful for building a brand palette, generating hover and active states, picking surface tints for cards, and turning a single accent into a full UI scale.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
Color Palette Generator
Build complementary, analogous, triadic, and monochromatic color schemes from any HEX.
Open tool
ConverterHEX to RGB Converter
Convert HEX, RGB, RGBA, and HSL with a live preview.
Open tool
GeneratorColor Mixer
Blend two colors with OKLCH, LAB, HSL, or sRGB and copy the steps.
Open tool
ConverterColor Format Converter
Convert any CSS color to HEX, RGB, HSL, HWB, CMYK, and named values at once.
Open tool
GeneratorCSS Gradient Generator
Linear, radial, and conic gradients with multi-stop editor and live preview.
Open tool
SEOColor Contrast Checker
Check WCAG AA, AAA, and UI contrast ratios with live preview and pass or fail badges.
Open tool