Color Picker Guide: HEX Codes, Palettes, and Contrast Ratios

By ZeroFee Tools · October 4, 2026 · 7 min read

Every design decision eventually becomes a color code, and the wrong format at the wrong moment wastes time: CSS wants HEX or RGB, design tools speak HSL, and accessibility audits demand contrast ratios. Hunting through documentation to convert between them by hand is slow, and eyeballing accessibility is how sites ship text that half their visitors cannot read.

The ZeroFee Tools color picker is a small studio, not just a picker. Choose any color visually or type a HEX code, and get HEX, RGB, and HSL side by side with one-click copy buttons. Generate ten tints and ten shades from any base color with one click, and check contrast ratios against white, black, or any custom color with WCAG AA/AAA pass-fail badges. Once your palette is set, size your assets with the aspect ratio calculator, and this guide explains the conversions, the palette logic, and the accessibility math.

How do I convert HEX to RGB?

Split the six HEX digits into three pairs and convert each from base-16 to base-10: for example, #7C3AED becomes rgb(124, 58, 237) because 7C equals 124, 3A equals 58 and ED equals 237. The converter above does this instantly, along with HSL. Three-digit HEX is shorthand: #F0A expands to #FF00AA by doubling each digit.

Split the six HEX digits into three pairs and convert each from base-16 to base-10: for example, #7C3AED becomes rgb(124, 58, 237) because 7C equals 124, 3A equals 58, and ED equals 237. Each pair controls one channel: red, green, blue. The converter above does this instantly, along with HSL, so you never need the math in practice.

Three-digit HEX is shorthand worth knowing: #F0A expands to #FF00AA by doubling each digit. CSS accepts both forms, so recognizing the shorthand helps when reading other people's code. HSL is the third format on the panel: hue as an angle on the color wheel (0 to 360), saturation as a percentage, and lightness as a percentage. Designers reach for HSL when they want to adjust a color's feel without changing its identity, because moving lightness up or down keeps the hue constant.

The practical workflow is simple. Grab a HEX from a mockup, paste it in, and copy whichever format your context needs: HEX for CSS and design tokens, RGB when you need per-channel control (including alpha as RGBA), HSL when tuning. The aspect ratio calculator is the natural next step when those colors become actual assets at actual sizes, and if you are auditing an existing site, the standalone color contrast checker dives deeper into accessibility pairings.

What is a good contrast ratio for text?

WCAG 2.1 requires at least 4.5:1 for normal text (AA) and 7:1 for the stricter AAA level; large text (18pt and up) needs 3:1. The checker compares your color against white, black and a custom color with pass/fail badges. Low contrast is the most common accessibility failure on the web, and it affects anyone on a dim or sunlit screen.

WCAG 2.1 requires at least 4.5:1 for normal text (AA) and 7:1 for the stricter AAA level; large text (18pt and up) needs 3:1. The checker above compares your color against white, black, and a custom color, and shows pass/fail badges for each level so you can fix accessibility before you ship.

Low contrast is the most common accessibility failure on the web, and it affects far more people than screen-reader users alone. Anyone reading on a dim laptop, a sunlit phone, or an aging monitor benefits from sufficient contrast. That gray-on-light-gray secondary text that looks elegant in a design tool is often illegible in real conditions, which is why the badges matter more than taste.

Fixing a failure is usually a shade problem, not a hue problem. Nudge the text color a few steps darker or the background a few steps lighter until the ratio clears 4.5:1. The tints and shades generator is built for exactly this: pick your brand color, grab a darker shade for text, and re-check. One habit that prevents most failures is testing the pairing before it ships rather than during an audit, when changing colors means rework across the whole design system.

What are tints and shades, and how do I build a palette?

Tints are a color mixed with white (lighter versions) and shades are a color mixed with black (darker versions). Designers use them to build harmonious palettes: light tints for backgrounds, the base color for primary elements, and dark shades for text and hover states. The palette generator above creates ten steps of each from any base color.

Tints are a color mixed with white (lighter versions) and shades are a color mixed with black (darker versions). Designers use them to build harmonious palettes: light tints for backgrounds, the base color for primary elements like buttons and links, and dark shades for text and hover states. Because every step shares the same hue, the palette always looks coordinated.

The generator creates ten steps of each from any base color, and every swatch is clickable to copy its HEX code. A practical recipe: pick your brand color as the base, take a light tint for section backgrounds, use the base for calls to action, and take a dark shade for headings and body text. That four-color system covers most of a marketing site without a single arbitrary choice.

Ten steps exist so you have room to tune. A tint that is barely distinguishable from white will not work as a card background; a shade that is nearly black loses the brand's character. Click through the steps and copy the ones that actually look right at real sizes, then run the text pairings through the contrast checker. Palette building and contrast checking are one loop, not two tasks: the shades give you the darker options, and the badges tell you which ones are safe to ship.

How to use the color picker in 4 steps

1. Pick a color. Use the visual picker, type a HEX code, or press Random for inspiration.
2. Copy the code. Grab the HEX, RGB, or HSL value with one click for your CSS or design tool.
3. Build the palette. Click any tint or shade swatch to copy its HEX for backgrounds, buttons, and text.
4. Check the contrast. Pick a second color and read the WCAG AA/AAA badges before shipping.

5 practical tips for working with color

• Test contrast before shipping. Checking a pairing during design costs seconds; fixing it after an audit costs rework across the design system.
• Use shades for text, tints for backgrounds. Darker variants of your brand color read as text; lighter variants make calm backgrounds.
• Learn the HEX shorthand. #F0A means #FF00AA, which speeds up reading other people's stylesheets.
• Prefer HSL for tuning. Adjusting lightness keeps the hue constant, which is the cleanest way to derive a family of related colors.
• Re-check on real screens. A pairing that passes on your monitor can still struggle on dim or sunlit displays, so the 4.5:1 minimum is a floor, not a target.

Frequently asked questions