Color Converter

Why I Built This Color Converter

Designer sends me a color in HEX. CSS needs HSL for the hover state. The marketing deck needs RGB values. And someone asks "what's that in CMYK for print?" I got tired of Googling color conversions, so I built this.

As a developer, I deal with colors constantly — CSS variables, design tokens, theming systems. This tool lets me paste any color format and instantly get all the others. One input, all outputs. Done.

All the Formats You Need

• HEX — The classic web format (#3498db). Paste any 3, 6, or 8-digit hex code
• RGB/RGBA — What your screen actually uses (0-255 per channel), with optional alpha
• HSL/HSLA — My favorite for CSS because adjustments make sense. Great for design systems and theming
• HSV/HSB — What Figma and Photoshop use in their color pickers
• CMYK — For when you need to send something to print

I also use the color picker when I need to quickly grab a color from memory and the random button when I'm prototyping and need placeholder colors fast.

How to Convert HEX to RGB (and Back)

The conversion is straightforward. Take #3498DB — split it into pairs: 34, 98, DB. Convert each from hex to decimal and you get rgb(52, 152, 219). Going back? Take each RGB value, convert to hex, pad with zero if needed, concatenate. This tool handles the math so you don't have to.

If you work with color codes in JavaScript, you might also find the Base64 encoder handy for embedding small SVGs with custom colors, or the CSS minifier for stripping whitespace from color-heavy stylesheets.

Using HSL for CSS Design Tokens

Here's a pattern that changed how I build UIs: define your brand color as an HSL hue, then derive the entire palette from it. Need a lighter variant? Bump L up. Muted background? Drop S by half. Dark mode? Flip the lightness scale. RGB makes this painful because all three channels are entangled.

Most modern design systems — Tailwind, Radix, Shadcn — store colors as HSL or oklch values in CSS custom properties. If you're setting up a JSON config for your theme, HSL values give you the most flexibility.

Frequently Asked Questions

HEX vs RGB — what's the actual difference?

Nothing, except notation. #FF0000 and rgb(255, 0, 0)are the exact same red. HEX is just the RGB values written in hexadecimal. I use HEX in CSS because it's shorter, but RGB when I need to add transparency (RGBA).

Why do you say HSL is better for adjustments?

Here's why I love HSL: want a darker button on hover? Just reduce the L (lightness) by 10%. Want a more muted color? Lower the S (saturation). With RGB, you'd have to adjust all three values and hope they look right. HSL just makes more sense for tweaking colors.

My print colors look different from the screen — why?

Yep, this is a real problem. Screens use RGB (additive light), printers use CMYK (subtractive ink). Some bright screen colors literally cannot be printed — there's no ink combination that makes that neon green you see on your monitor. The CMYK values here are a mathematical conversion, but for production print work, you really need a proper color management system and printer profiles.

What CSS color format should I use in 2026?

For most projects, HSL in CSS custom properties works great. If you need perceptually uniform spacing between colors (for data visualization, accessible palettes), look at oklch()— it's supported in all modern browsers now. HEX is still fine for one-off colors. Pick one format per project and stick with it. The diff checker can help you spot inconsistent color formats across your codebase.