Color Tools
Pick colors and convert between HEX, RGB, HSL, HSB, and CMYK. Generate palettes and check contrast.
Shades & Tints
Palette
Contrast Checker
Aa Sample Text
The quick brown fox jumps
What this tool actually does
Color Tools is four utilities in one page: a converter between the five color notations you meet in real work (HEX, RGB, HSL, HSB, CMYK), a shade/tint generator, a palette builder based on color-wheel relationships, and a WCAG contrast checker. Designers use it to translate a brand HEX into HSL for CSS variables; developers use it to check that text passes accessibility contrast before shipping. Every conversion is pure math executed in your browser — nothing is looked up remotely.
A worked example
Take #3B82F6, the blue used across this site. The converters on this page produce these values (computed live by the tool's own code):
- RGB → rgb(59, 130, 246)
- HSL → hsl(217, 91%, 60%)
- CMYK → cmyk(76%, 47%, 0%, 4%)
- Contrast vs white → 3.68:1 (fails AA for normal text — use it for large text or backgrounds)
- Contrast vs #0F172A → 4.85:1 (passes AA for normal text)
That contrast line is the kind of result that surprises people: a perfectly readable-looking mid blue often fails WCAG AA against white for body text. This is why checking with real math — the WCAG relative luminance formula, which this tool implements — beats eyeballing.
Understanding the palette suggestions
The palette section derives colors by rotating the hue on the HSL color wheel while keeping saturation and lightness fixed: the complementary color sits 180° opposite (maximum contrast of hue), analogous colors sit ±30° (harmonious neighbors, good for backgrounds and accents), and the two triadic colors sit at 120° and 240° (balanced three-color schemes). The shades row re-renders your hue at ten lightness steps from 5% to 95% — useful for building a full design-token scale from one brand color.
CMYK, honestly
The CMYK value shown is the standard mathematical conversion from RGB. Real print output depends on the ICC profile, paper, and press — so treat the CMYK numbers as a starting point for your print designer, not a color-managed specification.
How to use Color Tools
- 1Enter a HEX color or pick one with the color picker.
- 2Copy any format: RGB, HSL, HSB, or CMYK.
- 3Explore shades, tints, and palette suggestions.
- 4Check contrast against a background for WCAG compliance.
Frequently Asked Questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt bold). AAA raises those to 7:1 and 4.5:1. UI components and graphics need 3:1.
What's the difference between HSL and HSB?
Both describe hue and saturation, but HSL's third axis is Lightness (50% is the pure hue, 100% is white) while HSB's is Brightness (100% is the pure hue at full saturation). CSS uses HSL; many design tools use HSB.
Are my colors saved?
Your ten most recent colors are kept in your browser's localStorage so they survive a reload. They never leave your device, and clearing site data removes them.
What's a complementary color?
The color directly opposite on the color wheel — a 180° hue rotation. Complementary pairs give maximum hue contrast, which is great for accents but harsh for large adjacent areas.
Why doesn't the CMYK match my print shop's numbers?
CMYK here is the device-independent formula conversion. Print shops convert through ICC color profiles specific to their press and paper, which shifts the numbers.
Limitations & Privacy
- CMYK values are mathematical conversions, not color-managed print specifications — confirm final values with your printer's ICC profile.
- Contrast is calculated with the WCAG 2.x relative-luminance formula. It's the legal/compliance standard, but perceptual contrast (APCA) can disagree at the margins.
- The 3-digit and 6-digit HEX formats are supported; 8-digit HEX with alpha is not, since contrast and CMYK aren't defined for transparent colors.
- Privacy: colors you pick are stored only in your browser's localStorage (recent-colors list). Nothing is transmitted.