Color Shades Generator

Generate a full shade scale from any hex color. Export as CSS variables, Tailwind config, or design tokens.

HEX
R
G
B
ALGORITHM
CONTRAST SHIFT
0.50
SHADE COUNT
11
NAME
Display
Contrast checker (base color vs white & black)
Text
Text
Recently used
How to use
  1. Pick a base color using the color picker or type a hex value.
  2. Adjust the algorithm, contrast shift, and shade count to customize your palette.
  3. Copy individual shades or export the full palette as CSS, Tailwind, or design tokens.
Frequently asked questions
How do I generate color shades from a hex code?
Enter your hex color code (e.g., #2d6ef6) and the tool instantly generates a full shade scale from 50 (lightest) to 950 (darkest). You can adjust the number of shades, contrast shift, and algorithm to fine-tune the output.
What is the difference between OKLCH and HSL shade generation?
OKLCH (Oklab Lightness, Chroma, Hue) produces perceptually uniform shades — equal steps in lightness look equally different to the human eye. HSL varies lightness linearly, which can produce uneven-looking results, especially for yellows and cyans. OKLCH is recommended for design systems.
How do I use the generated palette in Tailwind CSS?
Select the "Tailwind v3" or "Tailwind v4" export tab and copy the generated code. For v3, paste the object into your tailwind.config.js under theme.extend.colors. For v4, paste the @theme block into your CSS file.
What are design tokens and how do I export them?
Design tokens are a standardized JSON format for storing design decisions like colors. Select the "Design Tokens" export tab to get your palette in the W3C Design Tokens format, which can be used with tools like Style Dictionary, Figma Tokens, or any token-based design system.
 Last updated 
Powered by maratool