Color Converter

This color converter keeps HEX, RGB, and HSL in sync as you type, entirely in your browser. Nothing is sent to a server. Beyond conversion, it computes WCAG contrast ratios against white and black, generates a nine-step strip of shades and tints, resolves named CSS colors, and (in supporting browsers) samples any pixel on your screen with an eyedropper.

How to use

1. Enter a color in any format: HEX, rgb(), hsl() (with optional alpha), or a named CSS color like rebeccapurple in the HEX field. Paste reads your clipboard and Sample loads a preset.
2. Watch the other formats, the preview, the contrast panel, and the shade strip update live; the field you are editing is never rewritten.
3. Pick visually with the native color picker, or click Pick from screen to eyedrop any pixel (Chromium-based browsers).
4. Check the contrast ratios vs white and black with their AA/AAA badges, and click a lightness swatch to load that shade or tint.
5. Copy the HEX, RGB, or HSL string you need.

Worked example

Type #10B981 (Textbench's emerald) into the HEX field. The RGB field shows rgb(16, 185, 129) and the HSL field shows hsl(160, 84%, 39%). The contrast panel reports about 8.28:1 vs black (AA and AAA pass) but only 2.54:1 vs white (both fail), so buttons in this green should use black text.

Format cheatsheet

• HEX: #RRGGBB, the compact CSS standard; shorthand #RGB expands each digit (#1AF → #11AAFF).
• RGB: channels 0-255, easy to tweak one channel at a time.
• HSL: hue (0-360°), saturation, lightness; best for palettes.
• Alpha: append two hex digits (#1E90FF80 ≈ 50% opaque) or use rgba(…) / hsla(…); it's preserved across all fields and shown over a checkerboard.

Contrast, shades, and edge cases

The contrast checker follows the WCAG 2 formula: each color is reduced to a relative luminance and the ratio (L1 + 0.05) / (L2 + 0.05) is compared against 4.5:1 (AA) and 7:1 (AAA) for normal-size text (large text needs 3:1 / 4.5:1). Ratios use the fully opaque color, so alpha is ignored there. Named colors are resolved by the browser's own parser, so anything CSS accepts (tomato, transparent) works, and the eyedropper button appears only where the EyeDropper API exists (currently Chromium browsers).

FAQ

What is HSL good for?

How is the contrast ratio computed?

What's #RRGGBBAA?

Why doesn't HEX → HSL → HEX always round-trip exactly?

More questions? Browse the full FAQ.

Once your brand color passes contrast, drop its HEX value into the QR code generator to build an on-brand QR code, or keep your design tokens tidy with the JSON formatter for theme and token files.