Color Converter

Convert HEX, RGB, HSL, HSV, and CMYK color codes instantly. Check WCAG AA/AAA contrast ratios, simulate color blindness for five vision types, generate all five color harmony types, build tints and shades, create linear or radial CSS gradients, and export a full Tailwind 50–900 color scale as CSS variables. Runs entirely in your browser — nothing is uploaded or stored.

Main Color(royalblue)

Color Harmonies

Complementary (2)

Copy
#3b83f6
Copy
#f6ae3b

Analogous (3)

Copy
#3be0f6
Copy
#3b83f6
Copy
#513bf6

Triadic (3)

Copy
#3b83f6
Copy
#f63b83
Copy
#83f63b

Split-complementary (3)

Copy
#3b83f6
Copy
#f6513b
Copy
#e0f63b

Tetradic / Square (4)

Copy
#3b83f6
Copy
#f63be0
Copy
#f6ae3b
Copy
#3bf651

Generated Palette

WCAG Accessibility & Contrast Checker

Checks contrast against white and black text. WCAG AA requires 4.5:1 for normal text, 3:1 for large text. AAA requires 7:1 and 4.5:1. Best recommendation: use black text (5.7:1).

White text — 3.7:1

The quick brown fox jumps over the lazy dog

Black text — 5.7:1

The quick brown fox jumps over the lazy dog

White text — 3.7:1
AA Normal (4.5:1)✗ Fail
AA Large (3:1) Pass
AAA Normal (7:1)✗ Fail
AAA Large (4.5:1)✗ Fail
Black text — 5.7:1
AA Normal (4.5:1) Pass
AA Large (3:1) Pass
AAA Normal (7:1)✗ Fail
AAA Large (4.5:1) Pass

Large text: 18pt+ regular or 14pt+ bold. WCAG 2.1 Success Criterion 1.4.3 (AA) and 1.4.6 (AAA).

Color Blindness Simulator

Shows how your color appears to people with different types of color vision deficiency. Click any swatch to copy its hex value.

Normal vision

#3b82f6

Protanopia (red blind)

#5a5ada

Deuteranopia (green)

#5650d3

Tritanopia (blue blind)

#3fc4bf

Achromatopsia (B&W)

#7a7a7a

Simulations use the Machado et al. (2009) matrices. Roughly 8% of males and 0.5% of females have some form of color vision deficiency.

Tints & Shades

Tints (lighter — mixed with white)

Click to Copy
#3b82f6
Click to Copy
#5392f7
Click to Copy
#6ca1f8
Click to Copy
#84b1f9
Click to Copy
#9dc0fa
Click to Copy
#b5d0fc
Click to Copy
#cddffd
Click to Copy
#e6effe
Click to Copy
#fefeff
Click to Copy
#ffffff

Shades (darker — mixed with black)

Click to Copy
#3b82f6
Click to Copy
#2372f5
Click to Copy
#0b63f3
Click to Copy
#0a59da
Click to Copy
#094fc2
Click to Copy
#0845aa
Click to Copy
#073b91
Click to Copy
#063179
Click to Copy
#042761
Click to Copy
#031d48

Gradient Generator

CSS Variables

50–900 scale included

Palette JSON

TL;DR — convert colors, check WCAG, simulate color blindness, and export CSS in seconds

Paste or pick a color and instantly see HEX, RGB, HSL, HSV, and CMYK. Check WCAG AA/AAA contrast ratios against white and black, simulate color blindness for five vision types, generate all five color harmonies, build tints and shades, export a full Tailwind 50–900 scale, and copy CSS variables. Everything runs in your browser — no uploads.

Color Converter – HEX, RGB, HSL, CMYK + WCAG Checker and Color Blindness Simulator

Convert HEX, RGB, HSL, HSV, and CMYK color codes instantly. Type in any field and all formats update in real time. Beyond basic conversion, this free tool adds features that most dedicated color tools charge for: a live WCAG 2.1 contrast checker, a color blindness simulator for five vision types, all five color harmony types, a full 50–900 design token scale, and both linear and radial gradient generation.

Every swatch in the harmony and history panels has a Use as base button so you can explore color relationships without re-entering values manually. The Color History row tracks your last eight picks and lets you restore any of them instantly. The CSS Variables export includes H, S, and L components separately — useful for building alpha variants and dynamic themes entirely in CSS.

Advanced features not found on other color converters

Accessibility

WCAG 2.1 Contrast Checker

See live contrast ratios against white and black with Pass/Fail badges for AA and AAA at both normal and large text sizes. A live text preview shows exactly how your color reads against each background — no separate tool needed.

Inclusive Design

Color Blindness Simulator

Instantly preview your color as seen by people with protanopia, deuteranopia, tritanopia, and achromatopsia using scientifically validated transformation matrices (Machado et al. 2009). Most color tools skip this — this one treats it as a first-class feature.

History

Color History (Last 8)

Every color you pick is saved in a scrollable history row. Click any past swatch to restore it instantly — ideal when comparing options or backtracking after an experiment.

Harmonies

All 5 Harmony Types

Most tools show complementary only. This tool generates complementary, analogous, triadic, split-complementary, and tetradic palettes in one click. Every swatch has a Use as base button to continue exploring from that color.

Design Tokens

Full 50–900 Color Scale

The CSS Variables export includes a complete Tailwind-style 50–900 scale derived from your base color — ready to drop into a Tailwind config, CSS design token file, or style dictionary with zero extra calculation.

Gradient

Linear and Radial Gradients

Choose linear or radial gradient type, set the angle with a slider, and copy the ready-to-paste CSS string. The live preview updates as you type so you see exactly what will render in the browser.

How to use the Color Converter

  1. Enter a color: type a HEX code (with or without #), use the color picker, or enter values in any RGB, HSL, HSV, or CMYK field. All formats update instantly.
  2. Copy what you need: click the copy icon next to any field, or use Copy All to grab every format at once.
  3. Check accessibility: scroll to the Accessibility section to see WCAG contrast ratios and Pass/Fail badges for AA and AAA at normal and large text sizes.
  4. Simulate color blindness: the Color Blindness Simulator shows how your color looks to users with protanopia, deuteranopia, tritanopia, and achromatopsia.
  5. Explore harmonies: pick a harmony type to see balanced palette options. Click Use as base on any swatch to continue from that color.
  6. Export for code: copy CSS variables with the full 50–900 scale, or export palette JSON for scripting and design automation.

Color formats explained

  • HEX — the standard for web and CSS. Short (#fff) and full (#ffffff) are both accepted. Used in HTML, CSS, SVG, and design handoff.
  • RGB — red, green, blue channels (0–255). Native to digital screens and directly supported in CSS as rgb() or rgba().
  • HSL — hue, saturation, lightness. The easiest format to reason about when building CSS themes and design systems. Adjusting lightness in a single variable produces consistent tints and shades.
  • HSV / HSB — hue, saturation, value (brightness). Common in graphics editors like Figma and Photoshop.
  • CMYK — cyan, magenta, yellow, key (black). The standard for print. Values here are best-effort estimates; for production print, use your printer's ICC profiles.

Who uses this tool

  • Front-end developers — convert brand colors to exact code strings, check WCAG compliance before merging, and export design tokens in one step.
  • Designers — explore color harmonies, build tint/shade sets for component states, and hand off exact CSS variables to developers.
  • Accessibility specialists — check contrast ratios for any color pair and simulate how palettes look for users with color vision deficiencies.
  • Marketing and content teams — grab tints and shades for consistent thumbnails and banners without opening Figma or Photoshop.
  • Students and hobbyists — learn how color models relate to each other with live, immediate feedback as you change values.

Related tools

Accuracy notes

WCAG contrast ratios use the standard relative luminance formula from WCAG 2.1 (IEC 61966-2-1 linearization). Color blindness simulation uses transformation matrices published by Machado, Oliveira, and Fernandes (2009) and is an approximation — real perception varies by individual. CMYK values are best-effort estimates; for production print, use your printer's ICC profiles. Pantone/PMS mappings are proprietary and out of scope.

Frequently asked questions

How do I convert a HEX color to RGB online for free?
Type or paste your HEX code (e.g. #3b82f6) into the HEX field. RGB, HSL, HSV, and CMYK values appear instantly. Click the copy icon next to RGB to copy it. No account or software required.
How do I convert RGB to HEX online?
Enter your R, G, and B values (0–255 each) in the RGB fields. The HEX code updates instantly. Copy it with one click.
How do I convert HEX to HSL for CSS?
Enter your HEX code and the HSL values appear immediately. The CSS Variables export also includes individual H, S, and L components — useful for building dynamic themes with HSL manipulation in CSS.
What is the difference between HSL and HSV?
Both use Hue and Saturation but differ in the third channel. HSL (Lightness) treats 50% L as pure color and 100% L as white. HSV (Value/Brightness) treats 100% V as the most vivid version. CSS uses HSL; Figma and Photoshop color pickers typically expose HSV/HSB.
What is the difference between RGB and CMYK?
RGB is an additive model for screens. CMYK is a subtractive model for print. Converting between them is an approximation. For production print, use your printer's ICC profiles rather than an online converter.
What is WCAG contrast ratio and why does it matter?
WCAG contrast ratio measures the luminance difference between a foreground and background color, on a scale from 1:1 (no contrast) to 21:1 (black on white). Higher ratios mean text is more readable for people with low vision or in bright light conditions. Many countries require WCAG AA compliance for public-facing websites.
What is the difference between WCAG AA and AAA?
AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). AAA requires 7:1 for normal text and 4.5:1 for large text. AA is the legal baseline in most countries; AAA is recommended for maximum accessibility.
How does the color blindness simulator work?
The simulator applies published transformation matrices from Machado et al. (2009) to your color's RGB values to approximate how it appears to people with protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind), or achromatopsia (no color). Use it to verify your colors remain distinguishable for all users before shipping.
What color harmony types does this tool support?
All five: complementary (opposite hue), analogous (adjacent hues), triadic (three equidistant hues), split-complementary (less stark than complementary), and tetradic (four colors in a rectangle on the wheel). Every swatch has a Use as base button to continue exploring from that color.
What is the difference between tints and shades?
Tints mix a color with white, producing lighter versions. Shades mix with black, producing darker versions. In UI design, tints work well for hover states and backgrounds; shades for active states and text.
How does the 50–900 color scale work?
The scale mirrors the Tailwind CSS convention. 50 is the lightest tint, 500 is approximately the base color, and 900 is the darkest shade. Exporting it gives you a complete design token set ready for a Tailwind config or CSS custom properties file.
How do I generate a CSS gradient from my color?
Scroll to the Gradient Generator section. Choose linear or radial, adjust the angle slider, and copy the ready-to-paste CSS string directly into your stylesheet or component.
How do I use the exported CSS variables in my project?
The export produces a :root block with custom properties for HEX, RGB, HSL, individual H/S/L channels, the full 50–900 scale, and the gradient. Paste it into your CSS file and reference the variables throughout your stylesheet or Tailwind config.
Is my color data uploaded anywhere?
No. All conversion, palette generation, WCAG calculation, and color blindness simulation run locally in your browser using JavaScript. Nothing is sent to any server.
Can I use split-complementary instead of complementary for softer contrast?
Yes. Split-complementary uses the two colors adjacent to a color's direct complement rather than the complement itself. It gives high contrast like complementary but feels less stark — a common choice for UI color schemes that need energy without tension.

This tool is built to be fast, private, and thorough. Whether you need a quick HEX-to-RGB lookup or a full accessibility audit of a design palette, everything is one tab away — no signup, no upload, no waiting.

Related tools

JSON Formatter

Beautify or minify JSON, sort keys for stable diffs, and validate against JSON Schema. Copy formatted output or download a .json file.

CSV to JSON Converter

Convert CSV to JSON instantly. Auto-detect delimiters, handle headers, infer data types (numbers/booleans), and download the result.

JSON to CSV Converter

Convert JSON arrays to CSV with custom delimiter (comma/tab/semicolon/pipe), header row, and instant download ready for Excel or Sheets.