UtilStax
Home/Utilities/Color Tools

Color Tools

Pick a color, get HEX, RGB, and HSL, and build copy-ready CSS gradients.

Pick and convert

HEX#2b3a67
RGBrgb(43, 58, 103)
HSLhsl(225, 41%, 29%)

Gradient builder

background: linear-gradient(135deg, #2b3a67, #c5963a);

Contrast checker

Contrast ratio: 11.03:1

Pass AA normal (4.5:1)Pass AA large (3:1)Pass AAA normal (7:1)Pass AAA large (4.5:1)

Large sample text (18pt+)

Normal sample text - body copy at this size needs a 4.5:1 ratio to meet WCAG AA, and 7:1 for AAA.

Ratios follow the WCAG 2.1 relative luminance formula. Large text means 18pt/24px regular or 14pt/18.5px bold and above.

Saved palettes

Sync saved items across devicesPROFiles never leave your browser - only these presets are stored.

Frequently asked questions

What's the difference between HEX, RGB, and HSL?

They describe the same color three ways. HEX (#2b3a67) is compact and universal in CSS. RGB lists red, green, and blue values. HSL (hue, saturation, lightness) is the most human-friendly for adjusting a color - change lightness without touching the hue.

Can I paste a 3-digit hex like #f90?

Yes - shorthand hex expands automatically (#f90 becomes #ff9900), and the RGB and HSL equivalents update live.

How do I use the gradient CSS?

Pick two colors and an angle, then copy the generated background property straight into your stylesheet. The preview above the controls shows exactly what you'll get.

Other utilities

Image Color Picker

Grab HEX/RGB from any pixel in an image

Text Tools

Count, convert case, diff, Markdown

QR Code Generator

Links, Wi-Fi, and contact codes