Color Contrast Checker
Check WCAG contrast between foreground and background colors, with pass/fail for AA and AAA.
Convert 3-digit, 6-digit and 8-digit hex colors to RGB, RGBA and HSL in your browser.
Hex to RGB converts CSS hex colors to RGB and HSL values you can copy into stylesheets.
This tool runs in your browser. Inputs, files and generated values stay on this device. Favorites and recently used tools, if you use them, store only tool names in local storage — never passwords, documents or QR contents. See the privacy policy.
Type a 3-digit, 6-digit, or 8-digit hex color and see RGB and HSL. Designers copying a color from CSS use it when they have a hex value and need the other writings. #336699 is rgb(51, 102, 153), and a word such as red is not accepted.
rgb(51, 102, 153). HSL is hsl(210, 50%, 40%).
3-digit hex expands to #ffffff, which is rgb(255, 255, 255).
8-digit hex includes alpha. The extra pair is about 80% opacity, shown as RGBA.
HEX writes red, green and blue as base-16 pairs. A 3-digit value doubles each digit. An 8-digit value adds an alpha pair. RGB uses 0–255 per channel. HSL describes the same color as hue, saturation and lightness. Conversion is arithmetic in the browser; it does not call a color API.
Only 3-digit, 6-digit, and 8-digit hex is accepted, with or without #. A word such as red, or an rgb() string, is not converted. HSL on the page is calculated from that hex. It is not a second field you can edit.
See the disclaimer for what these tools do not cover.
Check WCAG contrast between foreground and background colors, with pass/fail for AA and AAA.
Pick a color with the browser color input and copy HEX, RGB or HSL values.
Build linear, radial or conic CSS gradients, or gradient text, and copy the CSS or HTML.
Approximate the dominant colors in a JPG, PNG or WebP image using sampled pixels.
Pretty-print JSON, minify it, or check that it parses in the page. Comments, trailing commas, and single quotes fail. It does not turn the result into CSV.
Encode text to Base64 or decode it back, using UTF-8. Anyone can decode the result, so it is not a way to hide a password. A file drop is not accepted.
Guide
Split a hex color into red, green, and blue pairs and convert each pair from base 16 to a number from 0 to 255.
Read guideGuide
Choose one opaque color with the browser color control and copy it as HEX, RGB, or HSL.
Read guideGuide
Sample a JPG, PNG, or WebP and list 3 to 10 colors with each color's share of the sampled pixels.
Read guideGuide
Compare two solid colors and read the WCAG 2 ratio, including AA and AAA for normal and large text.
Read guideGuide
Build a linear, radial or conic CSS gradient from at least two color stops and copy the background or gradient text CSS.
Read guideGuide
Set one offset, blur, spread, color, and opacity, then copy a single box-shadow declaration.
Read guideAccepts #FFFFFF, FFFFFF, 3-digit, 6-digit and 8-digit values.
Preview
HEX
#336699
RGB
rgb(51, 102, 153)
HSL
hsl(210, 50%, 40%)