Color Shades Generator
Pick any base color and instantly generate a 10-step palette (50–900) using HSL lightness scaling — just like Tailwind CSS. Copy individual HEX values or export the full CSS custom property block.
:root {
--color-primary-50: #f1f1fe;
--color-primary-100: #dedffc;
--color-primary-200: #b9baf9;
--color-primary-300: #8588f4;
--color-primary-400: #484cef;
--color-primary-500: #1418e1;
--color-primary-600: #1013ad;
--color-primary-700: #0b0e7e;
--color-primary-800: #080954;
--color-primary-900: #04052f;
}How shades are generated
The tool converts your base color to HSL, preserves the hue and saturation, then applies a fixed lightness curve across 10 steps — from 97% lightness at shade 50 to 10% lightness at shade 900. This matches the visual weight distribution used by Tailwind CSS's default palette.
CSS custom properties
Each shade is mapped to a CSS variable like --color-primary-500. Name the prefix whatever you like, then paste the generated :root block directly into your stylesheet.
Clicking shades
Click any shade row to copy its HEX value to the clipboard. The "Copy all" button exports the full CSS :root block at once.
Related Tools
Color Gradient Palette Generator
Generate smooth RGB gradients between two colors with 3–20 steps. Copy HEX swatches, CSS linear-gradient, or a Tailwind array.
Color Contrast Analyzer
Check WCAG 2.1 contrast ratios for any color pair. Pass/fail for AA and AAA levels — plus automatic suggestions and live text preview.
Color Blindness Simulator
Upload any image to see how it appears with Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.
Online Color Picker — HEX, RGB & HSL
Pick any color visually with a canvas-based HSV picker. Export as HEX, RGB, or HSL.
Color Wheel Online — Interactive HSL Color Picker
Interactive HSL color wheel. Click any point to pick its hue and saturation.
Image Color Picker — Sample Colors from Photos
Upload any image and click to sample colors directly from pixels.
HEX to RGB Color Converter
Convert HEX color codes to RGB, HSL, HSV, and CMYK values instantly.
RGB to HEX Color Converter
Set R, G, B values with sliders or inputs and get the HEX, HSL output.
Color Contrast Checker — WCAG AA & AAA Compliance
Check WCAG 2.1 color contrast ratio for AA and AAA compliance. Live text preview.
Color Mixer & Gradient Generator
Blend two colors together with a ratio slider. Get a full gradient palette.
CSS Color Names — All 148 Named Colors
Browse all 148 CSS named colors with their HEX and RGB values.
Material Design Color Chart & Palette
Material Design color palette — 19 hue families × 10 shades each.
Minecraft Color Codes — All § Codes with Preview & Copy
All 16 Minecraft color codes and 6 formatting codes. Live preview, click-to-copy HEX, MOTD strings, and Bukkit/Paper API enum reference.
Roblox Color Codes — All BrickColor IDs with Hex & RGB
Complete list of all Roblox BrickColor codes with color IDs, HEX values, and RGB — copy instantly for use in Lua scripts and Studio.
Color Palette Generator
Generate harmonious color palettes from a base color using complementary, triadic, and analogous schemes.
Color Format Converter
Convert colors between HEX, RGB, HSL, HSV, CMYK, and CSS named color formats instantly.