AI Learning Gym
Free design and development tools
← Back to DashboardAI Learning GymFree design and development tools
← Back to DashboardColors on the web can be written in several different formats. Knowing which to use and when makes your design and development work much faster.
HEX colors start with a # followed by six characters (or three in shorthand) representing red, green, and blue values in hexadecimal notation. For example, #3498db breaks down as 34 (red), 98 (green), db (blue). HEX is the format you'll see most in CSS, design tools, and style guides.
RGB (Red, Green, Blue) uses three numbers from 0 to 255. It's more readable than HEX for many people — rgb(255, 0, 0) is obviously pure red. RGB is also the format used in CSS when you need to add transparency: rgba(52, 152, 219, 0.5) gives you the same blue at 50% opacity.
HSL (Hue, Saturation, Lightness) is the most intuitive format for making colors look related. Hue is the color wheel position (0–360°), saturation is how vivid vs. gray the color is (0–100%), and lightness is how dark vs. bright it is (0–100%). If you want a lighter or darker version of a color, just adjust the lightness — the hue stays the same. This makes HSL excellent for creating color scales in design systems.
HEX is the most compact and widely recognized — use it for solid colors in CSS and design files. Use rgba() when you need transparency, and HSL when you want to create consistent color themes where hue relationships matter.
The 3-digit shorthand (#3af) is a shortcut for colors where each pair of digits is the same (#33aaff). Every 3-digit code expands to 6 digits by doubling each character. Not all colors can be expressed in 3 digits.
In CSS, use rgba(r, g, b, alpha) where alpha is a value from 0 (fully transparent) to 1 (fully opaque). For example, rgba(52, 152, 219, 0.3) gives you a light blue at 30% opacity. You can also use the opacity CSS property to make an entire element (and its children) transparent.
The complementary color is directly opposite on the color wheel — it's the hue that creates maximum contrast. To find it in HSL, add or subtract 180 from the hue value. Complementary pairs are commonly used in logos and design to make elements stand out against each other.