Universal Color Converter

Enter any color code once — HEX, RGB, HSL, CMYK, HSV, LAB, or a CSS named color — and instantly see every other format side by side. No page switching, no button pressing, no signup. Get CSS-ready output (hsl(210, 100%, 50%) and --color: #3498db as a custom property), generate harmony palettes, preview WCAG contrast, and export to CSS Variables, Tailwind config, or SCSS — all 100% browser-based.

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.

How do I create a CSS gradient between two colors?

Click the Gradients tab in the converter. Enter any two hex colors in the Color 1 and Color 2 fields, choose the number of steps (3–10) and direction (left-to-right, top-to-bottom, diagonal, etc.), then click Copy Gradient CSS to get the ready-to-paste background: linear-gradient(90deg, #FF8C00, #3B82F6); declaration. The preview updates live so you can fine-tune before copying.

Can I use this tool for interior design color matching?

Yes — the Interior Design panel shows room pairing suggestions for your selected color: which wall, accent, trim, and furniture colors it works with. Use the Harmony tab to generate analogous and complementary schemes that translate directly to paint color combinations. The CMYK values help when ordering paint chips or communicating with decorators. Use the Shades & Tints tab to explore lighter and darker wall tones derived from your base color.

What paint colors do I mix to get a specific color?

Enter your target color and check the Color Mixing panel — it shows which base paint pigments to combine and in what proportion to approximate that color. For example, a teal might read: "Start with phthalo green, add cerulean blue, and a touch of white for lightness." These are traditional painter's mixing recipes, not digital blending. The CMYK values also help when working with print or paint suppliers who use process color.