This color converter translates any common CSS color notation into its equivalents in one step. Paste or type a value in HEX, RGB, or HSL format, or pick a color visually with the native color picker, and a live swatch appears alongside copyable HEX, RGB, and HSL rows that update instantly as you edit. There is nothing to submit and no button to press; the conversion happens as you type.
It is a handy companion for everyday front-end and design work. Grab a hex value from a brand guide and see its HSL form so you can tweak lightness in CSS, translate an rgb() value from a design tool into the hex string a style guide requires, or double-check that two values written in different formats really are the same color.
Color conversion is pure arithmetic, and this tool performs all of it with local math inside your browser. The values you enter are converted on the spot in the page itself, so your work never involves a network request of any kind.
You can enter hex codes such as #fff or #ffcc00, functional rgb() values, and functional hsl() values. If you prefer not to type at all, the native color picker lets you select any color visually and see all three notations at once.
Converting between hex and RGB is exact because they describe the same underlying values. HSL conversions involve rounding to whole numbers, which can shift a color by an amount far too small for the eye to notice, but a round trip may not return the identical digits you started with.
It converts opaque colors, so an alpha channel from rgba() or hsla() notation is not part of the conversion. If you need transparency, convert the base color here and then add the alpha component yourself in your CSS.