Color Converter
Type a color in any common format and get it back as HEX, RGB, HSL and OKLCH. Alpha is kept, and each value has its own copy button.
Accepts hex (3, 4, 6 or 8 digits), rgb(), rgba(), hsl() and hsla().
Frequently asked questions
How do I convert HEX to RGB?
Split the hex code into three pairs and read each as a base 16 number. #0e7490 becomes 0e = 14, 74 = 116 and 90 = 144, so rgb(14, 116, 144). This tool does it as you type.
What is OKLCH and why does Tailwind use it?
OKLCH describes a color by lightness, chroma and hue in a space designed to match human vision. Tailwind v4 defines its whole palette in oklch because it gives more vivid colors on modern displays and more even steps between shades.
How do I add transparency to a color in Tailwind?
Use the slash syntax on any color utility, such as bg-cyan-700/50 for 50% opacity. With an arbitrary color it looks like bg-[#0e7490]/50. This tool outputs that form when your color has alpha.
What does an 8 digit hex code mean?
The last two digits are the alpha channel. #0e749080 is the same color at about 50% opacity, since 80 in hex is 128 out of 255.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.