🎨 TintGrab

TintGrab extracts and analyzes color codes from websites and CSS files, converting them to HEX format for easy use in your design projects. It identifies colors in various formats including HEX, RGB, HSL, OKLCH, and CSS variables.

URL Method

1. Enter a complete website URL in the input field (e.g., tailwindcss.com/docs/colors)
2. Click "Analyze Colors" to start the extraction process
3. TintGrab will fetch the website content and extract all color codes it can find

Note: Some websites with complex architectures, frameworks like React, or security restrictions may not return complete results. In these cases, try the CSS method for more accurate results.

CSS Method

1. Switch to the "Paste CSS" tab
2. Either paste CSS/HTML code into the text area or upload a CSS file using the "Upload CSS File" button
3. Click "Analyze Colors" to extract colors from the provided code

Finding CSS code:

• View Page Source: Right-click on a webpage and select "View Page Source" (or press Ctrl+U), then copy the HTML which includes inline styles
• Developer Tools: Open browser developer tools (F12 or right-click and select "Inspect"), navigate to the "Sources" or "Elements" tab to find CSS files
• For Tailwind: Check the styles folder in Developer Tools or look for compiled CSS files

Working with Color Results

• Search: Use the search box to find specific colors by name, value, or format
• Filter: Filter colors by type (HEX, RGB, HSL, etc.)
• Group: Group colors by format, color family, or shade
• Sort: Sort colors by name, HEX value, or frequency of use
• Copy: Click on any color to copy its HEX code to your clipboard

SvgGrab allows you to extract SVG elements from websites for use in design tools like Figma.

How to Use SvgGrab

1. Navigate to the SvgGrab page from the homepage
2. Enter a website URL or paste HTML content containing SVG elements
3. Click "Analyze SVGs" to extract all SVG elements from the content
4. Download individual SVGs or select multiple SVGs to download in bulk
5. Copy individual SVG markup for use in Figma or other design tools

Working with SVG Results

• Search: Use the search box to find specific SVGs by content or attributes
• Select: Use checkboxes to select one or multiple SVGs for bulk download
• Download: Download individual SVGs or all selected SVGs at once
• Copy: Copy SVG markup directly to your clipboard for pasting into design tools

Note: Like with color extraction, some websites with complex architectures or security restrictions may not return complete results. In these cases, try pasting the HTML directly.

• For websites using CSS frameworks like Tailwind, try to find the compiled CSS rather than using the URL method
• If a website uses CSS variables, TintGrab will attempt to resolve them to their actual color values
• For complex websites, try analyzing specific CSS files rather than the entire site
• Some colors might appear in different formats (HEX, RGB, HSL) but represent the same color
• For SVGs, websites that dynamically generate SVGs with JavaScript might not show all available SVGs
• Try inspecting specific SVG elements in Developer Tools and copying their HTML directly