ColorBloom
Color toolkit

Build palettes that actually work

Extract colors from an image, generate harmonies, test contrast and export clean CSS. Everything stays on your device.

Palette

Generator

Image

Extract colors

Upload an image to pull its dominant colors.

Convert

Color values

#0f766e Click any swatch to inspect it.
Accessibility

Contrast checker

Readable text preview Small text, UI labels and buttons should pass AA.
Gradient

CSS gradient


        


        

          

            

              Export
              
Palette code

            

            
          

          

            
            
            
          

          

        

      


      

        Guide
        
A practical color workflow

        
Start with a seed color or extract a palette from a product screenshot, artwork or photo. ColorBloom converts each color into formats developers and designers actually paste into tools.

        
Use the contrast checker before shipping text over a color. WCAG AA is the practical baseline for body text, while AAA is a stronger target for important UI labels.

        
For interface work, separate roles instead of only collecting pretty colors: primary action, accent, background, surface, border, text and muted text. A balanced palette usually needs neutrals as much as vivid colors.

        
After extracting colors from an image, click each swatch to inspect HEX, RGB, HSL and OKLCH values. Export CSS variables when you want design tokens, Tailwind colors for config work, or JSON when you want to move the palette into another tool.

      


      

        FAQ
        
Frequently asked questions

        
Is the image uploaded?
No. The image is decoded by your browser and sampled on a local canvas. ColorBloom has no upload step.

        
What contrast formula is used?
The checker uses the WCAG relative luminance ratio. It reports AA and AAA results for normal and large text.

        
Can I use the generated colors commercially?
Yes. The generated values are just color codes. Copy, export and adapt them for your own projects.

        
Why do extracted colors differ from what I see?
The extractor samples many pixels and groups similar colors. It avoids some near-white background noise, so the result is a practical palette rather than a perfect pixel inventory.

        
What is OKLCH useful for?
OKLCH separates lightness, chroma and hue in a way that often feels more predictable for UI color systems. It is helpful when creating lighter, darker or more saturated variants.

        
Which export format should I use?
Use CSS variables for regular websites, Tailwind when you are configuring a Tailwind theme, and JSON when you want to save or pass the palette to another app.