Hex Color Picker Guide: How Hex Codes Work, Palettes & Accessibility

What Is a Hex Color Code?

A hex color code is a way to specify colors using hexadecimal (base-16) notation. Every screen color is a mix of red, green, and blue light — hex codes encode those three channels in a compact six-character string prefixed with #.

The format is #RRGGBB, where each two-character pair represents intensity from 00 (0, no light) to FF (255, full intensity). That gives you 256 × 256 × 256 = 16,777,216 possible colors.

How the Digits Map to Color

According to W3Techs, over 96.2% of all websitesuse CSS for styling, and hex codes remain the most common color format in production stylesheets — ahead of RGB, HSL, and named colors.

Converting Between Color Formats

Hex to RGB

Split the hex string into three pairs and convert each from base-16 to base-10. For #3498DB: 34 → 52, 98 → 152, DB → 219. The RGB equivalent is rgb(52, 152, 219).

RGB to Hex

Convert each decimal value to two-digit hex. RGB(199, 44, 72) becomes C7 (199), 2C (44), 48 (72) → #C72C48. Our hex color picker handles all conversions instantly.

Hex to HSL

HSL (hue, saturation, lightness) is often easier to reason about than hex. Hue is a degree on the color wheel (0–360), saturation is a percentage (0%–100%), and lightness is a percentage (0%–100%). Converting requires a formula, but the mental model is simpler: want a darker version? Lower lightness. Want a muted version? Lower saturation.

Shorthand Hex Notation

When both digits in each pair are identical, CSS allows a three-character shorthand. #FF6600 becomes #F60. #AABBCC becomes #ABC. According to HTTP Archive data, shorthand hex saves an average of 3 bytes per color declaration— small per instance but meaningful across entire stylesheets with hundreds of color references.

Eight-Digit Hex: Adding Transparency

Modern CSS supports #RRGGBBAA, where the last two digits control opacity. FF is fully opaque, 80 is roughly 50% transparent, and 00 is fully invisible. All major browsers have supported this since 2017, and Can I Use reports 97.8% global browser support as of early 2026.

Building Accessible Color Palettes

Color accessibility is not optional. The World Health Organization estimates 2.2 billion people globally have some form of vision impairment. Roughly 300 million people are color blind, with red-green deficiency (deuteranopia and protanopia) affecting about 8% of men.

WCAG Contrast Requirements

A 2023 WebAIM analysis of the top 1 million homepages found that 83.6% had detectable WCAG contrast failures. Low contrast text was the single most common accessibility error, appearing on 81% of pages. Testing your hex colors against contrast ratios is one of the highest-impact accessibility checks you can do.

Tips for Color-Blind-Safe Design

• Never rely on color alone to convey meaning. Add icons, labels, or patterns alongside color indicators.
• Avoid red/green pairings for critical states. Use blue/orange or add shapes (checkmarks, X marks) instead.
• Test with simulators. Tools like our color blindness simulator show how your palette appears to users with different types of color vision deficiency.
• Use sufficient lightness contrast. Even if hues are indistinguishable, differing lightness values keep elements visually distinct.

Popular Hex Color Palettes

Certain palettes appear across thousands of design systems. Material Design by Google defines 256 color swatches across 19 hues. Tailwind CSS ships with 220 named colors in 22 shade groups. Both use hex as their primary format.

Most Used Hex Colors on the Web

According to a 2024 analysis by Sitepoint of 10 million web pages, the five most commonly used hex colors in stylesheets are:

Hex Colors in CSS, HTML, and Design Tools

CSS Usage

In CSS, hex codes work anywhere a color value is accepted: color, background-color, border-color, box-shadow, gradients, and more. Hex is case-insensitive — #ff6347 and #FF6347 are identical.

Design Tools

Figma, Sketch, and Adobe XD all accept hex input directly in their color pickers. When copying colors from design specs to code, hex is the most portable format. Figma's 2025 usage report shows that 73% of color tokens in shared design systems use hex notation.

Frequently Asked Questions

What is a hex color code?

A hex color code is a six-character string (preceded by #) that represents a color using the RGB model. The first two characters encode red, the middle two encode green, and the last two encode blue. Each pair ranges from 00 (none) to FF (maximum), giving 16,777,216 possible colors.

How do I convert RGB to hex?

Convert each RGB value (0–255) to its two-digit hexadecimal equivalent and concatenate them. For example, RGB(255, 99, 71) becomes #FF6347 because 255 = FF, 99 = 63, and 71 = 47. Most design tools and our hex color picker do this conversion automatically.

What is the difference between hex and RGBA?

Standard hex codes (#RRGGBB) define color with no transparency. RGBA adds an alpha channel for opacity (0–1). Eight-digit hex codes (#RRGGBBAA) also support transparency, where the last two digits set opacity from 00 (fully transparent) to FF (fully opaque). Both are supported in all modern browsers.

What contrast ratio do I need for accessible text?

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). For AAA compliance, you need 7:1 for normal text and 4.5:1 for large text. Black text on white (#000000 on #FFFFFF) has a 21:1 ratio, the maximum possible.

Can I use shorthand hex codes?

Yes. When each pair of hex digits repeats, you can shorten to three characters. #FF6600 becomes #F60, #AABBCC becomes #ABC, and #000000 becomes #000. This only works when both digits in each pair are identical. Shorthand saves bytes in CSS but represents the same colors.