Color Converter
Convert colors between HEX, RGB, HSL with WCAG AA/AAA contrast checker.
Contrast Checker
Copy Values
#3B82F6rgb(59, 130, 246)hsl(217, 91%, 60%)About Color Converter
Color representation in digital systems is built on the principle that any visible color can be described as a combination of numeric values within a defined color model. The most widely used model on the web is RGB (Red, Green, Blue), which mirrors how screens physically produce color by blending light from red, green, and blue sub-pixels. Each channel is typically expressed as an integer from 0 to 255, giving a total gamut of roughly 16.7 million colors. HEX notation is simply a shorthand for these same RGB values written in base-16: the six-character string #1A2B3C encodes red as 0x1A (26), green as 0x2B (43), and blue as 0x3C (60). Understanding that HEX and RGB are two representations of the same data -- not different color spaces -- is one of the most common misconceptions among new developers.
HSL (Hue, Saturation, Lightness) takes a different approach by modeling color in terms that map more closely to human perception. Hue is an angle on the color wheel (0-360 degrees), saturation is a percentage describing how vivid the color is, and lightness is a percentage from black (0%) through the pure hue (50%) to white (100%). HSL makes certain design tasks dramatically easier: generating a palette of tints and shades requires only adjusting the lightness value, while creating complementary colors means rotating the hue by 180 degrees. CSS natively supports all three formats, so choosing between them is largely a matter of readability and the task at hand.
Beyond aesthetics, color choice has direct implications for accessibility. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between foreground text and its background: 4.5:1 for normal text (AA level) and 7:1 for enhanced contrast (AAA level). Large text -- defined as 18pt or 14pt bold -- has a relaxed AA threshold of 3:1. Contrast ratio is calculated from the relative luminance of the two colors, a formula that weights the green channel most heavily because the human eye is most sensitive to green light. Failing to meet these thresholds means that users with low vision, color-vision deficiencies, or those viewing screens in bright sunlight may be unable to read your content. A reliable color converter that also evaluates contrast is therefore not just a convenience tool but a critical part of inclusive design.
How to Use the Color Converter
- Enter a color value in any supported format -- HEX (e.g., #FF5733), RGB (e.g., rgb(255, 87, 51)), or HSL (e.g., hsl(11, 100%, 60%)) -- into the input field.
- The tool instantly converts the input to all other supported formats and displays the results, allowing you to copy whichever representation you need.
- Use the live color preview swatch to visually confirm the color matches your expectation before copying the values into your stylesheet.
- To check WCAG contrast compliance, supply both a foreground color and a background color. The tool calculates the contrast ratio and reports whether the combination passes AA and AAA thresholds for normal and large text.
- Adjust the HSL lightness slider to quickly generate lighter or darker variants of your chosen color while preserving its hue and saturation.
- Copy the final color value in your preferred format directly to the clipboard using the copy button next to each output field.
Common Use Cases
Building Accessible Design Systems
When creating a design system, every color pairing used for text and background must meet WCAG contrast requirements. Designers and developers use the color converter to iterate on palette choices, checking contrast ratios in real time and adjusting lightness or saturation until the combination passes both AA and AAA thresholds across all intended uses.
Converting Between CSS Color Formats
Frontend codebases often mix HEX, RGB, and HSL values depending on which developer wrote a particular component. During refactoring or when enforcing a style guide that standardizes on one format, a color converter lets you batch-translate values without manual arithmetic or risking rounding errors in channel calculations.
Generating Tints, Shades, and Palettes
Producing a range of tints (lighter variants) and shades (darker variants) from a brand color is far simpler in HSL, where you only need to adjust the lightness component. Designers convert a HEX brand color to HSL, generate a scale from 10% to 90% lightness, and convert the results back to HEX for use in Tailwind config files or CSS custom properties.
Debugging Rendering Differences Across Platforms
When a color looks different between Figma, a browser, and a native mobile app, the first diagnostic step is confirming that the numeric values are identical. Converting between formats lets you compare apples to apples -- verifying, for example, that the HEX value from Figma matches the RGB value hardcoded in a React Native stylesheet.
Frequently Asked Questions
What is the difference between HEX and RGB color formats?
There is no difference in the colors they can represent -- HEX is simply the RGB values written in hexadecimal (base-16) notation. #FF5733 means red=255 (0xFF), green=87 (0x57), blue=51 (0x33). The choice between them is purely about readability and convention. HEX is more compact and widely used in CSS, while RGB is often preferred in JavaScript because it is easier to manipulate individual channels programmatically.
Why should I use HSL instead of HEX or RGB?
HSL models color in terms that are more intuitive for human reasoning: hue (which color), saturation (how vivid), and lightness (how bright). This makes certain design operations trivial -- creating a darker shade means reducing lightness, finding a complementary color means adding 180 to the hue, and desaturating a color means lowering saturation toward zero. None of these operations are straightforward with HEX or RGB values.
What WCAG contrast ratio do I need for accessible text?
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for large text (18pt regular or 14pt bold). Level AAA raises these thresholds to 7:1 for normal text and 4.5:1 for large text. These ratios are calculated from the relative luminance of the two colors using a formula defined in the WCAG specification. Most accessibility audits target AA compliance as the minimum standard.
Can I convert colors with alpha transparency?
Yes. RGBA and HSLA extend their respective formats with a fourth channel representing opacity, where 0 is fully transparent and 1 is fully opaque. In CSS, rgba(255, 87, 51, 0.5) and #FF573380 both represent the same semi-transparent color. Note that contrast ratio calculations for accessibility should be performed on the effective color after the alpha channel is composited against the actual background, since transparency alters the perceived contrast.
How is relative luminance calculated for contrast ratios?
Relative luminance is computed by first linearizing each sRGB channel (converting from gamma-encoded 0-255 values to linear light using a piecewise function), then applying the luminance coefficients: L = 0.2126 * R + 0.7152 * G + 0.0722 * B. The contrast ratio between two colors is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. The heavy weight on green reflects the human eye's peak sensitivity to green wavelengths.
What is the shorthand HEX format and when can I use it?
The shorthand HEX format uses three characters instead of six, where each character is doubled to produce the full value. For example, #F53 expands to #FF5533. This shorthand is only valid when each pair of hex digits in the full notation consists of two identical characters. #1A2B3C cannot be shortened because none of its channel pairs (1A, 2B, 3C) have matching digits. Modern CSS also supports four-character and eight-character HEX for colors with alpha transparency.