How Color Codes Work
Computer screens create colors by mixing red, green, and blue light at different intensities. Every color format—HEX, RGB, HSL—describes the same colors using different notation systems.
HEX to RGB Conversion
Step 1: Split HEX into 3 pairs: #FF5733
Step 2: Convert each pair from base-16 to base-10:
- FF (hex) = 15×16 + 15 = 255 (Red)
- 57 (hex) = 5×16 + 7 = 87 (Green)
- 33 (hex) = 3×16 + 3 = 51 (Blue)
Result: #FF5733 = rgb(255, 87, 51)
The HEX System Explained
HEX uses base-16 counting: 0-9 plus A-F, where A=10, B=11, C=12, D=13, E=14, F=15. Each HEX pair ranges from 00 (0 in decimal) to FF (255 in decimal).
| HEX Code | RGB Values | Color Name |
|---|---|---|
#FF0000 |
rgb(255, 0, 0) | ■ Pure Red |
#00FF00 |
rgb(0, 255, 0) | ■ Pure Green |
#0000FF |
rgb(0, 0, 255) | ■ Pure Blue |
#FFFF00 |
rgb(255, 255, 0) | ■ Yellow (Red + Green) |
#808080 |
rgb(128, 128, 128) | ■ Medium Gray (equal RGB) |
Why HSL is Better for Design
HSL separates color (Hue) from intensity (Saturation) and brightness (Lightness). This makes it easy to create color variations without guessing RGB values.
Worked Example: Creating a Button Color Scheme
You pick a primary button color: #3b82f6 (a nice blue). In HSL, this is hsl(217, 91%, 60%).
Now you can create variations by only changing Lightness:
- Hover state (darker): hsl(217, 91%, 50%) → #2563eb
- Disabled state (lighter): hsl(217, 91%, 80%) → #93c5fd
- Background tint: hsl(217, 91%, 95%) → #eff6ff
All three variations stay the same "blue" because the Hue (217°) stays constant.
HSL vs. HSV: Which to Use?
Both describe colors using Hue and Saturation, but they differ in the third value:
- HSL Lightness: 0% = black, 50% = pure color, 100% = white. Best for CSS.
- HSV Value: 0% = black, 100% = pure color. Common in Photoshop, Figma.
The same color in both systems: Teal #00d09c = HSL(165, 100%, 41%) = HSV(165, 100%, 82%). Notice the third value differs (41% vs 82%).
Color Shorthand
CSS allows 3-character HEX codes when each pair has duplicate digits:
#fff= #ffffff (white)#000= #000000 (black)#f00= #ff0000 (red)#369= #336699 (muted blue)
Frequently Asked Questions
What is HEX color code?
HEX is a 6-character code using base-16 (hexadecimal) numbers to represent RGB color values. Each pair of characters represents Red, Green, or Blue intensity from 00 (0) to FF (255). For example, #FF5733 means Red=255, Green=87, Blue=51—a coral orange color. The # prefix distinguishes it from regular numbers.
How do I convert HEX to RGB?
Split the 6 characters into 3 pairs and convert each from base-16 to base-10. For #3b82f6: 3b=59, 82=130, f6=246. So rgb(59, 130, 246). Quick reference: A=10, B=11, C=12, D=13, E=14, F=15. Calculate as: first digit × 16 + second digit.
What is HSL color format?
HSL stands for Hue (color, 0-360°), Saturation (intensity, 0-100%), and Lightness (brightness, 0-100%). The color wheel starts at red (0°), goes through green (120°), blue (240°), and back to red. hsl(217, 91%, 60%) is a saturated blue at medium brightness. Adjust L alone to get lighter/darker shades of the same color.
Which color format should I use in CSS?
All formats work everywhere. Use HEX for quick, compact colors (#3b82f6). Use RGB when you need transparency (rgba(59, 130, 246, 0.5) for 50% opacity). Use HSL when building color systems—changing lightness while keeping hue makes consistent palettes easy.
How do I find complementary colors?
Add 180° to the Hue value. If your color is hsl(217, 91%, 60%) (blue), its complement is hsl(37, 91%, 60%) (orange). For a triadic scheme (three colors), add 120° and 240°. For split-complementary, add 150° and 210°. This is why HSL is preferred for color theory.
What's the difference between HSL and HSV?
Both use Hue (color wheel position) and Saturation (intensity), but define brightness differently. In HSL, Lightness 50% gives the pure color—0% is black, 100% is white. In HSV, Value 100% gives the pure color—0% is black. The same teal (#00d09c) is HSL(165, 100%, 41%) but HSV(165, 100%, 82%). Web developers prefer HSL; designers using Photoshop/Figma often use HSV.