Color Converter

Color Converter

Convert colors between HEX, RGB, HSL, and CMYK instantly. Free online color picker with WCAG contrast checker and palette generator.

Updated April 2026

Active Preview

#197FE6

Complementary Colors

Format Conversions

WCAG AA: Fail
WCAG AAA: Fail
4.02:1 vs white

Tip: Click a complementary color swatch to use it. Press Shift+Enter to copy the HEX value.

Color Converter Online — HEX, RGB, HSL & CMYK

Stop juggling multiple tools every time you need to translate a design token into a CSS value. This free color converter gives you HEX, RGB, HSL, and CMYK representations of any color simultaneously — no sign-up, no install, and no data ever leaves your browser.

Pick any color using the interactive color picker, type a hex code directly, or click a complementary swatch to explore related hues. All format values update instantly, and each one is a single click away from your clipboard.

How to Use the Color Converter

  1. Pick or type your color — click the color swatch to open your browser's native picker, or type a 6-digit hex code like #3A86FF directly into the input field.
  2. Copy any format — click the copy icon next to HEX, RGB, HSL, or CMYK to grab that value instantly.
  3. Check WCAG contrast — the tool automatically compares your color against white and reports whether it passes WCAG AA (4.5:1) and AAA (7:1) contrast ratios.
  4. Save and export — hit "Save to Palette" to collect colors, then "Export Palette" to download a ready-to-use CSS variables file.

Convert Between HEX, RGB & HSL

Web colors live in three common worlds: HEX is the shorthand you see in CSS stylesheets (#FF5733), RGB is the raw channel representation used in design tools (rgb(255, 87, 51)), and HSL is the human-friendly model that lets designers reason about hue, saturation, and lightness independently (hsl(11, 100%, 60%)).

Converting between them is mechanical but error-prone when done by hand. This hex to RGB converter eliminates rounding mistakes and gives you mathematically exact values for all three formats simultaneously. CMYK is included for print workflows where inks replace pixels.

WCAG Color Contrast — Why It Matters

The Web Content Accessibility Guidelines (WCAG) define contrast ratios that ensure text remains readable for users with low vision. The key thresholds:

  • WCAG AA — at least 4.5:1 for normal text, 3:1 for large text (≥18pt or ≥14pt bold)
  • WCAG AAA — at least 7:1 for normal text, 4.5:1 for large text

This tool computes the contrast ratio of your selected color against a white background using the standard relative luminance formula. A color that fails AA is often too light for body text and should be darkened or replaced.

Color Formats Explained

Understanding each format helps you choose the right one for each context:

  • HEX — Six hexadecimal digits representing R, G, B channels. Universally supported in CSS. Example: #1A73E8.
  • RGB — Three integers (0–255) for red, green, and blue. Supported in CSS and every design tool. Example: rgb(26, 115, 232).
  • HSL — Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Ideal for programmatic color adjustments like darkening a button on hover.
  • CMYK — Cyan, Magenta, Yellow, Key (Black) as percentages. The standard for print design and physical media.

Common Use Cases

  • Design-to-code handoff: Designers specify colors in HEX; developers often need RGB for CSS color() functions or HSL for dynamic theming.
  • Accessibility audits: Quickly check whether a brand's primary color passes WCAG AA contrast on white before shipping to production.
  • Print preparation: Convert screen colors to CMYK before sending assets to a print shop to avoid color surprises.
  • Building design systems: Save multiple brand colors to the palette and export them all as CSS custom properties in one click.
  • Exploring color harmonies: Click complementary swatches to discover colors that pair well with your base color and expand your palette.

Frequently Asked Questions

How do I convert a hex color to RGB?

Type or paste a 6-digit hex code (e.g., #FF8000) into the input field. The tool instantly displays the RGB equivalent — in this case rgb(255, 128, 0). Click the copy icon to grab it for your stylesheet. No manual math required.

What is the HSL color format and when should I use it?

HSL stands for Hue, Saturation, and Lightness. Unlike HEX or RGB, HSL lets you manipulate a color in human-readable terms — increase lightness to make it pastel, reduce saturation to gray it out. It's the preferred format in CSS when you need dynamic color variations, such as hover states or dark mode variants.

How does the WCAG contrast checker work?

The tool calculates the relative luminance of your color and compares it to the luminance of white (1.0) using the WCAG formula: contrast ratio = (L1 + 0.05) / (L2 + 0.05). If the ratio is ≥ 4.5, the color passes WCAG AA for normal text. If it's ≥ 7.0, it passes the stricter AAA level. Colors that fail are too light to read comfortably on a white background.

What is the difference between HEX and RGB colors?

HEX is simply RGB encoded in hexadecimal notation. The color #3A86FF is exactly the same as rgb(58, 134, 255) — the first two hex digits (3A = 58) represent red, the middle two (86 = 134) represent green, and the last two (FF = 255) represent blue. Both formats define colors in the sRGB color space.

How do I generate complementary colors?

Complementary colors are computed by rotating the hue angle in HSL color space. This tool generates four harmonious complements at +90°, +150°, +180°, and +270° from your base hue, keeping the same saturation and lightness. Click any swatch to instantly switch to that color and see its format codes.

Resources

Related Tools