Color Theory Basics: Complete Guide to RGB, HEX, and HSL

In web design and digital media, colors are described through mathematical models. Different color models describe colors from different perspectives, each with its own use cases: • RGB: An additive color model based on red, green, and blue — ideal for screen display • HEX: Hexadecimal representation of RGB — the most common color format in CSS • HSL: Based on hue, saturation, and lightness — more intuitive for human color perception • CMYK: A subtractive model based on cyan, magenta, yellow, and black — suitable for print Understanding the relationships and conversions between these models is a fundamental web design skill.

RGB stands for Red, Green, and Blue — the three primary colors of light. Each channel ranges from 0-255: • rgb(255, 0, 0) → Pure red • rgb(0, 255, 0) → Pure green • rgb(0, 0, 255) → Pure blue • rgb(255, 255, 255) → White (all light mixed) • rgb(0, 0, 0) → Black (no light) RGB is an additive model — when three lights mix together, they become brighter, eventually becoming white. This is opposite to our everyday experience of mixing paints (subtractive model). Using RGB in CSS: color: rgb(52, 152, 219); /* A nice blue color */

HEX (hexadecimal) color codes are another way to represent RGB values and are the most common in CSS. Format: #RRGGBB • Each pair of digits represents one channel (R, G, B) • Uses hexadecimal digits (0-9, A-F) • Each channel ranges from 00-FF (decimal 0-255) Common colors: • #FF0000 → Red • #00FF00 → Green • #0000FF → Blue • #FFFFFF → White • #000000 → Black Shorthand: If each channel's two digits are the same, you can abbreviate: • #FF0000 → #F00 • #336699 → #369 Conversion: RGB (52, 152, 219) → 52 = 34, 152 = 98, 219 = DB → #3498DB

HSL stands for Hue, Saturation, and Lightness — the most intuitive color model. • Hue (H): 0-360 degrees, representing position on the color wheel 0° = Red, 120° = Green, 240° = Blue • Saturation (S): 0-100%, where 0% is gray and 100% is most vivid • Lightness (L): 0-100%, where 0% is black, 50% is normal, and 100% is white HSL advantages: 1. Adjusting brightness: Simply change L value — the hue stays the same 2. Adjusting vibrancy: Simply change S value 3. Creating color themes: Fix S and L, change only H to get a harmonious set of colors Using in CSS: color: hsl(204, 70%, 53%); /* Same blue color */

Common color matching methods: 1. Complementary colors: Two colors opposite on the color wheel (e.g., red and cyan) — strong contrast 2. Analogous colors: Adjacent colors on the color wheel (e.g., blue and purple) — harmonious 3. Triadic colors: Three evenly spaced colors on the wheel — vibrant and diverse 4. Monochromatic: Same hue, different saturation and lightness — clean and elegant Practical tips: • Use no more than 3 main colors, plus black/white/gray as support • Ensure sufficient contrast between background and text colors (WCAG recommends at least 4.5:1) • Consider color-blind users — don't rely solely on color to convey information Gigi Tools provides a complete set of color tools: Color Picker, HEX to RGB, RGB to HEX, HSL Converter, and Gradient Generator to help you handle all your color needs.