Color Picker Tools: Choosing and Converting Colors
Hex, RGB, HSL, contrast, and palettes all matter when moving a color from design to code. Here is how I use color pickers. Color is one of those things that seems simple until you try to use it precisely. A design calls for a specific blue, the codebase expects a hex value, the accessibility checker wants RGB, and the theme system uses HSL. A color picker that converts between these formats and helps me choose usable colors is a tool I use in nearly every project. Here is how I use color pickers and what makes one worth keeping bookmarked. Convert Between Formats Accurately Colors are represented in several formats: hex, RGB, HSL, HSV, and named colors. Each format describes the same color differently. Hex is compact and familiar from CSS. RGB exposes the red, green, and blue channels. HSL exposes hue, saturation, and lightness, which are intuitive for adjusting a color. A good color picker converts between all of them instantly and accurately. I rely on the conversion more than the picking. A designer hands me a hex value, I need the HSL to derive a hover state by darkening the lightness. A design tool exports RGB, I need hex for a stylesheet. More tutorials are on the KitCraft Blog.