Developer

Color Picker & HEX Converter

Pick colors and convert between HEX, RGB, and HSL

#3b82f6

Sample Colors

HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)

Color Formats in Web Design: HEX, RGB, and HSL

Every color on a screen is defined by mixing red, green, and blue light at different intensities — this is the RGB color model. Web designers use three common formats to express these colors, each with different strengths.

HEX Color Codes

HEX codes are the most common format in web development. The format #RRGGBB uses hexadecimal notation (base 16, digits 0-9 and A-F) where each pair of digits represents the 0-255 intensity of one channel:

  • #000000 = black (all channels at 0)
  • #FFFFFF = white (all channels at maximum 255)
  • #FF0000 = pure red
  • #3B82F6 = a medium blue (Tailwind's blue-500)
  • #F59E0B = amber/gold

A 3-digit shorthand exists for colors where both digits of each channel are identical: #FFF = #FFFFFF, #F00 = #FF0000, #369 = #336699.

RGB Color Values

RGB uses decimal numbers (0-255) for each channel. It is easier to understand and manipulate than HEX:

  • rgb(255, 0, 0) = red
  • rgb(0, 128, 0) = dark green
  • rgb(59, 130, 246) = blue (Tailwind blue-500)

RGBA adds a fourth channel — alpha (transparency): rgba(59, 130, 246, 0.5) = 50% transparent blue. This is the format to use when you need semi-transparent overlays, shadows, or backgrounds.

HSL: The Designer's Color Format

HSL (Hue, Saturation, Lightness) is the most human-intuitive color format:

  • Hue (0-360): The color angle on the color wheel — 0° = red, 120° = green, 240° = blue
  • Saturation (0-100%): 0% = gray, 100% = full color intensity
  • Lightness (0-100%): 0% = black, 50% = pure color, 100% = white

HSL shines when creating color palettes. To make a lighter version of blue-500 (hsl(217, 91%, 60%)), just increase the lightness: hsl(217, 91%, 75%) = blue-300. This is far more intuitive than trying to calculate lighter HEX values manually.

Practical Color Tips for Developers and Designers

  • Use CSS custom properties: Define your brand colors as --color-primary: #3b82f6 and reference them everywhere. This makes rebranding a one-line change.
  • Check contrast ratios: Low-contrast text fails WCAG accessibility standards and is harder to read for all users, not just those with visual impairments.
  • Build a consistent palette: Use HSL to create 5–9 systematic shades of each brand color (e.g., 50, 100, 200, 300, 400, 500, 600, 700, 800, 900) by varying the lightness in HSL while keeping hue and saturation constant.
  • Consider color blindness: About 8% of men and 0.5% of women have some form of color blindness (mostly red-green). Avoid using color as the only indicator of meaning.

Frequently Asked Questions

What is a HEX color code?
A HEX color code is a 6-digit (or 3-digit shorthand) hexadecimal representation of a color in the RGB color model. The format is #RRGGBB where RR, GG, BB are two-digit hex values (00-FF) representing the intensity of red, green, and blue respectively. #FF0000 is pure red, #00FF00 is pure green, #0000FF is pure blue, #000000 is black, #FFFFFF is white.
What is the difference between RGB and HEX colors?
RGB and HEX represent the same color model — they are just different notations. rgb(255, 0, 0) and #FF0000 both mean the same pure red color. HEX is preferred in CSS for brevity; rgb() is preferred when you need to manipulate individual channels or add transparency (rgba). They are interchangeable in most design tools.
What is HSL and when should I use it?
HSL stands for Hue, Saturation, Lightness. Hue is the color wheel position (0-360°), saturation is the color intensity (0-100%), and lightness is brightness (0-100% from black to white). HSL is more intuitive for designers because adjusting the lightness or saturation while keeping the hue constant creates natural color variations — like tints and shades of the same color.
How do I convert hex to RGB?
Split the 6-digit hex code into three pairs: RR, GG, BB. Convert each pair from hexadecimal to decimal. Example: #3B82F6 → R=3B=59, G=82=130, B=F6=246. So rgb(59, 130, 246). For a 3-digit hex like #F60, expand each digit: #FF6600 → rgb(255, 102, 0).
What are web-safe colors?
Web-safe colors are a set of 216 colors that were designed to display consistently across all monitors and operating systems in the early internet era (8-bit display). Each color uses only the hex values 00, 33, 66, 99, CC, or FF in each channel (e.g., #336699, #CCFF00). Modern displays support millions of colors, making "web-safe" a largely obsolete concept — though some minimal design systems still prefer limited palettes for consistency.
What is color accessibility (WCAG contrast)?
WCAG (Web Content Accessibility Guidelines) requires minimum color contrast ratios for text to be readable by users with low vision. Normal text requires a contrast ratio of at least 4.5:1 (AA level) or 7:1 (AAA level) between text and background. Large text (18pt+ or 14pt bold) needs 3:1 (AA). Using this color picker, you can find the HEX/RGB values and check contrast using a dedicated contrast checker tool.

Related Tools

Password Generator
Generate strong, random passwords instantly
JSON Formatter & Validator
Format, validate, and minify JSON instantly