Chromoforge
Color tools
Start with a color or an image. Generate shades, check a specific contrast pair, then export colors for your project.
Use a tool
PaletteStart with a color or an image. Generate shades, check a specific contrast pair, then export colors for your project.Image Color ExtractorExtract a dominant color palette from PNG, JPG or WebP images. Processed locally in your browser — nothing uploaded.Color Shades GeneratorGenerate a 50-950 shade scale from one base color for Tailwind-style UI surfaces, borders, hover states and dark mode.WCAG Contrast CheckerCheck whether text and background colors meet WCAG AA and AAA contrast ratios. Free, instant, no upload required.
Practical guides
Accessible Color Palette GeneratorGenerate a palette in the main tool and check the text/background pairs you intend to use.Brand Color Palette GeneratorBuild a brand color palette from one logo or primary color, then export UI-ready CSS variables and design tokens.Chart Color Palette GeneratorGenerate distinct chart colors for dashboards and data visualization, then check contrast and color blindness risk.Color Blindness SimulatorPreview palettes for deuteranopia, protanopia and tritanopia to catch risky color combinations before shipping.Color Converter: HEX, RGB, HSL and OKLCHEnter HEX, RGB or HSL in the main tool, then copy HEX, RGB, HSL and OKLCH values from the inspector.Color Harmony GeneratorGenerate complementary, analogous, triadic, split-complementary, tetradic and monochromatic color harmonies.Color Palette GeneratorGenerate harmonious color palettes from one base color using complementary, analogous, triadic and monochromatic harmony rules.Color Theory GuideA practical guide to color harmony, WCAG contrast and UI palette usage. Complementary, analogous, triadic rules explained with real design examples.CSS Color Variables GeneratorGenerate CSS custom properties from a color palette and copy them directly into your stylesheet or tokens file.Dark Mode Color Palette GeneratorCreate dark mode palettes with readable foregrounds, muted surfaces, borders and accessible accent colors.Design Tokens GeneratorCreate color design tokens from a palette and export CSS variables, SCSS maps, JSON and Tailwind-ready values.CSS Gradient GeneratorCreate linear, radial and conic CSS gradients from generated color palettes. Preview live and copy the CSS in one click.shadcn Theme Mapping GuideGenerate a palette in the main tool, then manually assign its colors to the semantic variables used by your shadcn project.Tailwind Color GeneratorGenerate an 11-step shade scale from 50 to 950 in the main tool and export a Tailwind v3 configuration..Website Color Scheme GeneratorCreate a website color scheme with primary, neutral and accent colors for hero sections, buttons, cards and forms.