What is a hex color code?
A hex color code (hexadecimal color) is the most common way to specify colors in web design and CSS. It is written as a # followed by six hexadecimal characters — two each for the red, green, and blue channels: #RRGGBB. Each pair ranges from 00 (none) to FF (full), giving 16,777,216 possible color combinations.
Examples: #000000 is black, #FFFFFF is white, #FF0000 is pure red. A shorthand form (#RGB) works when both digits of each channel are the same — #FF4400 can be written as #F40. An eight-character form (#RRGGBBAA) adds an alpha (opacity) channel.
HEX color codes
Hex codes are used in HTML, CSS, SVG, and design tools. They are compact, unambiguous, and universally supported. In CSS you can write them in lowercase or uppercase — #f04a00 and #F04A00 are identical. Use the color picker above to find the hex code for any color.
RGB colors
rgb(r, g, b) expresses each channel as an integer from 0 to 255. The function also accepts an opacity value: rgba(255, 68, 0, 0.5) renders at 50% opacity. In CSS Color Level 4, the slash syntax rgb(255 68 0 / 50%) is preferred and rgba() is an alias for rgb().
HSL colors
hsl(hue, saturation%, lightness%) is often more intuitive for designers. Hue is a degree on the color wheel (0–360°), saturation controls vividness, and lightness controls brightness. Adjusting only the lightness while keeping hue and saturation constant produces tints and shades of the same color — useful for generating UI color scales.
HTML color codes and CSS named colors
CSS defines 140 named colors that can be used directly in HTML and CSS without a hex code — color: tomato, background: steelblue, border-color: goldenrod. Common names: black, white, red, green, blue, gray, orange, purple, pink, brown. Use named colors for readability in source code and hex codes when you need a precise color match.
Choosing accessible color codes
WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold) against its background. Dark text on a light background or light text on a dark background are the safest combinations. Tools like browser dev tools' contrast checker can evaluate any two hex codes.
Frequently asked questions
How do I find the hex code of a color?
Use the color picker above — drag to any color and the hex code, RGB, and HSL values update instantly. In design tools: Figma, Photoshop, and Sketch show the hex code in the fill/color panel. In a browser: open DevTools, inspect an element, and click the color swatch next to any CSS color value to open an in-browser color picker showing the hex code. On macOS, the built-in Digital Color Meter app shows hex codes for any pixel on screen.
What is the difference between HEX and RGB colors?
They represent the same color in different formats. HEX (#FF4400) encodes each channel as two hexadecimal digits. RGB (rgb(255, 68, 0)) uses decimal integers 0–255. Both are supported everywhere in CSS — use whichever is more readable for your workflow. Hex codes are more compact; RGB makes it easier to adjust individual channels mathematically.
What is RGBA?
rgba(r, g, b, a) is RGB with an added alpha channel for opacity. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque) — for example, rgba(255, 0, 0, 0.5) is 50% transparent red. In modern CSS, rgb(255 0 0 / 50%) is equivalent.
What are CSS color names?
CSS defines 140 named colors — from aliceblue to yellowgreen — that browsers recognize without a hex code. They cover common colors (red, blue, green) and more specific shades (coral, teal, lavender). Named colors are convenient for prototyping but hex or RGB is usually more precise in production.