Color & CSS Design StudiosRuns locally in your browser · No signup

Color, Palette & Contrast Studio

Convert HEX/RGB/HSL/HWB/OKLCH/CMYK, build 50–950 CSS/Tailwind scales, extract image palettes, simulate color blindness, and audit WCAG 2.1 AA/AAA + APCA contrast pairs & N×N brand matrices.

100% Local Browser Engine · Zero Uploads3 Workspaces

Color Spaces, 50–950 Scales & Image Extractor: Convert HEX/RGB/HSL/CMYK, generate shade ramps, extract dominant palettes from images, and simulate color-vision deficiencies.

Interactive Color Picker
Color Space Values (Click to Copy)
HEX
#2563EB
CSS RGB
rgb(37, 99, 235)
CSS HSL
hsl(221, 83%, 53%)
CSS HWB
hwb(221 15% 8%)
CMYK (Print)
cmyk(84%, 58%, 0%, 8%)
Tailwind Arbitrary
bg-[#2563eb]

Color-Vision Deficiency Simulation

Normal Vision
#2563eb
Protanopia (Red-blind)
#4040ca
Deuteranopia (Green-blind)
#3c38c2
Tritanopia (Blue-blind)
#28b0aa
50–950 Tint & Shade Scale (Tailwind / CSS Design Tokens)
:root {
  --color-brand-50: #f1f5fe;
  --color-brand-100: #dee8fc;
  --color-brand-200: #b9cdf8;
  --color-brand-300: #86a9f4;
  --color-brand-400: #4e81ef;
  --color-brand-500: #1659e9;
  --color-brand-600: #1249bf;
  --color-brand-700: #0e3b9a;
  --color-brand-800: #0b2c75;
  --color-brand-900: #082054;
  --color-brand-950: #051433;
}
Geometric Color Harmonies
Complementary
Analogous
Triadic
Split-Complementary
Tetradic
Was this tool helpful?

What is Color, Palette & Contrast Studio?

Color, Palette & Accessibility Studio merges HEX/RGB/HSL/CMYK/OKLCH conversion, 50–950 Tailwind shade generation, k-means image palette extraction, color-vision deficiency simulation, WCAG 2.1 + APCA Lc contrast auditing, and an N×N brand token contrast matrix.

How to use Color, Palette & Contrast Studio in 3 steps
  1. 1

    Pick Palette/Scales, Contrast Auditor, or OKLCH Matrix

    Sample a brand hex color, upload reference art, or paste design-system tokens.

  2. 2

    Audit WCAG 2.1 AA/AAA, APCA Lc & CVD vision

    Check every foreground/background combination and apply smart accessible shade fixes.

  3. 3

    Export CSS variables, OKLCH, or Tailwind JSON

    Copy ready-to-ship color tokens straight into globals.css or tailwind.config.

Key features and benefits
  • Unifies color picking, contrast checking, OKLCH CSS Color 4, and N×N palette matrices in one studio.
  • Evaluates both regulatory WCAG 2.1 ratios and perceptual APCA Lc contrast.
Common use cases

Auditing an entire light/dark UI token ramp for AA/AAA text legibility at once.

Converting legacy hex tokens into modern perceptual oklch() CSS variables.

Why browser-based works better

Color, Palette & Contrast Studio consolidates related color & css design studios workflows into one cohesive, multi-mode browser studio — eliminating tab-hopping across fragmented single-purpose tools.

Every mode executes locally using Web APIs and audited client-side libraries, so private files, tokens, and source code never leave your device.

You might also need

Continue this workflow with nearby browser-based tools so you can validate, convert, and ship output without context switching.

Color, Palette & Contrast Studio FAQs

Quick answers about the workflow, privacy, and where this tool fits in a broader job.

What is the advantage of OKLCH over HSL?

OKLCH has perceptually uniform lightness, so two hues at 65% L appear equally bright to the human eye.

Related free tools

Keep the workflow moving with nearby tools that solve the next likely step.

Built and maintained by

Free AI Tools Engineering Team

Browser Tooling & Web Platform Engineering

Last updated:

Tested in Chrome, Firefox, and Safari on desktop and mobile.

Video demo

☕ Support Us