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.
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.
Color palettes, conversion and contrast
ColorBloom is a free toolkit for working with colour in the browser. Extract a palette from any image, generate one from a seed colour, convert between HEX, RGB, HSL and OKLCH, check contrast for accessibility, and export the result as CSS, Tailwind config or JSON. Everything runs on your device — images you drop in are never uploaded.
Extract a palette from an image
Drop in a photo or screenshot and ColorBloom pulls out its dominant colours using a local canvas, so you can build a palette that matches a brand, a mood board or a piece of artwork without any upload.
Convert and generate colours
Type a colour in any common format and see it instantly in HEX, RGB, HSL and the modern OKLCH space. Generate harmonious palettes from a single seed colour to kick-start a design, then copy individual values or the whole set.
Check contrast for accessibility
The WCAG contrast checker tells you whether a text and background pair meets accessibility standards (AA and AAA), helping keep your designs readable for everyone. When you are happy, export to CSS variables, a Tailwind palette or JSON.