Color Toolkit
Extract palettes from images, check accessibility contrast, convert formats, and fine-tune your web color schemes.
How to Use the Color Toolkit
Generate from Image
Click 'Browse' or drag an image. Dominant colors will be added.
Pick from Image
Click on the uploaded image preview to add a specific pixel's color.
Add Manually
Use the color picker or type a HEX code (e.g., `#ff5733`) and click "Add".
Manage Palette
Remove colors ('×'), edit names, and copy values (HEX, RGB, HSL).
Check Contrast
Enter foreground/background HEX. Instantly see ratio & WCAG compliance.
Generate Harmonies
Select base color & harmony type. Add generated colors ('+' or 'Add All').
Simulate Blindness
Choose a simulation type to see how your palette might appear.
Generate Gradient
Select 2+ colors, type & direction. Copy generated CSS.
Export Palette
Click the desired format button to download your colors.
1. Upload Image (Optional)
File being uploaded:
2. Add Colors Manually
3. Check Contrast
4. Generate Harmonies
5. Generate Gradient
6. Export Palette
Add colors to your palette to enable export options.
Your Palette
Your palette is empty.
Upload an image or add colors manually to start.
Color Blindness Simulation
What does this tool do?
The Color Toolkit helps streamline your color workflow from inspiration to implementation. Ideal for web designers, developers, and UI/UX professionals.
Color Extraction
Extract dominant colors from uploaded images or pick specific pixels with the eyedropper.
Contrast & Accessibility
Check contrast against WCAG (AA/AAA), get suggestions, and simulate color blindness.
Generation Tools
Generate harmonies (Complementary, Triadic, etc.) and CSS for gradients.
Manage & Export
Add colors manually, name palette items, copy values, and export as CSS, SCSS, JSON, or Tailwind config.
Best Practices
Accessibility First
Always check contrast (aim for AA/AAA). Use suggestions. Consider simulations and don't rely solely on color.
Palette Management
Give meaningful names to colors. Limit your palette size for cohesion (1-3 primary/secondary/accent).
Validation & Testing
Use simulations wisely as guides. Always test colors and gradients in your actual design context.
Frequently Asked Questions
-
You can upload common image formats like JPG, PNG, WEBP, GIF, and SVG. The tool will extract the most prominent colors.
-
The contrast ratio is calculated based on WCAG 2.1 guidelines, comparing the relative luminance of the foreground and background colors.
-
AA and AAA are WCAG conformance levels. AA requires a contrast ratio of at least 4.5:1 (or 3:1 for large text). AAA requires 7:1 (or 4.5:1 for large text). Meeting these levels ensures better readability for users with visual impairments.
-
The simulation applies mathematical filters to the colors to approximate how they might be perceived by individuals with different types of color vision deficiency (e.g., Deuteranopia, Protanopia, Tritanopia).
-
Export formats allow you to use your palette in different projects: CSS Variables for standard web projects, SCSS Variables for projects using Sass, Tailwind Config to integrate colors directly into your Tailwind CSS setup, and JSON for data sharing or use with other tools.
-
The tool extracts a limited number (typically 5-6) of the most dominant colors. Complex images, subtle gradients, or noisy backgrounds can influence the results. For precise colors, use the eyedropper tool (if available for the image) or add colors manually.
-
Tints are created by adding white to a base color, making it lighter. Shades are created by adding black, making it darker. This tool generates a range of tints and shades for selected palette colors.
