Color Converter

Convert between HEX, RGB, and HSL formats with live preview. Paste any format and copy all outputs.

Runs locally in your browser; colors are not uploaded.

Live preview

HEX

#2563EB

RGB

rgb(37, 99, 235)

HSL

hsl(221, 83%, 53%)

RGBA

rgba(37, 99, 235, 1)

HSLA

hsla(221, 83%, 53%, 1)

Contrast checker

WCAG 2.1 ratios

On whiteContrast 5.17:1

AA normal (4.5)Pass

AA large (3.0)Pass

AAA normal (7.0)Fail

AAA large (4.5)Pass

On blackContrast 4.06:1

AA normal (4.5)Fail

AA large (3.0)Pass

AAA normal (7.0)Fail

AAA large (4.5)Fail

Palette generator

Complementary, triadic, analogous, plus tints/shades

Complementary

#2563EB

#EBAC24

Triadic

#2563EB

#EB2463

#63EB24

Analogous

#2563EB

#24C6EB

#4824EB

Tints & shades scale

#DEE8FC

100

#B9CDF8

200

#94B3F5

300

#6E98F2

400

#497DEE

500

#2463EB

600

#1450D2

700

#1042AD

800

#0D3387

900

#092562

Tailwind config

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#DEE8FC",
          100: "#B9CDF8",
          200: "#94B3F5",
          300: "#6E98F2",
          400: "#497DEE",
          500: "#2463EB",
          600: "#1450D2",
          700: "#1042AD",
          800: "#0D3387",
          900: "#092562",
        }
      }
    }
  }
};

CSS variables

:root {
  --brand-50: #DEE8FC;
  --brand-100: #B9CDF8;
  --brand-200: #94B3F5;
  --brand-300: #6E98F2;
  --brand-400: #497DEE;
  --brand-500: #2463EB;
  --brand-600: #1450D2;
  --brand-700: #1042AD;
  --brand-800: #0D3387;
  --brand-900: #092562;
  --brand-base: #2563EB;
  --brand-complementary: #EBAC24;
  --brand-triadic-1: #EB2463;
  --brand-triadic-2: #63EB24;
  --brand-analogous-1: #24C6EB;
  --brand-analogous-2: #4824EB;
}

JSON

{
  "base": "#2563EB",
  "complementary": "#EBAC24",
  "triadic": [
    "#EB2463",
    "#63EB24"
  ],
  "analogous": [
    "#24C6EB",
    "#4824EB"
  ],
  "scale": {
    "50": "#DEE8FC",
    "100": "#B9CDF8",
    "200": "#94B3F5",
    "300": "#6E98F2",
    "400": "#497DEE",
    "500": "#2463EB",
    "600": "#1450D2",
    "700": "#1042AD",
    "800": "#0D3387",
    "900": "#092562"
  }
}

Color naming

Closest CSS + Tailwind matches

CSS named color

royalblue

#4169E1

Closest Tailwind color

blue-500

#3B82F6

How to use

Enter a color or pick from presets/picker; trim/uppercase toggles adjust formatting.
Use the alpha slider to generate RGBA/HSLA variants; copy individual formats or all, or download.
Live preview updates as you change inputs; everything runs in your browser.

FAQ

Is this private?

Yes. Conversions happen locally in your browser; nothing is uploaded.

Which formats can I copy?

HEX, RGB, HSL, plus RGBA/HSLA with your chosen alpha. Copy individually or all at once.

Can I download the values?

Yes. Use “Download outputs” to save all formats in a text file.