UIXColors Documentation
UIXColors is a free suite of professional design tools for web developers and designers. This documentation covers every tool — from color conversion to QR code generation — with usage examples, integration guides, and export format references.
What is UIXColors?
UIXColors is a comprehensive suite of browser-based design tools built to help designers and developers create accessible, beautiful user interfaces. Our tools process data entirely client-side where possible — no accounts required, no data stored.
The platform covers the full design workflow: extracting design tokens from real websites, converting colors between formats, checking WCAG accessibility compliance, generating color palettes from images, creating customized QR codes, and downloading assets from any public page.
Tool guides
Each tool is designed for a specific design workflow. Click any card to open the tool, or read the sections below for integration guides and usage examples.
Constructor
Assemble a brand style and a whole page: a style from the gallery, light and dark palettes with WCAG checks, Cyrillic-ready fonts, blocks and scroll effects. Export an AI prompt plus CSS, Tailwind 4 and JSON tokens.
Open toolStyle Guide Generator
Extract colors, fonts, logos, icons, and complete design systems from any website. Uses headless Chromium for pixel-accurate rendered styles.
Open toolColor Converter
Convert colors between HEX, RGB, HSL, HSV, CMYK, OKLCH, and the closest Pantone. Perfect for cross-platform design workflows.
Open toolContrast Checker
Verify color contrast ratios against WCAG 2.1 AA and AAA standards. Ensure your designs are accessible for all users including those with visual impairments.
Open toolPalette Extractor
Upload any image to extract up to 10 dominant colors with coverage percentages. Export as CSS variables or JSON design tokens — processed entirely in your browser.
Open toolQR Code Generator
Create customizable QR codes with logo support, gradients, and SVG/PNG export. Perfect for marketing materials and product packaging.
Open toolImage Downloader
Extract and download all images from any public website. Supports img tags, srcset, CSS backgrounds, and ZIP download for bulk asset extraction.
Open toolGradient Maker
Create CSS gradients with live preview — linear, radial and conic, with any number of color stops and instant CSS code output.
Open toolFavicon Generator
Design a favicon from text, an icon or your logo and get every size from 16 to 512 px, plus the HTML snippet and web manifest.
Open toolIntegration guide — CSS variables& design tokens
Copy-ready snippets for getting colors out of UIXColors and into a codebase.
Using Extracted Colors as CSS Custom Properties
The Palette Extractor and Style Guide Generator both export colors as CSS custom properties. Paste these into your globals.css file:
:root {
--color-primary: #3b82f6;
--color-secondary: #8b5cf6;
--color-accent: #f59e0b;
--color-background: #ffffff;
--color-foreground: #0f172a;
}Tailwind CSS v4 Integration
Tailwind CSS v4 is configured in CSS rather than in tailwind.config: put the colors in an @theme block and every --color-* variable becomes bg-*, text-* and border-* utilities.
/* app/globals.css */
@import "tailwindcss";
@theme {
/* each --color-* becomes a utility */
--color-primary: #3b82f6;
--color-secondary: #8b5cf6;
--color-accent: #f59e0b;
}
/* <button class="bg-primary text-white">…</button> */OKLCH Color Format for Design Systems
For modern design systems, use the OKLCH values from the Color Converter. OKLCH provides perceptually uniform lightness, making it easier to generate accessible color scales:
:root {
/* OKLCH: oklch(lightness chroma hue) */
--primary-50: oklch(97% 0.02 260);
--primary-500: oklch(60% 0.15 260);
--primary-900: oklch(25% 0.08 260);
/* Use with Tailwind v4 */
--color-primary: oklch(60% 0.15 260);
}JSON Design Token Export Format
The Palette Extractor's JSON export is a plain array of colors that Style Dictionary, Theo and Figma token plugins can consume:
[
{
"hex": "#3b82f6",
"rgb": { "r": 59, "g": 130, "b": 246 },
"coverage": "42%"
},
{
"hex": "#1e3a5f",
"rgb": { "r": 30, "g": 58, "b": 95 },
"coverage": "28%"
}
]React / Next.js Integration Example
For React and Next.js projects, import your CSS variables in the root layout and use them via Tailwind or inline styles:
// app/layout.tsx
import "@/styles/design-tokens.css" // your exported CSS vars
// Component usage
export function Button({ children }) {
return (
<button
style={{ backgroundColor: "var(--color-primary)" }}
className="text-white px-4 py-2 rounded"
>
{children}
</button>
)
}Export formats summary
| Format | Use it for | Produced by |
|---|---|---|
| CSS Variables | Web projects, Tailwind CSS, any CSS framework | All color tools |
| JSON Design Tokens | Style Dictionary, Figma plugins, CI/CD pipelines | Palette Extractor, Constructor |
| Tailwind 4 theme | Projects on Tailwind CSS v4 | Constructor |
| AI prompt | Claude, Cursor, v0, Lovable | Constructor |
| SVG Download | Print, scalable icons and logos | Style Guide Generator, QR Generator |
| PNG Download | Web images, email, social media | QR Generator, Image Downloader |
| ZIP Archive | Bulk asset download | Image Downloader |
| OKLCH / HSL values | Modern CSS, design system tokens | Color Converter |
Frequently Asked Questions About UIXColors
Is UIXColors free to use?
Yes — every tool is free to open and work in, and there are no hidden fees or credit cards. The color converter, contrast checker and gradient maker are free outright. The heavier tools spend credits when you download or export, and the free plan refills 50 credits every month. We believe professional design tools should be accessible to everyone, from students learning web design to experienced professionals building production applications.
Do I need to create an account?
Not to use them — every tool opens and works without signing up, and your work stays in your browser's local storage, so designs and settings never leave your device unless you export them. A free account is needed only when you download from a tool that spends credits (style guides, QR downloads, image downloads, palettes, favicons); it costs nothing and takes no card.
What makes UIXColors different from other design tools?
UIXColors focuses on accessibility-first design with WCAG compliance built into every color tool. The Style Guide Generator uses real browser rendering (headless Chromium) for browser-accurate style extraction, unlike competitors that parse static HTML/CSS. The Palette Extractor uses K-Means++ clustering entirely in the browser — no server upload needed. All tools produce production-ready code exports in multiple formats.
How does UIXColors help with WCAG accessibility?
Every color tool integrates WCAG contrast checking. The Contrast Checker directly tests any color pair against WCAG 2.1 AA (4.5:1) and AAA (7:1) standards. The Constructor checks the contrast of text pairs as you build a palette and can fix a failing pair by adjusting its OKLCH lightness. The Color Converter includes OKLCH output which is the recommended format for maintaining perceptually uniform contrast across a color scale.
What browsers are supported?
All modern browsers are fully supported: Chrome 90+, Firefox 88+, Safari 14+, and Edge 90+. For OKLCH color space display, use Chrome 111+, Safari 15+, or Firefox 113+. Most tools use only standard Web APIs (Canvas, FileReader, Clipboard) with no browser-specific dependencies.
Is my data stored or sent to servers?
Color Converter, Contrast Checker, and Palette Extractor work entirely in your browser — no data is ever sent to our servers. The Style Guide Generator and Image Downloader require server-side processing (to bypass CORS and render pages), but we do not store URLs, extracted content, or images beyond the duration of the request.
Can I import colors into Figma or Sketch?
You can paste HEX values directly into Figma and Sketch color inputs. For bulk import, use the JSON export with third-party design token plugins like "Design Tokens" for Figma or Style Dictionary to automate the process.
Why does UIXColors support OKLCH?
OKLCH is the modern CSS color format (supported in all major browsers since 2023) designed for perceptually uniform color manipulation. Unlike HSL, OKLCH ensures that changing only the lightness value produces equally bright results across all hues — critical for generating accessible, consistent color scales. shadcn/ui and Tailwind CSS v4 both use OKLCH as their default color format for exactly this reason.
Ready to start designing?
Try our free tools and create beautiful, accessible interfaces