Converter

Color Converter

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 to Community

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

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%)).

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.

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.

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.

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

Markdown Preview

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

📊

CSV to JSON Converter

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

</>

HTML to JSX Converter

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

GRD

CSS Gradient Generator

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

HTML to Markdown

Free online HTML to markdown - convert HTML markup to clean, readable Markdown syntax

PDF

HTML to PDF Converter

Convert HTML to PDF online free - create downloadable PDF documents from HTML code in your browser

What is Color Converter?

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

Frequently Asked Questions

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.