Color Tools Every Developer Should Have Bookmarked
Getting a color from a design into working code involves more than copying a hex code. Here are the color tools I use regularly as a developer. Color seems simple until you try to use it in code. Hex values, RGB, HSL, opacity, contrast ratios, accessibility requirements. Getting a color from a design into working code, and making sure it is usable, involves more than copying a hex code. Online color tools handle the parts that are easy to get wrong. Here are the ones I use regularly. Pick Colors in Multiple Formats Designers often give me colors in one format and the codebase uses another. A color picker that converts between hex, RGB, HSL, and CSS color names saves me from converting by hand. I paste a hex value, get the HSL equivalent, and drop it into a CSS variable. The conversion is instant and exact. HSL is my preferred format for code because it is readable. Changing lightness to darken a color is intuitive. Adjusting hue to shift a color is obvious. Hex values do not expose these properties. When I am theming a component, I start with one HSL color and derive variations by adjusting the lightness. More tutorials are on the KitCraft Blog.