UIXColors Documentation

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.

Core Tools

• Color Playground: Create and preview accessible color palettes with real-time WCAG contrast checking and exports for CSS, Tailwind, and Figma.
• Style Guide Generator: Extract complete design systems (colors, fonts, logos, icons, buttons) from any website using Playwright browser rendering.
• Color Converter: Convert between HEX, RGB, HSL, HSV, CMYK, OKLCH, and closest Pantone — with one-click copy for each format.
• Contrast Checker: Verify WCAG AA/AAA accessibility compliance for any foreground/background color pair with live preview.
• Palette Extractor: Upload any image and extract up to 10 dominant colors using K-Means clustering — fully browser-side, no upload to servers.
• QR Code Generator: Create customizable QR codes with logo support, color gradients, custom dot styles, and SVG/PNG export.
• Image Downloader: Extract and download all images from any public website, with ZIP archive support for bulk downloads.
• Gradient Maker: Design CSS gradients (linear and radial) with unlimited color stops and a live code preview.

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

In Tailwind CSS v4, you can reference CSS variables directly in your theme configuration. Add extracted colors to your tailwind.config.ts:

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        primary: "var(--color-primary)",
        secondary: "var(--color-secondary)",
        accent: "var(--color-accent)",
      },
    },
  },
}

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 follows a standard design token format compatible with Style Dictionary, Theo, and Figma Design Tokens:

[
  {
    "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