Color Converter

LOCAL · Browser-Only

Convert colors between HEX, RGB, HSL, HSB/HSV, CMYK, OKLCH, LCH, LAB, and HWB formats with live preview

#6366f1

Click the swatch to pick a color, or type a value below

Opacity (alpha)100%

Input Format

Accepts 3/4/6/8-digit hex and CSS color names (e.g. rebeccapurple).

All Formats

HEX#6366f1

RGBrgb(99, 102, 241)

HSLhsl(239, 84%, 67%)

HSBhsb(239, 59%, 95%)

CMYKcmyk(59%, 58%, 0%, 5%)

OKLCHLoading…

LCHLoading…

LABLoading…

HWBLoading…

Contrast Checker (WCAG 2.1)

Sample Text4.47:1

vs White (#FFFFFF)

AA Normal Text

AA Large Text

AAA Normal Text

AAA Large Text

Sample Text4.70:1

vs Black (#000000)

AA Normal Text

AA Large Text

AAA Normal Text

AAA Large Text

Color Harmonies

Complementary

Analogous

Triadic

·Share recipe

Was this tool helpful?

What is Color Converter?

Free online color converter to convert colors between HEX, RGB, and HSL formats instantly with a live color preview.

Enter a color in any format and see the equivalent values in all other formats at once, so converting HEX to HSL for a hover state or RGB to HEX for a Tailwind config takes one paste. Perfect for web developers and designers who need to switch between color notations for CSS, design tools, or brand guidelines. The live preview shows you exactly how the color looks in real time. No signup required.

How to Use Color Converter

1Enter a color value in any format: HEX (e.g., #FF5733), RGB, or HSL
2See the color preview update in real time
3Read the converted values in all other formats
4Copy the value you need for your CSS, design tool, or code

Frequently Asked Questions

What is the difference between HEX, RGB, and HSL?

HEX uses a 6-character hexadecimal code (e.g., #FF5733). RGB defines color using Red, Green, and Blue values from 0 to 255 (e.g., rgb(255, 87, 51)). HSL uses Hue (0-360 degrees), Saturation (0-100%), and Lightness (0-100%) to describe colors in a more human-friendly way (e.g., hsl(14, 100%, 60%)).

Which color format should I use in CSS?

All three formats work in CSS. HEX is the most common and compact. RGB is intuitive for programmatic color manipulation. HSL is best when you need to adjust lightness or saturation while keeping the same hue, making it great for generating color palettes.

How do I convert HEX to RGB?

Enter your HEX color code (with or without the # symbol) in the HEX input field. The RGB and HSL values will update automatically with a live preview of the color.

How do I convert HEX to HSL for a CSS hover state?

Paste your base HEX color and read the HSL value the tool produces. HSL makes it easy to nudge only the lightness up or down for hover, focus, and disabled states while keeping the same hue, then copy the adjusted value into your stylesheet.

Can I convert an RGBA color with transparency?

Enter the RGB portion to convert between HEX, RGB, and HSL. The alpha channel controls opacity separately from the color value, so keep your existing alpha and apply it alongside the converted color in your CSS.

Share this tool

Related Tools

📊

Csv to json free

Free online CSV to JSON converter - convert CSV data to JSON format with delimiter options and preview

Markdown to html

Free online markdown preview - write Markdown and see a live rendered preview side by side

</>

Html to react

Free online HTML to JSX converter - convert HTML markup to valid React JSX with automatic attribute and style transformations

GRD

Css gradient

Free online CSS gradient generator - create beautiful CSS gradients with a visual editor and live preview

🎨

Figma tokens to css

Free online design token converter - convert design tokens between CSS, SCSS, Tailwind, and more

CSS Units Converter

Free online CSS units converter - convert between px, rem, em, vw, vh, and other CSS units

💱

Currency Converter

Free online currency converter - convert between currencies with current exchange rates

Number Base Converter

Free online number base converter - convert numbers between decimal, binary, octal, and hexadecimal

Keep reading: Tailwind CSS Cheat Sheet and html entities reference. Doing this in code instead? See the encoding endpoints.

Color Converter

LOCAL · Browser-Only

Convert colors between HEX, RGB, HSL, HSB/HSV, CMYK, OKLCH, LCH, LAB, and HWB formats with live preview

#6366f1

Click the swatch to pick a color, or type a value below

Opacity (alpha)100%

Input Format

Accepts 3/4/6/8-digit hex and CSS color names (e.g. rebeccapurple).

All Formats

HEX#6366f1

RGBrgb(99, 102, 241)

HSLhsl(239, 84%, 67%)

HSBhsb(239, 59%, 95%)

CMYKcmyk(59%, 58%, 0%, 5%)

OKLCHLoading…

LCHLoading…

LABLoading…

HWBLoading…

Contrast Checker (WCAG 2.1)

Sample Text4.47:1

vs White (#FFFFFF)

AA Normal Text

AA Large Text

AAA Normal Text

AAA Large Text

Sample Text4.70:1

vs Black (#000000)

AA Normal Text

AA Large Text

AAA Normal Text

AAA Large Text

Color Harmonies

Complementary

Analogous

Triadic

·Share recipe

Was this tool helpful?

What is Color Converter?

Free online color converter to convert colors between HEX, RGB, and HSL formats instantly with a live color preview.

How to Use Color Converter

1Enter a color value in any format: HEX (e.g., #FF5733), RGB, or HSL
2See the color preview update in real time
3Read the converted values in all other formats
4Copy the value you need for your CSS, design tool, or code

Frequently Asked Questions

What is the difference between HEX, RGB, and HSL?

Which color format should I use in CSS?

How do I convert HEX to RGB?

Enter your HEX color code (with or without the # symbol) in the HEX input field. The RGB and HSL values will update automatically with a live preview of the color.

How do I convert HEX to HSL for a CSS hover state?

Can I convert an RGBA color with transparency?

Share this tool

Related Tools

📊

Csv to json free

Free online CSV to JSON converter - convert CSV data to JSON format with delimiter options and preview

Markdown to html

Free online markdown preview - write Markdown and see a live rendered preview side by side

</>

Html to react

Free online HTML to JSX converter - convert HTML markup to valid React JSX with automatic attribute and style transformations

GRD

Css gradient

Free online CSS gradient generator - create beautiful CSS gradients with a visual editor and live preview

🎨

Figma tokens to css

Free online design token converter - convert design tokens between CSS, SCSS, Tailwind, and more

CSS Units Converter

Free online CSS units converter - convert between px, rem, em, vw, vh, and other CSS units

💱

Currency Converter

Free online currency converter - convert between currencies with current exchange rates

Number Base Converter

Free online number base converter - convert numbers between decimal, binary, octal, and hexadecimal

Keep reading: Tailwind CSS Cheat Sheet and html entities reference. Doing this in code instead? See the encoding endpoints.