Hex Color Code Generator

Use the generator above to pick any color and get its hex code, RGB and HSL values, tints and shades, and ready-made color schemes. Below, we explain what hex color codes are, how to read and convert them, and how to choose a color scheme for your website or brand.

What Is a Hex Color Code?

A hex color code is a six-digit code, written after a #, that defines a color by how much red, green, and blue light it contains. The format is #RRGGBB: the first two digits are red, the next two green, and the last two blue.

Each pair is a hexadecimal (base-16) number from 00 to FF, which equals 0 to 255 in decimal. So #000000 is black (no light), #FFFFFF is white (full red, green, and blue), and #FF0000 is pure red.

Because each channel has 256 possible values, the #RRGGBB format can describe 256 × 256 × 256 = 16,777,216 colors.

Short Hex Codes and Transparency

• Three-digit shorthand: #RGB doubles each digit, so #0AF is the same as #00AAFF.
• Eight-digit hex with alpha: modern browsers support #RRGGBBAA, where the last pair sets opacity. #2F6BFF80 is the blue above at about 50% opacity. (Some design tools and Android use #AARRGGBB, with alpha first, so check which order your tool expects.)

How to Read a Hex Color Code

Hexadecimal uses the digits 0–9 and then the letters A–F for 10 through 15. To convert a two-digit hex pair to decimal:

1. Multiply the first digit by 16.
2. Add the second digit.

For example, hex 83 is (8 × 16) + 3 = 131 in decimal, and hex FF is (15 × 16) + 15 = 255, the maximum. So #83FF00 means red 131, green 255, blue 0: a bright yellow-green.

Hex to RGB Conversion

To convert hex to RGB, split the code into three pairs and convert each one. #2F6BFF becomes 2F = 47, 6B = 107, FF = 255, or rgb(47, 107, 255).

To go the other way, divide each RGB value by 16: the whole number is the first hex digit and the remainder is the second. Red 47 ÷ 16 = 2 remainder 15, which gives 2F. The generator above does both conversions instantly.

Common Hex Color Codes

Hex vs. RGB vs. HSL

All three describe the same colors; they’re just different notations. In CSS, these three lines set the same aquamarine background:

background-color: #7FFFD4;
background-color: rgb(127, 255, 212);
background-color: hsl(160, 100%, 75%);

• Hex is compact and the standard in design tools, brand guides, and most codebases.
• RGB is easier to read at a glance and makes adding transparency simple, e.g. rgb(127 255 212 / 50%).
• HSL (hue, saturation, lightness) is the easiest to adjust by hand: change the lightness to get a tint or shade without changing the hue.

CSS also accepts named colors like aquamarine, but there are only about 140 of them, so hex is the practical way to specify an exact shade.

Why Use Hex Color Codes?

Accuracy

A hex code identifies exactly one color. “Light blue” means different things to different people; #ADD8E6 does not.

Works in Every Tool

Figma, Photoshop, Canva, CSS, Tailwind, and virtually every design or development tool accept hex codes, so the same value moves cleanly from design to code.

Consistency

Picking colors by eye leads to near-duplicates: five slightly different blues across a site. Recording exact hex codes in a style guide or design tokens keeps every page, email, and social graphic on brand. This matters as much in UX and UI design as in code.

How to Choose a Color Scheme

Color schemes are built from positions on the color wheel. The generator above creates each of these from any starting color:

• Complementary: two colors opposite each other on the wheel. High contrast; good for a call-to-action that has to stand out.
• Analogous: neighbors on the wheel. Calm and cohesive; good for backgrounds and illustrations.
• Triadic: three colors evenly spaced around the wheel. Vibrant but balanced; usually one dominates and two accent.
• Split-complementary: a base color plus the two colors beside its complement. Strong contrast with less tension than a straight complementary pair.
• Monochromatic: tints and shades of a single hue. Simple and elegant, and easy to keep consistent.

A few practical tips:

• Start with one brand color and derive the rest from it with tints, shades, and one harmony.
• Use the 60-30-10 rule: roughly 60% neutral or dominant color, 30% secondary, 10% accent.
• Check contrast. WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. The generator shows each color’s contrast against white and black.
• Document your palette as hex codes in a brand guide or as design tokens so designers and developers use the same values.

Frequently Asked Questions

How many hex colors are there?

The six-digit #RRGGBB format covers 16,777,216 colors. Adding an alpha channel (#RRGGBBAA) gives each of those 256 levels of opacity.

Are hex codes case-sensitive?

No. #2f6bff and #2F6BFF are the same color.

What is the hex code for white and black?

White is #FFFFFF and black is #000000.

Conclusion

Hex codes are the common language of digital color: compact, exact, and supported everywhere. Use the generator at the top of this page to find a color, convert it, and build a scheme around it, then record those codes in your style guide so every page of your website stays consistent.