Color Swatch to CSS - Online Palette to Variables
Paste a list of hex colors and generate CSS custom properties for them. Create your design token file instantly.
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 list of hex colors and generate CSS custom properties for them. Create your design token file instantly.
Paste a stylesheet and extract every unique color (hex, rgb, hsl) into a palette. Swatches displayed. Copy as JSON.
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.
Select emotions (calm, energetic, sad) and generate a harmonious color palette that reflects the mood.
Write modern CSS color functions like oklch(), lab(), hwb() and see the rendered color with fallback. Copy compatible code.
Mix and save colors using a color picker. Drag to reorder. Export as CSS variables or hex list.
Generate a range of tints and shades from a single hex color. Ideal for data visualization, UI design systems, and Tailwind custom palette creation. Local tool.
Pick a source color and generate a complete M3 tonal palette with light/dark schemes. Export as CSS custom properties.
Type a CSS color name like 'tomato' or 'mediumseagreen' and instantly get its hex code and preview. Complete named colors list.
Customize Bootstrap 5 variables visually. See the live preview. Download the generated SCSS or CSS file.
Design a light and dark theme by picking colors for backgrounds, text, and links. Get the CSS for both themes. Local.
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.
Dynamically blend two colors using the CSS color‑mix() function in different color spaces. Copy the exact CSS snippet. No JS required.
See the Pantone Colors of the Year and popular palettes from past years. Get hex codes. Design inspiration.
Enter a color palette and see how it looks for different types of color vision deficiency. Get warnings on conflicting colors.
Paste your CSS and get a sorted list of all custom properties defined under :root with their values. Quick audit.
Discover beautiful color palettes for your projects. Generate random, complementary, or trendy schemes and copy hex codes. Useful for designers and developers.
Build a palette and simulate how it appears to various color deficiencies. Also generate pre-vetted accessible palettes. Local processing.
Start with a base color and generate an extended palette where every shade contrasts properly with white and black. Export tokens.
Paste hex colors, generate a contrast matrix against each other. Identify failing pairs for WCAG.
Get a beautiful, hand‑picked color combination instead of purely random. Each palette has a name and copyable hex codes.
Enter color in any CSS format and see all other representations. Live preview. Swatch history.
Convert RGB and RGBA color values to their HEX or HEX+alpha representation. Live preview and copy CSS color strings instantly.
Pick a color in the Display‑P3 space and get the CSS color() function. See the difference from sRGB. For modern design.
Generate single random colors or full palettes. Displays hex, RGB, and copy on click. Great for design inspiration.
Test the upcoming contrast‑color() CSS function. Get white or black automatically for a given background. See it live.
Interactively create colors in HWB space and get the CSS hwb() function. Simplifies tint/shade workflows. Live preview.
Use the light‑dark() CSS function to change colors based on color scheme. Build a simple dark mode toggle with one property.