What exactly is PaletteForge?▼
PaletteForge is a free color extraction tool that turns any image into production-ready code. Upload a screenshot, mockup, or photo — get back organized color tokens for CSS, Tailwind, SCSS, Figma, and more. Think of it as Shazam, but for colors.
What are design tokens?▼
Design tokens are named variables that store design decisions. Instead of writing #3B82F6 everywhere, you use --color-primary. Change it once, update everywhere. This follows the DRY (Don't Repeat Yourself) principle and makes your codebase maintainable.
What do AAA, AA, and Fail badges mean?▼
These are WCAG accessibility ratings for text readability. AAA = Excellent contrast (≥7:1), readable by everyone. AA = Good contrast (≥4.5:1), suitable for most users. Fail = Poor contrast, text may be difficult to read. Always aim for AA or higher to ensure your website is accessible.
Why are there three token layers?▼
The three layers create a scalable design system: Primitive = raw color values (blue-500, gray-200). Semantic = purpose-based names (primary, error, success). Component = UI-specific tokens (button-bg, input-border). This structure lets you change themes by updating just the semantic layer.
What do the numbers 50, 100... 950 mean?▼
These are Tailwind-style color scales. 50 = lightest shade (almost white), 500 = base color, 950 = darkest shade (almost black). Use 50-200 for backgrounds, 500-600 for interactive elements, and 700-950 for text. This system ensures consistent color usage across your project.
What is color harmony?▼
Color harmony measures how well colors work together visually. Types include: Complementary (opposites like blue + orange), Analogous (neighbors like green, teal, blue), and Triadic (evenly spaced). Higher harmony scores mean your palette follows proven color theory principles.
Is my uploaded image private?▼
100% private. All processing happens entirely in your browser using the Canvas API. Your images are never uploaded to any server. We cannot see, store, or access your files. This is called client-side processing — your data stays on your device.
Which export format should I use?▼
Choose based on your stack: CSS Variables for vanilla projects, Tailwind for Tailwind CSS, SCSS for Sass projects, JSON for Style Dictionary, Figma for design handoff, and Tokens Studio for design token management. Beginners should start with CSS Variables.
What images work best?▼
Supports PNG, JPG, SVG, and WebP up to 10MB. Best results come from images with distinct, solid colors — website screenshots, logos, and UI mockups work great. Avoid images with heavy gradients or too many similar shades.
Any tips for better results?▼
Pro tips: 1) Use high-contrast images with distinct colors. 2) Crop out busy backgrounds before uploading. 3) Check the WCAG badges before using a color for text. 4) The tool extracts up to 8 colors — choose images where those colors matter most.
