Every color you see on a screen is represented by a numeric code. Whether you are a web designer, developer or digital artist, understanding the three main color code systems — HEX, RGB and HSL — is essential. Each system describes the same colors from a different angle, and knowing when to use which one will make your workflow faster, your palettes more consistent and your code more readable.
HEX Color Codes
HEX (hexadecimal) is the most widely used color format in web design. A HEX code is a 6-character string prefixed with #, where each pair of characters represents the intensity of red, green and blue respectively. For example, #4CAF50 is a medium green.
Each channel uses two hexadecimal digits (0-9, A-F), giving 256 possible values per channel and over 16 million total colors. HEX codes are compact, easy to copy-paste and universally supported in CSS, design tools and image editors.
Example HEX Codes
#FFFFFF— pure white#000000— pure black#FF5733— vivid orange-red
RGB Color Model
RGB stands for Red, Green, Blue — the three primary colors of light that screens use to render color. An RGB value specifies each channel as a number from 0 to 255. For example, rgb(76, 175, 80) is the same green as#4CAF50.
RGB is intuitive for additive color mixing: rgb(0,0,0) is black (no light) and rgb(255,255,255) is white (all channels at full intensity). The RGBA variant adds an alpha channel for opacity, written asrgba(76, 175, 80, 0.5) for 50% transparency.
HSL Color Model
HSL stands for Hue, Saturation and Lightness. It describes colors in a way that aligns with how humans perceive them:
- Hue — the color itself, measured as a degree on a color wheel (0-360). Red is 0, green is 120, blue is 240.
- Saturation — the intensity of the color, from 0% (gray) to 100% (full color).
- Lightness — how light or dark the color is, from 0% (black) to 100% (white), with 50% being normal.
HSL's biggest advantage is readability. Want a lighter version of a color? Just increase the lightness. Want a muted tone? Reduce saturation. This makes HSL ideal for generating color palettes, hover states and theme variations programmatically.
When to Use Each Format
- HEX: Quick, copy-paste-friendly color values in CSS and design files.
- RGB / RGBA: When you need to manipulate individual channel values in JavaScript or Canvas.
- HSL / HSLA: When building color systems, palettes or dynamic themes where you adjust one property at a time.
Converting Between Formats
Converting between HEX, RGB and HSL is a common task, but doing it by hand is tedious and error-prone. Automarkly's free Color Picker tool shows all three representations of any color instantly. Pick a shade from the native picker or enter a HEX code, and the tool displays the equivalent RGB and HSL values with one-click copy — perfect for design handoffs and documentation.