Three ways to describe a color
The same on-screen color can be written three common ways. HEX (like #3b82f6) is a six-digit hexadecimal shorthand for red, green, and blue, and it is what you paste into most CSS and design tools. RGB spells out those same three channels as numbers from 0 to 255, which is handy when you need to tweak one channel precisely. HSL — hue, saturation, lightness — describes color the way humans think about it, which makes it the easiest format for creating variations. This tool converts between all three instantly and in both directions, so you can work in whichever format fits the moment.
How the conversions work
HEX and RGB are two notations for the same numbers, so converting between them is a straightforward base change. HSL is a genuine transformation of the color space: the tool computes hue from which channel dominates, saturation from the spread between the brightest and darkest channels, and lightness from their midpoint. Editing any field triggers the conversion and updates the others, the preview swatch, and the generated shades, all without a round trip to any server.
Complementary colors and shades
Good palettes are built on relationships, and the fastest way to find them is to move around the HSL color wheel. The complementary color sits directly opposite your base — 180 degrees around the hue wheel — and provides high-contrast accents for buttons and highlights. The lighter and darker shades keep the same hue and saturation while adjusting lightness, which is exactly how you build the tints and shades for hover states, backgrounds, borders, and disabled elements. Click any swatch to copy its HEX code straight into your stylesheet.
Practical uses
Developers use this to grab the exact HEX of a color they see, convert a designer's RGB spec to HSL to derive a hover shade, or check that two colors are the same across formats. Designers use it to rough out a palette before opening heavier software. It is equally useful for spreadsheets, presentations, game assets, or picking a brand color — anywhere you need a precise, portable color value.
Privacy notes
All color math happens in your browser. Nothing you pick or type is uploaded, stored, or logged. That means the tool works offline once loaded and keeps any brand or client colors you are experimenting with entirely private to your device.