Color tool directory
Free color tools for images, brands and product UI.
Every tool runs in your browser. Upload an image, pick a brand color, build a theme, or check a contrast pair. No account, no credits, and no image upload.
Extract
Extract colors from real images
Start with evidence: a photo, logo or product image. Pull the colors that are actually there, then remove the accidents.
Image to Color Palette Generator
PhotoColors extracts dominant colors from an image in your browser, then maps them into primary, secondary, accent and neutral roles. The image is never uploaded, and every palette includes WCAG contrast checks and developer exports.
Logo Color Extractor
A logo color extractor reads the pixels in a logo file and lists its dominant colors. Use a transparent PNG, ignore anti-aliased edge colors, and treat the strongest brand color as a starting point rather than a finished interface palette.
Color Palette From Photo
Choose a photo with a clear color story, upload it, and review the extracted dominant colors. A good photo palette captures the image's mood; a good interface palette also passes contrast checks and includes enough neutral separation.
AI Color Palette Generator: What It Can and Cannot Do
PhotoColors is not an AI image generator. It is a deterministic browser tool that extracts colors from an image and checks their contrast. That makes it reproducible and private, but it will not invent colors that are not in the source image.
Build
Build a usable color system
Turn a palette into semantic roles, light and dark themes, and a handoff that survives a real product.
Brand Color Picker
Use a brand color picker to choose an anchor color, then assign it to roles and test it against real text and surface pairs. A single HEX value is not a brand system; the roles and contrast checks are what make it usable.
Dark Mode Color Palette Generator
A dark mode palette needs a dark background, a slightly lighter surface, readable body text, a muted text color and an adjusted primary accent. Check each pair against WCAG, because a color that passes on white may fail on a dark surface.
shadcn Theme Generator
A shadcn theme is a set of CSS custom properties for light and dark modes. Generate them from a real palette, check the foreground pairs, and paste the variables into your global stylesheet.
Figma Color Tokens Generator
A Figma color token is a named color value, usually with a light and dark mode. Generate semantic names such as primary, surface and muted-text, then import the JSON into Figma variables or a token plugin.
Ship
Ship tokens to code
Generate the scales and formats a codebase actually consumes: Tailwind, shadcn, Figma JSON and OKLCH.
Tailwind Color Palette Generator
A Tailwind color scale is a family of steps from 50 (lightest) to 950 (darkest). Generate the ramp from a base color, then check that the text and surface steps you actually use pass contrast.
Color Shades Generator
A color shades generator creates lighter tints and darker shades of one base color. Use the ramp for surfaces, borders and states, then check the text pairs you actually ship.
OKLCH Color Palette Generator
OKLCH describes a color with lightness (L), chroma (C) and hue (H). Equal L steps look more evenly bright than equal HSL lightness steps, which makes OKLCH useful for systematic palettes and dark mode.
Check
Check contrast before launch
Measure text and background pairs against WCAG AA and AAA, then fix the pair without abandoning the brand.
Not sure where to start?
Start with the image you already have.
The homepage studio is the full workflow: upload a photo, get semantic roles, compare light and dark themes, and copy every export from one screen.