Color Picker Guide: RGB, HEX, and HSL Color Codes Explained

Three Ways to Express Colors in Web Design

HEX: #RRGGBB — six hexadecimal characters representing red, green, blue values. Example: #e60000 (bright red), #0099e6 (sky blue), #ffffff (white), #000000 (black). Most common format in CSS.

RGB: rgb(R, G, B) — three decimal numbers 0-255 for each color channel. Example: rgb(230, 0, 0) is the same as #e60000. The rgba() variant adds an alpha (opacity) channel: rgba(230, 0, 0, 0.5) is 50% transparent red.

HSL: hsl(Hue, Saturation, Lightness) — more intuitive for designers. Hue is 0-360 degrees on the color wheel. Saturation 0-100% (grey to vivid). Lightness 0-100% (black to white). Example: hsl(0, 100%, 45%) is red.

Converting Between Formats

HEX to RGB: Each pair of HEX digits converts to decimal. #e60000: e6=230, 00=0, 00=0 → rgb(230, 0, 0).

RGB to HEX: Convert each decimal to two hexadecimal digits. 230=e6, 0=00, 0=00 → #e60000.

Most web design tools handle conversion automatically. Lazyblink Color Picker lets you visually pick a color and see all three formats simultaneously.

Choosing Colors for Websites

60-30-10 rule: 60% dominant color (background), 30% secondary color (text, sections), 10% accent color (CTAs, highlights).

Contrast ratio for readability: Text and background need sufficient contrast. WCAG AA standard requires 4.5:1 contrast ratio for normal text. A white (#ffffff) background with #767676 grey text barely meets AA standard.

Color psychology brief: Red — urgency, action, sale. Blue — trust, calm, professional. Green — success, health, positive. Orange — energy, enthusiasm. Purple — luxury, creativity. Yellow — caution, attention.

Tools for Color Selection

Lazyblink Color Picker: Pick colors visually, convert between formats.

Coolors.co: Generate color palettes.

Paletton.com: Explore color harmonies (complementary, analogous, triadic).