HEX, RGB, HSL, CMYK: A Practical Color Format Conversion Guide

I once spent 20 minutes trying to match a brand blue (#1E6B8C) for a hover state. The breakthrough came when I converted to HSL, kept the hue and saturation, and only adjusted the lightness. Understanding color formats saves real time.

Format Cheat Sheet

HEX (#1E6B8C): Most compact. Use for CSS everywhere. 16.7 million colors in 6 characters.

RGB (30, 107, 140): Use in JavaScript and when you need to manipulate individual channels. rgb() and rgba() in CSS.

HSL (198, 65%, 33%): Most intuitive for humans. Adjust the third number for lighter/darker variants, second for saturation. This is what I use when creating color systems.

CMYK (79%, 24%, 0%, 45%): Print only. Represents cyan, magenta, yellow, and black ink percentages. Our tool converts RGB to CMYK for print preparation.

A Real Workflow

For a recent project, the brand color was a deep navy. I needed: a background tint (95% lightness), a border (70%), the main color (33%), and a hover state (25%). Converting to HSL made this trivial — same hue, same saturation, just four different lightness values. Doing this in RGB would have required manual calculation or a design tool.

This article was written by UnTrackedTools founder Alex Chen, based on real frontend development workflows.