Color Picker & Converter

The same colour can be described in several different notations, and knowing how to move between them is a everyday task in web and graphic design. HEX codes like #2563EB are compact and universal in CSS and design tools. RGB expresses colour as red, green, and blue channels, which maps directly to how screens emit light. HSL — hue, saturation, and lightness — is the most intuitive for humans because it lets you adjust how vivid or how bright a colour is without changing its underlying hue.

A colour picker with live conversion removes the mental maths. Pick a colour visually and instantly see its HEX, RGB, and HSL equivalents, ready to copy into your stylesheet or design file. This is especially useful when a brand guideline specifies a colour in one format but your tool needs another, or when you want to create a lighter or darker variant by nudging the HSL lightness value.

Because colour is central to accessibility, understanding these formats also helps you build interfaces that everyone can use. HSL in particular makes it easy to generate consistent tints and shades for hover states, disabled buttons, and contrast-safe text. Everything here runs locally in your browser, so you can experiment freely with no limits.