CSS Color Extractor - Online Find All Hex in Stylesheet
Paste a stylesheet and extract every unique color (hex, rgb, hsl) into a palette. Swatches displayed. Copy as JSON.
UD5 Toolkit
Extract & grab color palettes from CSS code or live websites
Extracted colors will appear here
Paste CSS, enter a URL, or upload a file to get started
--primary-color: #3b82f6; are fully parsed. The color values within variable declarations are extracted just like any other CSS property value. This makes the tool excellent for analyzing modern design systems that rely heavily on CSS variables.Paste a stylesheet and extract every unique color (hex, rgb, hsl) into a palette. Swatches displayed. Copy as JSON.
Paste a list of hex colors and generate CSS custom properties for them. Create your design token file instantly.
Upload an image and instantly get a 6‑color palette with the most dominant shades. Click to copy hex codes. Canvas‑based.
Grid of all 148 named CSS colors. Hover to see detail, click to copy the name or hex. Essential frontend reference.
Pick a base color and generate a full palette of 10 shades (50 to 900) like Tailwind CSS. Copy as hex or hsl.
Type a CSS color name like 'tomato' or 'mediumseagreen' and instantly get its hex code and preview. Complete named colors list.
A complete, searchable list of all 140+ named HTML/CSS colors with their hex codes and color previews. Click to copy code. Essential web reference.
Design a light and dark theme by picking colors for backgrounds, text, and links. Get the CSS for both themes. Local.
Type a word like 'sunset' or 'calm' and generate a color palette inspired by that mood. Simple associative mapping.
Dynamically blend two colors using the CSS color‑mix() function in different color spaces. Copy the exact CSS snippet. No JS required.
Pick a color in the Display‑P3 space and get the CSS color() function. See the difference from sRGB. For modern design.
Browse every Tailwind default color palette side by side. Click any shade to copy the hex or class. For rapid design.
Use <input type='color'> and see its change events and value in hex. Understand the native color picker. Quick demo.
See the Pantone Colors of the Year and popular palettes from past years. Get hex codes. Design inspiration.
Convert RGB and RGBA color values to their HEX or HEX+alpha representation. Live preview and copy CSS color strings instantly.
Generate single random colors or full palettes. Displays hex, RGB, and copy on click. Great for design inspiration.
Find the official name of any hex color from the extended color dictionary. Search by name to get the hex code. Handy for CSS and design language.
Style an `<input type='range'>` with custom track and thumb. Cross‑browser CSS. Preview and copy the code.
Test the upcoming contrast‑color() CSS function. Get white or black automatically for a given background. See it live.
Set a custom accent color for checkboxes, radios, range, and progress. See the browser’s rendering. Copy the CSS.
Enter a palette of colors and see a grid showing whether each foreground/background pair passes AA or AAA contrast. Must for designers.
Quickly convert HEX color codes to RGB values and vice versa. See the color preview. Indispensable for web developers and graphic designers.
Convert screen RGB colors to print-ready CMYK values. Understand color shifts before printing. Ideal for graphic designers preparing artwork for press.
Select a color and see which cocktails match it roughly. Blue for Blue Lagoon, red for Negroni. Fun bar guide.
Paste body text and test different font/background combos. See an actual passage rendered, not just a ratio. True feel for legibility.
Use the light‑dark() CSS function to change colors based on color scheme. Build a simple dark mode toggle with one property.
Match gap size around doors/windows to the correct type of weather stripping (foam, V-strip, door sweep). Save energy.
Input RGB values and see the HSL equivalent with a color preview. Understand lightness and saturation. Local.
Classic HSV color wheel with sliders. See hex, RGB, and HSL equivalents. Intuitive for artists. No server interaction.
Experiment with CSS container queries. Resize a container and see the styles change according to its size, not the viewport. Learn the new spec.