6-digit hexadecimal — the universal web standard. Used in every CSS file, design tool, and brand guideline. Compact, human-readable, and universally supported.

Best for: Web CSS, SVG, HTML attributes, design tokens

Red, Green, Blue on a 0–255 scale. Mirrors how screens physically emit light. Each channel mixes additively — all 255s give white, all zeros give black.

Best for: CSS styling, canvas/WebGL, image processing

RGB with a fourth alpha channel (0–1) controlling transparency. Essential for overlays, glassmorphism effects, and layered UI elements.

Best for: Transparent overlays, glass UI, modal backdrops

Hue (0°–360°), Saturation (%), Lightness (%). Designed for human intuition — you can 'think' in HSL: rotate hue to change color family, drop saturation to grey it out, lower lightness to darken.

Best for: Theme generation, accessible palettes, dark/light modes

HSL extended with alpha. Lets you create transparent color families while keeping the intuitiveness of the HSL model. Perfect for design systems.

Best for: Design systems, theming with opacity variants

Cyan, Magenta, Yellow, Key (Black). The subtractive color model used in print. Screen colors must be converted carefully — bright digital blues often cannot be reproduced exactly in print.

Best for: Print design, brand guidelines, packaging

--primary: #6366f1;
--primary-rgb: 99, 102, 241;
--primary-hsl: 239deg 84% 67%;

Paste directly into your :root{} block. Works with every CSS framework.

colors: {
  primary: '#6366f1',
  'primary-light': '#818cf8'
}

Drop into tailwind.config.js for instant utility class access.

{
  "primary": {
    "value": "#6366f1",
    "type": "color"
  }
}

W3C Design Tokens format. Compatible with Style Dictionary and Theo.

$primary: #6366f1;
$primary-rgb: 99, 102, 241;
$primary-hsl: 239, 84%, 67%;

SCSS variables for traditional Sass-based projects.

UIColor(red: 0.388, green: 0.400,
  blue: 0.945, alpha: 1.0)

UIKit and SwiftUI compatible UIColor initializer.

Use semantic names in the Export Name field, not descriptive colour names. --primary ages better than --blue — because when you rebrand to green, all your variables still make sense.

All Formats in One View

Most converters show one output at a time. This tool shows HEX, HEXA, RGB, RGBA, HSL, HSLA, and CMYK simultaneously — so you copy exactly what you need without toggling.

Auto-Detect: No Format Selection

Paste any colour string from anywhere — Figma, CSS, Sketch, a design brief, a Slack message — and it just works. The parser handles all formats including shorthand and functional notation.

WCAG Contrast Checker Built In

No third-party tab needed. Pick your foreground and background, see the ratio, and know instantly if you're AA or AAA compliant. Iterate until you pass.

5-Mode Blindness Simulation

See your colour through the eyes of every major colour vision deficiency type. Normal, Deuteranopia, Protanopia, Tritanopia, and Achromatopsia — all one click away.

Framework-Native Export

Skip the manual conversion. Get CSS Variables, Tailwind config, W3C Design Tokens, SCSS, and Swift/iOS code in one click. Semantic variable naming baked in.

Shareable Color URLs

Every colour you pick gets a permanent, shareable URL. Send it to a colleague and they land on the exact colour — no copy-paste errors, no 'which blue?' ambiguity.