Three Ways to Write the Same Color
Every color on a digital screen can be described in multiple ways. A designer might call it "ocean blue." A brand guide calls it #0ea5e9. A CSS developer writes it as rgb(14, 165, 233). A motion designer working in HSL calls it hsl(199, 89%, 48%). All four descriptions refer to the exact same color.
If you work on the web — designing, developing, or creating content — you will encounter all three code formats and need to switch between them. Here is what each format means, when to use each one, and how to convert between them.
HEX: The Most Common Web Format
HEX (hexadecimal) is the most widely used color format on the web. It represents colors as a six-character code preceded by a hash symbol.
The six characters are three pairs. Each pair represents the red, green, and blue channel in hexadecimal notation (base 16, using 0–9 and A–F). Each channel ranges from 00 (none) to FF (maximum — which is 255 in decimal).
#ff0000= maximum red, no green, no blue = pure red#00ff00= no red, maximum green, no blue = pure green#0000ff= no red, no green, maximum blue = pure blue#ffffff= maximum all three = white#000000= zero all three = black
HEX also supports an 8-character form with an alpha (opacity) channel: #ff000080 is red at 50% opacity.
When to use HEX: In CSS/HTML, design tokens, brand style guides, and anywhere you need a short, copyable color code. It is the most human-readable format for sharing specific colors.
RGB: Channel-Based Control
RGB spells out the three channels in decimal: rgb(red, green, blue). Each value ranges from 0 to 255.
rgb(255, 0, 0)= pure redrgb(0, 0, 0)= blackrgb(255, 255, 255)= whitergb(14, 165, 233)= the sky blue from the example above
CSS also supports rgba() for adding an alpha channel: rgba(14, 165, 233, 0.5) is the same blue at 50% opacity.
When to use RGB: When you need to manipulate individual color channels in code, when working with canvas or WebGL where RGB values are computed mathematically, or when your design tool exposes RGB sliders.
HSL: The Human-Friendly Format
HSL stands for Hue, Saturation, Lightness. It was designed to match how humans think about color more naturally than RGB.
- Hue is the color itself, expressed as a degree on a color wheel (0°–360°). 0° is red, 120° is green, 240° is blue.
- Saturation is how intense or grey the color is, from 0% (completely grey) to 100% (fully saturated).
- Lightness is how light or dark the color is, from 0% (black) to 100% (white). 50% gives you the "pure" hue.
hsl(199, 89%, 48%) = the same sky blue as above, expressed as: hue 199° (cyan-blue range), 89% saturated, 48% lightness.
When to use HSL: When you need to create color variations programmatically. Want a lighter version of a color? Increase the lightness. Want a muted version? Lower the saturation. HSL makes this intuitive in a way that HEX and RGB do not. It is the preferred format for CSS color systems, Tailwind CSS customization, and design systems where you need predictable color relationships.
Quick Reference: Common Web Colors
| Color | HEX | RGB | HSL |
|---|---|---|---|
| White | #ffffff | rgb(255,255,255) | hsl(0°,0%,100%) |
| Black | #000000 | rgb(0,0,0) | hsl(0°,0%,0%) |
| Red | #ef4444 | rgb(239,68,68) | hsl(0°,84%,60%) |
| Blue | #3b82f6 | rgb(59,130,246) | hsl(217°,91%,60%) |
| Green | #22c55e | rgb(34,197,94) | hsl(142°,71%,45%) |
| Yellow | #eab308 | rgb(234,179,8) | hsl(45°,93%,47%) |
| Orange | #f97316 | rgb(249,115,22) | hsl(24°,95%,53%) |
| Purple | #a855f7 | rgb(168,85,247) | hsl(271°,91%,65%) |
How to Use the Toobits Color Converter
Paste any color value — HEX, RGB, or HSL — into the converter and all three formats update instantly. It is the fastest way to translate between formats when a client hands you a HEX code and you need HSL for your CSS variables, or when a designer's Figma file uses RGB and your code uses HEX.