Converting color and checking contrast...
Choose a color to convert HEX, RGB, and HSL values and check readable text contrast.
HEX, RGB, and HSL Color Picker
This color picker converts one sRGB color between the formats most commonly used in CSS, design systems, browser developer tools, and digital graphics. Choose a color visually or enter a HEX, RGB, or HSL value. The converter returns normalized, copy-ready CSS values, related colors, tints, shades, and an accessibility contrast check.
HEX is compact and convenient for fixed palette values. RGB maps directly to red, green, and blue light channels and is useful when controlling alpha transparency. HSL describes hue, saturation, and lightness, which often makes intentional color adjustments easier. All three formats can represent the same ordinary sRGB color.
How HEX Colors Work
A six-digit HEX color contains three hexadecimal channel pairs: red, green, and blue. In #0F766E, the pairs are 0F, 76, and 6E. Each pair ranges from 00 to FF, equivalent to decimal 0 through 255.
Short HEX works only when both digits in every pair repeat. For example, #ABC expands exactly to #AABBCC. Four- and eight-digit HEX add an alpha channel at the end, so #0F766E80 is project teal at approximately 50% opacity.
How RGB Colors Work
RGB uses decimal red, green, and blue channels from 0 to 255. Modern CSS uses space-separated syntax such as rgb(15 118 110). Alpha can be added after a slash: rgb(15 118 110 / 0.65).
RGB is especially useful when colors are generated by code or when individual channels need mathematical adjustment.
How HSL Colors Work
HSL uses a hue angle from 0 to 360 degrees, saturation from 0% to 100%, and lightness from 0% to 100%. Rotating hue makes complementary and analogous palettes straightforward.
HSL is convenient for editing, but it is not perceptually uniform. Equal numerical lightness does not guarantee that two different hues appear equally bright.
HEX, RGB, and HSL Reference Table
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Black | #000000 | rgb(0 0 0) | hsl(0 0% 0%) |
| White | #FFFFFF | rgb(255 255 255) | hsl(0 0% 100%) |
| Red | #FF0000 | rgb(255 0 0) | hsl(0 100% 50%) |
| Green | #00FF00 | rgb(0 255 0) | hsl(120 100% 50%) |
| Blue | #0000FF | rgb(0 0 255) | hsl(240 100% 50%) |
| Project Teal | #0F766E | rgb(15 118 110) | hsl(175.3 77.4% 26.1%) |
| Gray | #808080 | rgb(128 128 128) | hsl(0 0% 50.2%) |
| 50% Teal | #0F766E80 | rgb(15 118 110 / 0.502) | hsl(175.3 77.4% 26.1% / 0.502) |
How Color Contrast Is Calculated
The contrast checker follows WCAG relative luminance calculations. It first converts sRGB channel values into linear-light values, combines them using the standard red, green, and blue luminance coefficients, then compares the lighter and darker colors using the contrast-ratio formula.
Transparent colors do not have a single visible contrast value by themselves. This tool first composites the selected color over your chosen opaque background, then evaluates white and black text against that visible result. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA normal text requires 7:1. A passing ratio does not replace checking font size, weight, states, and the complete interface.
Color Picker FAQ
How do I convert HEX to RGB?
Split the six HEX digits into three channel pairs and convert each pair from base 16 to decimal. For example, 0F becomes 15.
How do I convert RGB to HSL?
Normalize the RGB channels, find their maximum, minimum, and difference, then derive hue, saturation, and lightness from those values.
What is the difference between HEX and RGB?
They encode the same sRGB channels using different number systems. HEX uses hexadecimal pairs; RGB commonly uses decimal channel numbers.
How does alpha transparency work in HEX?
Eight-digit HEX appends an alpha byte after RGB. The alpha pair ranges from 00 for transparent to FF for opaque.
Should I use HEX, RGB, or HSL in CSS?
Use the format that keeps your code easiest to understand. HSL suits hue adjustments, while RGB and HEX are direct choices for fixed values.
Is HSL perceptually uniform?
No. HSL lightness is mathematical rather than perceptual, so different hues at the same HSL lightness can appear substantially different.