ColorTouch AI Documentation
Getting Started
ColorTouch AI is a powerful Chrome extension that helps designers and marketers extract and analyze color palettes from websites. With its AI-powered color extraction algorithm, ColorTouch AI can identify the most important brand colors, including subtle background colors and logo colors.
Color Extraction
Extract color palettes from any website with a single click.
Logo Detection
Automatically detect and extract colors from website logos.
Local Storage
Save your favorite color palettes for future reference.
Multiple Export Options
Export colors in CSS, SVG, Adobe, and other formats.
Installation
To install ColorTouch AI, follow these simple steps:
- Visit the Chrome Web Store.
- Search for "ColorTouch AI" or use our direct link.
- Click the "Add to Chrome" button.
- Confirm the installation when prompted.
- Once installed, you'll see the ColorTouch AI icon in your browser's toolbar.
Note: ColorTouch AI requires Chrome version 88 or later. Make sure your browser is up to date for the best experience.
To extract colors from a website:
- Navigate to the website you want to analyze.
- Click the ColorTouch AI icon in your browser toolbar to open the extension popup.
- Click the "Create Palette from Current Tab" button.
- Wait a few seconds while ColorTouch AI analyzes the page and extracts the most important colors.
- The extracted color palette will appear in the extension popup, showing the primary, secondary, tertiary, quaternary, and quinary colors.
Tip: For the best results, extract colors from the homepage or main landing page of a website, as these typically showcase the brand's primary colors.
Logo Color Detection
ColorTouch AI can automatically detect and extract colors from website logos:
- Navigate to a website with a visible logo.
- Open the ColorTouch AI extension popup.
- Click the "Extract Logo Colors" button in the Logo Color Analysis section.
- The extension will attempt to detect the logo on the page and extract its colors.
- If successful, you'll see a preview of the detected logo and its color palette.
- Click "Use These Colors" to add the logo colors to your main color palette.
Note: Logo detection works best on websites where the logo is clearly visible and not part of a complex background. Some websites may use image formats or techniques that make logo detection challenging.
Saving Color Palettes
To save a color palette for future reference:
- After extracting colors from a website, click the "Save Palette" button at the bottom of the color palette section.
- Enter a name for the brand or website in the "My Brand" field at the top of the Brand Identity section.
- Click "Save Current Colors" to save the palette.
- Saved palettes can be accessed by clicking the "Saved Brands" tab at the top of the extension popup.
Exporting Colors
ColorTouch AI allows you to export colors in various formats:
- Extract or load a color palette.
- In the "Export Palette" section, choose one of the following export options:
- CSS: Export as CSS variables or color declarations.
- SVG: Export as SVG color definitions.
- Adobe: Export in Adobe Swatch Exchange (ASE) format.
- Art Palette: Export to Google Art Palette.
- Coolors: Export to Coolors.co for further refinement.
- The exported code or file will be copied to your clipboard or downloaded, depending on the format.
Color Usage Guidelines
ColorTouch AI provides guidelines for using the extracted colors effectively:
- After extracting colors, click the "Usage Guide" button in the Brand Identity section.
- The Color Usage Guidelines panel will appear, showing recommended uses for each color in the palette:
- Primary: Main brand elements, CTAs, and key interactive elements.
- Secondary: Supporting elements, highlights, and secondary actions.
- Tertiary: Accents, backgrounds, and subtle visual elements.
- Quaternary: Specialized UI elements and additional accents.
- Quinary: Fine details, borders, and specialized components.
Important: When using extracted colors, especially for commercial purposes, be mindful of intellectual property considerations. See our Disclaimer for more information.
Troubleshooting
If you encounter issues with ColorTouch AI, try these troubleshooting steps:
Colors Not Extracting
- Make sure you're on a fully loaded webpage.
- Try refreshing the page and attempting extraction again.
- Some websites with complex layouts or dynamic content may be challenging for color extraction.
Logo Detection Issues
- Logo detection works best on websites where the logo is clearly visible and not part of a complex background.
- If logo detection fails, you can still manually extract colors from the entire page.
Extension Not Responding
- Try closing and reopening the extension popup.
- Refresh the webpage you're trying to analyze.
- Restart your browser if the issue persists.
- Check if your Chrome browser is up to date.
Frequently Asked Questions
Is my data safe with ColorTouch AI?
Yes, ColorTouch AI processes all data locally on your device. We don't collect personal information or browsing history. See our Privacy Policy for more details.
Can I use extracted colors for commercial projects?
While colors themselves are generally not protected by copyright, specific color combinations may be part of a brand's identity. For commercial use, we recommend consulting our Disclaimer and considering intellectual property implications.
How accurate is the color extraction?
ColorTouch AI uses advanced algorithms to identify the most important colors on a webpage, including subtle background colors and logo colors. However, the accuracy may vary depending on the complexity of the website design.
Can I edit the extracted colors?
Yes, you can manually adjust any color in the palette by clicking on the color picker next to each color swatch.
Is there a limit to how many palettes I can save?
ColorTouch AI stores palettes in your browser's local storage, which has a limited capacity. Most users can save dozens of palettes without issues, but this may vary depending on your browser configuration.
← Back to Home
