🎨 Pick a Color
Understanding Color Formats
Digital color is represented in several formats, each with specific advantages depending on the context. Understanding these formats helps designers and developers communicate color specifications accurately and choose the most appropriate format for their work.
HEX (Hexadecimal) is the most widely used color format in web development. A HEX color code starts with a hash sign (#) followed by six hexadecimal characters representing the red, green, and blue channels. For example, #FF5733 means full red (FF = 255), moderate green (57 = 87), and low blue (33 = 51). A shorthand three-character format exists where each digit is doubled — #F00 is equivalent to #FF0000.
RGB (Red, Green, Blue) defines colors using three decimal values from 0 to 255, each representing the intensity of a color channel. This format is intuitive because it directly maps to how screens produce color by mixing red, green, and blue light. The CSS syntax is rgb(255, 87, 51). An RGBA variant adds an alpha channel for transparency: rgba(255, 87, 51, 0.5) for 50% opacity.
HSL (Hue, Saturation, Lightness) describes colors in terms that align more closely with human perception. Hue is the color angle on the color wheel (0-360 degrees, where 0 is red, 120 is green, 240 is blue), saturation is the color intensity (0% is gray, 100% is full color), and lightness controls how bright the color is (0% is black, 50% is pure color, 100% is white). HSL is particularly useful when you need to create color variations — simply adjust lightness for lighter/darker shades or saturation for more/less vivid versions.
Choosing the Right Color Format
For CSS stylesheets, HEX codes are the most compact and universally supported option. Use RGB when you need transparency (via RGBA). Choose HSL when creating design systems or programmatically generating color palettes, as adjusting hue, saturation, and lightness independently produces more predictable results than modifying RGB values. Modern CSS also supports the newer oklch() and lch() color spaces for perceptually uniform color manipulation.