Universal Color Converter

Universal color converter supporting 10+ formats. Convert HEX, RGB, HSL, HSV, CMYK, LAB, HWB, and CSS named colors. Features auto-detect, palette generator, harmony schemes, gradient creator, and WCAG accessibility checker.

ENTER ANY COLOR CODE

Examples: #FF0000, rgb(255,0,0), hsl(0,100%,50%), red

DETECTED HEX

OUTPUT #FF8C00

PICK COLOR

ON BLACK 9.00:1 AAA (Pass)

ON WHITE 2.33:1 Fail

ALL FORMATS

rgb(255, 140, 0)

rgba(255, 140, 0, 1)

hsl(33, 100%, 50%)

hsla(33, 100%, 50%, 1)

hsv(33, 100%, 100%)

hwb(33 0% 0%)

cmyk(0%, 45%, 100%, 0%)

lab(67% 37 74)

#FF8C00FF

16747520

Interior Design

Bedroom walls

Home office

Bathroom vanity

Pairs with:

Color Mixing

Blue 85%

White 15%

Start with ultramarine blue. Add tiny red for purple-blue, white for lighter shades.

Tints (Lighter)

Shades (Darker)

COMPLEMENTARY

TRIADIC

SPLIT COMPLEMENTARY

ANALOGOUS

PRIMARY #FF8C00

SECONDARY #0073FF

ACCENT #7DFF00

NEUTRAL #F5F5DC

Click "Copy CSS" to copy gradient code

COLOR 1

COLOR 2

STEPS (5)

DIRECTION

CSS VARIABLES

:root {
  --primary: #ff8c00;
  --primary-rgb: 255, 140, 0;
  --secondary: #0073ff;
  --accent: #7dff00;
}

TAILWIND CONFIG

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#ff8c00'
      }
    }
  }
}

SCSS VARIABLES

$primary-color: #ff8c00;
$secondary-color: #0073ff;
$accent-color: #7dff00;
$neutral-color: #f5f5dc;

JSON OBJECT

{
  "hex": "#ff8c00",
  "rgb": "255, 140, 0",
  "hsl": "33, 100%, 50%",
  "name": "Dark Orange"
}

My Color Library

Save your favorite colors. Synced across all color tools.

Import format info

Import a JSON file with this format:

[
  {"hex": "#FF8C00", "name": "Orange"},
  {"hex": "#3B82F6", "name": "Blue"}
]

Supported Color Formats

HEX #FF0000, #F00, #FF0000FF

RGB / RGBA rgb(255,0,0), rgba(255,0,0,1)

HSL / HSLA hsl(0,100%,50%), hsla(0,100%,50%,1)

HSV / HWB / CMYK / LAB hsv(0,100%,100%), hwb(0 0% 0%)

CSS Named Colors red, blue, coral, dodgerblue (147 colors)

Keyboard Shortcuts

Ctrl+C Copy HEX

Ctrl+V Paste Color

R Random color

S Save to library

Universal Color Conversion Made Easy

Working with colors across different formats is a daily challenge for developers and designers. Our Universal Color Converter eliminates the hassle by supporting 10+ formats with intelligent auto-detection.

Simply paste any color code - whether it's HEX, RGB, HSL, HSV, CMYK, LAB, HWB, or even a CSS color name - and instantly get conversions to all formats. Beyond conversion, explore color harmonies, generate palettes, create gradients, and ensure WCAG accessibility compliance.

How to Use the Universal Color Converter

Enter Any Color Format

Paste any color code or name. The tool auto-detects the format: HEX, RGB, HSL, HSV, CMYK, LAB, HWB, or CSS named colors.

View All Formats Instantly

See your color converted to 10+ formats simultaneously. Check WCAG contrast ratios for accessibility.

Explore Color Variations

Generate shades, tints, color harmonies, suggested palettes, or create smooth gradients.

Export and Save

Copy individual formats, export code in CSS/Tailwind/SCSS/JSON, or save to your personal library.

Key Features

Auto-Detect Format

Paste any color code and the tool automatically recognizes and converts it.

10+ Formats

HEX, RGB, HSL, HSV, CMYK, LAB, HWB, and 147 CSS named colors supported.

WCAG Accessibility

Instant contrast ratio calculations with AA and AAA compliance indicators.

Shades & Tints

Generate lighter tints and darker shades for design systems.

Color Harmony

Explore complementary, triadic, split-complementary, and analogous schemes.

Gradient Generator

Create smooth gradients with customizable colors, steps, and direction.

Frequently Asked Questions

What color formats can I convert?

The universal converter supports HEX (3, 6, 8 digit), RGB, RGBA, HSL, HSLA, HSV/HSB, CMYK, LAB, HWB, and all 147 CSS named colors. Simply paste any color code and it auto-detects the format.

How does auto-detect work?

Paste any color code in any format and the tool automatically recognizes it. You can enter #FF0000, rgb(255,0,0), hsl(0,100%,50%), or even "red" - all work instantly.

What is WCAG accessibility?

WCAG defines contrast ratios for text readability. AA requires 4.5:1, AAA requires 7:1. Our tool automatically checks your color against black and white backgrounds.

Can I generate color palettes?

Yes! Use the Harmony tab for color schemes, the Palette tab for suggested combinations, or the Shades & Tints tab for variations. All generated colors are clickable to use.

How do I save colors?

Click the "Save" button in My Library or press "S" on your keyboard. All colors are stored locally in your browser and sync across all our color tools.