Last updated: May 2026
Pick a color visually or enter a HEX, RGB, or HSL value and instantly get every color format — HEX, RGB, HSL, CMYK, and CSS-ready values.
Pick a Color
Enter a Value
RGB Sliders
Color Values
Color Palette
Click any swatch to select it
Contrast Check
Every color on screen is ultimately encoded as a combination of red, green, and blue light intensities — but there are several ways to express that combination, each suited to a different use case. HEX codes (like #3B82F6) are the dominant format in web CSS because they are compact and easy to copy-paste. RGB separates the three channels into explicit integer values (0–255 each) and is natural when you are programmatically blending or animating colors. HSL — Hue, Saturation, Lightness — maps most closely to how humans think about color: pick a hue on the color wheel, dial in how vivid it is, then control how light or dark it appears. Web designers often prefer HSL because making a color 10% lighter is a single number change, whereas the equivalent HEX adjustment requires recalculating all three channels.
WCAG (Web Content Accessibility Guidelines) contrast ratios quantify how readable text is against its background by comparing the relative luminance of two colors. A ratio of 4.5:1 is the minimum for normal body text at the AA conformance level; large text (18pt+) only needs 3:1. The stricter AAA level requires 7:1 for normal text. These thresholds exist because roughly 8% of men and 0.5% of women have some form of color vision deficiency, and low-contrast text is difficult for everyone in bright sunlight or on low-quality displays.
| Format | Example | Best Used For |
|---|---|---|
| HEX | #FF5733 | CSS stylesheets, design tokens, copy-paste sharing |
| HEX (8-digit) | #FF573380 | HEX with alpha transparency (last two digits) |
| RGB | rgb(255, 87, 51) | CSS, programmatic color blending, canvas APIs |
| RGBA | rgba(255, 87, 51, 0.5) | CSS with transparency (alpha 0–1) |
| HSL | hsl(11, 100%, 60%) | Design systems, theming, easy lightness tweaks |
| HSLA | hsla(11, 100%, 60%, 0.5) | HSL with transparency |
| WCAG AA (normal text) | 4.5:1 ratio | Minimum for body text accessibility compliance |
| WCAG AAA (normal text) | 7:1 ratio | Enhanced accessibility for critical interfaces |
#3B82F6 splits into three two-digit hex pairs: 3B, 82, F6. Convert each from base-16 to base-10: 3B = 59, 82 = 130, F6 = 246. Result: rgb(59, 130, 246) — the familiar Tailwind blue-500. This picker does the conversion instantly, but knowing the math helps when you need to manipulate channels programmatically.#FFFFFF) on a teal button (#0D9488). Paste #0D9488 into the picker and check the "On White / On Black" contrast display. The teal-on-white contrast is approximately 3.7:1 — which fails WCAG AA for normal text (needs 4.5:1). Darkening the teal to #0F766E raises the contrast to 4.7:1, passing AA. The white-on-teal contrast (the button itself) is also 4.7:1, passing as well.What is a HEX color code?
A HEX color code is a six-character string (often prefixed with #) that encodes a color as three two-digit hexadecimal numbers representing the red, green, and blue channels. Each channel ranges from 00 (none) to FF (full intensity, decimal 255). #000000 is black, #FFFFFF is white, and #FF0000 is pure red.
What is the difference between RGB and HSL?
RGB describes a color by how much red, green, and blue light to mix (each 0–255). HSL describes it by hue (0–360°, position on the color wheel), saturation (0–100%, how vivid), and lightness (0–100%, from black to white). HSL is often more intuitive for design work because you can adjust brightness without touching hue or saturation.
What is a WCAG contrast ratio?
A WCAG contrast ratio compares the relative luminance of a foreground color and a background color. Luminance is calculated using a standardized formula that accounts for human perceptual sensitivity (we see green as brighter than blue at the same intensity). The ratio is always expressed as X:1, where higher is more contrast. Pure black on white yields the maximum of 21:1.
What contrast ratio is required for accessibility?
WCAG 2.1 Level AA — the most widely required standard — mandates 4.5:1 for normal text and 3:1 for large text (18pt regular or 14pt bold). Level AAA raises those thresholds to 7:1 and 4.5:1 respectively. UI components and graphical elements need at least 3:1 against adjacent colors. Most accessibility auditors and legal compliance frameworks reference the AA level.
How do I convert a HEX color to RGB manually?
Split the six-character HEX into three two-character pairs. Convert each pair from hexadecimal to decimal: the digits 0–9 map to themselves, A=10, B=11, C=12, D=13, E=14, F=15. For a two-digit hex number like "B4", compute (11 × 16) + 4 = 180. So #B4D455 becomes rgb(180, 212, 85). This picker handles it automatically, but the math is straightforward.