Language:English
Your color playground

One color.Your next palette.

Find colors that work together. See them in action, check contrast and make them yours.

From an image

Free to use. Works in your browser.

Generated palette

Click any color to copy its HEX value. The shade scale is useful for buttons, states, cards and UI surfaces.

Saved palettes stay on this device.

Shade scale

Color inspector

See the current base color in HEX, RGB, HSL and OKLCH formats. Copy any value for implementation and documentation.

#E24B4A

Color vision preview

Approximate simulations for common color vision deficiencies. These simulations are approximate previews intended for design checks, not medical diagnosis.

WCAG contrast checker

AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1. Use these thresholds as a practical baseline for accessible interface text.

Manual check

Ratio
--
Readable interface text

Best combinations

Automatic checks against white, black and palette colors.

Export tokens

Copy CSS variables, Tailwind config, SCSS, JSON tokens and downloadable SVG/PNG palette cards.


      
      
      
      

        

          
Download palette card

          
Export a shareable 1200×630 palette card as PNG or SVG. Useful for docs, social previews, Pinterest pins and brand boards.

          
Generated locally in the browser. Humanity briefly avoided a server call.

        

        

          
          
          
        

      

    

    

      
Extract colors from image
Drop a PNG, JPG or WebP. The image is processed locally in your browser.

      
      
      

    

    

      
Gradient generator
Create CSS gradients from the current palette.

      

      

      

    

    

      
UI preview
A tiny interface mockup so the palette is not just pretty squares, the usual trap where design goes to look productive.

      

    


    

      
Production checklist
A small checklist for using the palette in a real website instead of a Dribbble fantasy nobody can read.

      

        
    
          
  • Use the shade marked Original as your brand color. Its stop depends on the input color; choose hover and active colors by contrast, rather than assuming 500/600/700.
    • 
          
  • Use 50/100 shades for surfaces, not saturated colors behind paragraphs.
    • 
          
  • Check body text at 4.5:1 minimum before shipping.
    • 
          
  • Test important UI states: hover, disabled, success, warning and error.
    • 
          
  • Keep one strong accent. Five accents are not a brand system, they are confetti with taxes.
    • 
        

      

    


    

      
Color tools and guides
Focused pages for contrast, Tailwind palettes, CSS variables, image extraction and gradients.

      

        WCAG contrast checkerCheck accessible text/background combinations.
        Tailwind color generatorCreate a 50–950 shade scale for Tailwind.
        CSS color variablesExport design tokens as CSS variables.
        Image color extractorExtract colors from images locally.
        CSS gradient generatorBuild gradients from your current palette.
        Website color scheme generatorPlan primary, neutral and accent colors for real website sections.
        Brand color palette generatorTurn a brand color into UI-ready palette roles.
        Color converterConvert HEX, RGB, HSL and OKLCH values.
        Color shades generatorCreate a 50-950 shade scale from one base color.
        Color harmony generatorGenerate complementary, analogous and triadic palettes.
        Dark mode color paletteBuild readable dark surfaces, borders and accents.
        shadcn theme generatorMap palette values to semantic CSS variables.
        Design tokens generatorExport color tokens for design systems and frontend teams.
        Color blindness simulatorPreview palette risk for common color vision deficiencies.
        Chart color palette generatorCreate distinct colors for dashboards and data visualization.
        Accessible Color Palette GeneratorGenerate palettes where contrast is checked automatically. Every color combination is tested against WCAG AA and AAA thresholds before you export.
        Color Palette GeneratorPick one base color and generate a harmonious palette using complementary, analogous, triadic or monochromatic rules. Export to CSS, Tailwind, SCSS or JSON.
      

    

    

      
How to create an accessible color palette
Start from one brand color, pick a harmony, verify text contrast, then export tokens. For real products, use bright colors for accents and neutral shades for surfaces.

      

        
Complementary vs analogous?
Complementary palettes use opposite colors for strong contrast. Analogous palettes use nearby hues for softer, calmer interfaces.

        
Why does contrast matter?
Low contrast text looks elegant in mockups and terrible for actual humans. Aim for WCAG AA at minimum for body text.

        
Can I use this for Tailwind?
Yes. The Tailwind export gives a primary shade scale from 50 to 950 plus an accent color when available.

        
Are images uploaded?
No. Color extraction uses canvas in your browser. Nothing is sent anywhere.