Enter a hex code or RGB triple; we’ll convert to the other formats and show a swatch.
Color codes are not arbitrary — they have precise logic worth understanding
Hex color codes like #3A7BD5 encode three color channels — red, green, blue — as two-digit hexadecimal pairs. #3A is 58 in decimal, #7B is 123, #D5 is 213. Those three numbers define exactly how much red, green, and blue light mix to produce the color on screen. Because each channel runs from 0 to 255, there are 16,777,216 possible hex colors. CSS, SVG, HTML canvas, and most design tools accept hex natively.
HSL (Hue, Saturation, Lightness) is often more useful than RGB for design work because it maps to how humans think about color. Hue is the color wheel position (0-360 degrees), saturation is the color intensity, and lightness is brightness. Adjusting only the lightness value in HSL gives you reliable shades of a color without shifting its hue — something that is genuinely difficult to do predictably in RGB space.
Frequently asked questions
What is the difference between hex 3-digit and 6-digit color codes?
Three-digit hex (#RGB) is shorthand for six-digit hex (#RRGGBB) where each digit is doubled. So <code>#A3F</code> expands to <code>#AA33FF</code>. This shorthand only works when both digits of each channel are identical. It saves a few characters in CSS but represents the same 4,096-color subset of the full 16.7 million colors. When in doubt, use the 6-digit form — it is always valid and unambiguous.
Why do colors look different on screen versus printed?
Screens use <strong>additive color mixing</strong> (RGB: light added together), while printers use <strong>subtractive mixing</strong> (CMYK: ink absorbs light). RGB can represent vivid, saturated neons that simply cannot be reproduced in CMYK — they are 'out of gamut' for print. If you design in hex/RGB for a print project without converting to CMYK, your printer's color management software will approximate the colors, often making them look duller than expected.
What is the alpha channel and how does it work in CSS?
Alpha controls opacity on a 0-1 scale. In CSS, <code>rgba(58, 123, 213, 0.5)</code> renders the color at 50% opacity. The 8-digit hex format <code>#3A7BD580</code> encodes alpha in the final two hex digits — <code>80</code> in hex equals 128 in decimal, or roughly 50% opacity. Browser support for 8-digit hex is solid in modern browsers but may cause issues in older IE-era codebases. The <code>rgba()</code> format is safer for broad compatibility.
How do I find the hex code for a color I see on a website?
The most reliable method is your browser's DevTools. Right-click any element, select Inspect, and find the color property in the Styles panel — Chrome and Firefox both show clickable color swatches that display hex, RGB, and HSL values. Alternatively, browser extensions like <strong>ColorZilla</strong> let you eyedropper any pixel on screen. For design assets, tools like Figma and Adobe XD show hex values directly in the fill inspector.