Color Converter
Convert colors between HEX, RGB, and HSL formats. Enter a color value or use the sliders and picker below.
Enter a color in any format -- HEX, RGB, or HSL -- and see all conversions with a live preview.
About Color Converter
Colors on the web are expressed in several formats, each with its own strengths. Understanding the differences between HEX, RGB, and HSL helps you choose the right notation for every situation — from writing CSS to building design systems.
HEX Colors
A HEX color is a six-digit hexadecimal string prefixed with #, such as #8B5CF6. Each pair of digits represents the red, green, and blue channels in the range 00–FF (0–255 in decimal). HEX is the most common format in CSS because it's compact and easy to copy between design tools and code editors. A three-digit shorthand like #F0F expands to #FF00FF.
RGB Colors
The rgb() CSS function specifies each color channel as an integer from 0 to 255. For example, rgb(139, 92, 246) is a vivid violet. RGB maps directly to how screens produce color — by mixing red, green, and blue light — which makes it intuitive for programmatic color manipulation. Adding an alpha channel with rgba() lets you control opacity on a scale from 0 (fully transparent) to 1 (fully opaque).
HSL Colors
HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel (0–360), saturation is a percentage from gray to full color, and lightness ranges from black (0%) to white (100%). Designers often prefer HSL because adjusting a single value — say, lightness — produces predictable tints and shades without affecting the underlying hue. The hsl() and hsla() CSS functions work the same way as their RGB counterparts.
Choosing the Right Format
Use HEX when you need a concise token for stylesheets and design specs. Choose RGB when calculating colors in JavaScript or blending channels programmatically. Pick HSL when you want to build a palette by rotating hues or creating light/dark variants of a base color. Modern CSS also supports oklch() and color(), but HEX, RGB, and HSL remain the most widely supported and understood formats across every browser.
Accessibility and Contrast
When selecting colors for interfaces, contrast ratio matters. WCAG guidelines recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Converting between formats helps you verify exact channel values, but always test your chosen palette against accessibility checkers to ensure readability for all users. Design tokens and systematic color scales — like those used in Tailwind CSS or Material Design — make it easier to maintain consistent, accessible color choices across an entire application.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL color formats?
HEX uses a six-character hexadecimal string to represent red, green, and blue channels. RGB specifies each channel as an integer from 0 to 255. HSL describes color by hue (0-360 degrees), saturation, and lightness as percentages. All three formats can represent the same colors but suit different workflows.
How do I convert HEX to RGB or HSL?
Split the six-digit HEX string into three pairs and convert each from base-16 to decimal for RGB values. To get HSL, first convert to RGB and then apply the standard mathematical formula that derives hue, saturation, and lightness from the red, green, and blue channels. This tool handles all conversions automatically.
What are CSS color functions like rgb() and hsl()?
CSS provides built-in functions such as rgb(), rgba(), hsl(), and hsla() that accept channel values directly. Modern CSS also supports oklch() and color() for wider gamut displays. The rgb() and hsl() functions are the most widely supported and work in every browser.
How do I add opacity or alpha to a color in CSS?
Use rgba() or hsla() and add a fourth value between 0 (fully transparent) and 1 (fully opaque). For example, rgba(139, 92, 246, 0.5) creates a semi-transparent violet. Modern browsers also accept an eight-digit HEX code where the last two digits control alpha.
What contrast ratio do I need for accessible text?
WCAG guidelines require a minimum contrast ratio of 4.5:1 for normal-sized text and 3:1 for large text (18px bold or 24px regular). Use a contrast checker after picking colors to verify your foreground and background combination meets these thresholds for all users.