RGB to HEX Converter

What this RGB ↔ HEX converter does

Convert between three standard CSS color formats — RGB (red/green/blue components 0-255), HEX (the 6-character #RRGGBB notation), and HSL (hue/saturation/lightness). Move any slider and all three formats update live. Type any hex code into the hex field and the sliders adjust to match. Click any of 18 preset color swatches to load a brand color instantly.

The three color formats explained

RGB — Red, Green, Blue. Each component ranges 0-255. rgb(255, 0, 0) is pure red. RGB matches how computer monitors emit light: three sub-pixels (red, green, blue) at varying intensities. The "additive" color model — adding all three at full intensity gives white.

HEX — Hexadecimal notation of RGB. #FF0000 is the same red as rgb(255, 0, 0) — FF = 255 in hex, then 00 00 for green and blue. Compact and the standard format in CSS, web design tools, and brand guidelines.

HSL — Hue (0-360°), Saturation (0-100%), Lightness (0-100%). hsl(0, 100%, 50%) is the same red. HSL is the most human-friendly: change hue to shift the color wheel position, change saturation to wash out, change lightness to brighten or darken. Designers use HSL when building dark/light theme variants of a brand color.

WCAG contrast checker

Below the color preview, the tool shows the contrast ratio between your color and either white or black text — whichever has more contrast. The badge color tells you the WCAG accessibility level:

• Green (≥ 4.5:1) — passes WCAG AA for normal text. Safe for body copy.
• Yellow (3:1 - 4.5:1) — passes WCAG AA for large text only (18pt+).
• Red (< 3:1) — fails accessibility. Don't use for text.

Useful when picking brand colors that need to work as button backgrounds, link colors, or text colors. A "nice-looking" pastel green might fail accessibility checks; this tool catches that before it's deployed.

Common workflows

Match a brand color from a screenshot. Get the color via your OS's color picker, paste the hex into the hex field, see RGB and HSL equivalents.

Build a color palette. Lock the hue, vary saturation and lightness sliders to generate matching tones for a design system.

Verify accessibility. Check that your link color contrasts against your background. The contrast badge tells you instantly.

Convert between CSS formats. Some tools accept only HEX; others only HSL. Convert in 2 seconds.

Privacy

All conversion happens in your browser via JavaScript math. No request is sent to any server. Your color choices stay local.