HTML Color Picker: How Web Colors Work

How Web Colors Work

Colors on the web are specified using several formats, all of which ultimately describe the amounts of Red, Green, and Blue light to mix. Computer screens are additive — mixing full red + green + blue gives white; mixing none gives black.

Hex Color Codes

The most common web color format. A hex code starts with # followed by 6 hexadecimal digits (0–9, A–F).

• #RRGGBB — first two digits = red, next two = green, last two = blue
• #FF0000 = pure red (FF = 255 red, 00 = 0 green, 00 = 0 blue)
• #00FF00 = pure green
• #0000FF = pure blue
• #FFFFFF = white
• #000000 = black

Shorthand: When each pair of digits is the same, you can use 3 digits. #FF6600 = #F60.

RGB Color Format

RGB specifies each channel as a value from 0 to 255. rgb(255, 0, 0) = pure red. Used in CSS and many design tools. The same color in hex (#FF0000) and in RGB (255, 0, 0) are identical — just different notations.

HSL Color Format

HSL (Hue, Saturation, Lightness) is more intuitive for humans to work with:

• Hue: A degree on the color wheel (0–360). Red = 0°, Green = 120°, Blue = 240°
• Saturation: How vivid the color is (0% = gray, 100% = full color)
• Lightness: How light the color is (0% = black, 50% = normal, 100% = white)

Example: hsl(200, 80%, 50%) = a vivid medium blue.

RGBA and HSLA (Transparent Colors)

Adding an alpha channel enables transparency. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque).

• rgba(255, 0, 0, 0.5) = 50% transparent red
• hsla(120, 100%, 50%, 0.3) = 30% transparent bright green

CSS Named Colors

CSS supports 140+ named colors: red, blue, coral, darkseagreen, mediumorchid, etc. These are convenient for quick prototyping but less precise than hex or RGB values.

How to Use a Color Picker

1. Select the general color area on the spectrum bar.
2. Move the selector in the color square to fine-tune shade and saturation.
3. Adjust the opacity slider if you need transparency.
4. Copy the hex, RGB, or HSL value in the format your project needs.

Color Accessibility

When using colors in design, ensure sufficient contrast between text and background. The WCAG 2.1 standard requires a contrast ratio of at least 4.5:1 for normal text. Black (#000) on white (#FFF) has a contrast ratio of 21:1 — the maximum. Many color pickers include contrast ratio checkers.