Forge
All tools
Color Palette Generator
Forge / Color Palette

Color Palette Generator

Turn any base color into a full, accessible palette with a live WCAG contrast checker. Export to CSS variables, Tailwind config or JSON.

⚡ Instant results🔒 100% private✓ Always free

Base color

Hue · saturation · lightness ramp

Accepts 3- or 6-digit hex. Click any swatch below to copy its value.

Quick presets

Generated palette

11 steps · 50 → 950

Color harmonies

Derived by rotating the base hue while keeping saturation and lightness. Click a chip to copy.

WCAG contrast checker

AA
Aa The quick brown fox jumps over the lazy dog — readable text on this background.
0.00 :1 contrast ratio
AA Normal AA Large AAA Normal AAA Large

Thresholds — AA Normal ≥ 4.5, AA Large ≥ 3, AAA Normal ≥ 7, AAA Large ≥ 4.5.

Export palette

CSS variables 

      
Drop into your stylesheet under :root.

    

  







About this tool


This free online tool runs entirely in your browser. Your data never leaves your device — there is no server processing, no tracking, and no signup required. Use it as often as you need, on any device.




  
  

    

      
 · 

    

    
How This Calculator Works

    

      
This tool generates color palettes using HSL (Hue, Saturation, Lightness) color space manipulation and checks contrast ratios against the WCAG 2.1 standard. Complementary colors are generated by shifting hue by 180°, analogous by ±30°, and triadic by ±120°. Contrast ratios are calculated using the relative luminance formula from the W3C: L = 0.2126×R + 0.7152×G + 0.0722×B (with gamma-corrected values). All processing is client-side.

    

  

  

    
Frequently Asked Questions

    

      

        
What contrast ratio do I need for WCAG compliance?

        

          
WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA requires 7:1 for normal text. Non-text elements (icons, borders) need 3:1.

        

      

      

        
What is the difference between RGB, HSL, and HEX?

        

          
HEX (#FF5733) is RGB in hexadecimal — the most common in web design. RGB defines red, green, blue values (0–255). HSL (Hue 0–360°, Saturation %, Lightness %) is more intuitive for creating palettes because you adjust one property at a time.

        

      

      

        
How do I generate a consistent brand palette?

        

          
Start with one base color, then use the 60-30-10 rule: 60% dominant color (backgrounds), 30% secondary color (cards, sidebars), 10% accent color (buttons, links). Ensure all combinations meet WCAG contrast requirements.

        

      

    

  

  

    
Sources & References

    

      
    

  

  


Explore more free tools
All calculators are free, private, and work instantly — no signup, no data collection.
Browse all tools →