Color Converter – HEX to RGB, HSL, HSV, CMYK & CSS Palette Generator
Convert HEX, RGB, HSL, HSV, and CMYK color codes instantly with this free color converter. Type in any field and all formats update in real time. Generate color harmonies, tints, shades, CSS gradients, and export CSS variables or palette JSON.
The page isn’t just a converter—it’s a small color studio. You’ll get automatic color harmonies (complementary, analogous, triadic) to explore options that feel balanced without guesswork. Full runs of tints and shades make it simple to pick states for UI (hover, active, disabled). The built‑in Gradient Generator previews a clean linear gradient and gives you a ready‑to‑paste CSS string. Want quick inspiration? Randomize the base color or generate a random palette and click any swatch to copy its HEX.
For handoff, export CSS variables—including RGB and HSL components—for design systems and themes. Need to pipe colors into a script or app? Copy a structured palette JSON that includes your base, harmonies, tints, shades, and generated palette. You’ll also see the closest CSS color name for quick reference in docs.
How to use the Color Converter
- Enter a color: type a HEX code (with or without #), pick from the color picker, or enter RGB, HSL, HSV, or CMYK values in any input field. All other formats update instantly.
- Copy the format you need: click the copy icon next to any field, or use Copy All to grab every format at once.
- Explore palettes: scroll down to see color harmonies, tints, shades, and a generated gradient. Click any swatch to copy its HEX or use it as the new base color.
- Export for code or design: use the CSS variables export for design systems, or copy the palette JSON for scripting and automation.
Color formats explained
- HEX — the standard format for web and CSS. Short (#fff) and full (#ffffff) are both accepted. Used in HTML, CSS, SVG, and design handoff.
- RGB — red, green, blue channels (0–255). Native to digital screens and directly supported by CSS as
rgb()orrgba()for transparency. - HSL — hue, saturation, lightness. The easiest format to reason about when building CSS themes and design systems. Adjusting lightness in a single variable produces consistent tints and shades.
- CMYK — cyan, magenta, yellow, key (black). The standard for print design workflows. Values here are best-effort estimates; for production print, use your printer's ICC profiles.
- HSV / HSB — hue, saturation, value (brightness). Common in graphics editors like Photoshop and Figma color pickers.
What teams actually use this for
- Design & front‑end: convert brand colors to exact code strings, export CSS variables, and fine‑tune gradients before committing to a theme.
- Marketing & content: grab tints/shades for consistent banners, thumbnails, and social art—no heavyweight app required.
- Developers: keep formats exact across stacks; copy HEX/RGB/HSL/HSV/CMYK with one click and move on.
Accuracy notes
CMYK values here are best‑effort engine estimates for quick planning. For production print, ask your printer for target ICC profiles and proof before you ship. Pantone/PMS mappings are licensed and intentionally out of scope for this free tool.
Related tools
Formatting a palette payload? Inspect or pretty‑print with JSON Formatter. Creating a batch of assets with your new colors? Use Bulk Image Resizer & Converter to stamp watermarks and export optimized files. Need to encode values for URLs or tokens? Try Base64 Encoder & Decoder.
Key features
- Instant HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK conversion — type in any field
- One-click copy button for every color format
- Copy All to grab all formats at once
- Color harmonies: complementary, analogous, split-complementary, triadic, tetradic
- Tints and shades generator for UI state colors (hover, active, disabled)
- CSS gradient generator with ready-to-paste linear-gradient string
- Random palette generator — click any swatch to set as base color
- Export CSS variables (including RGB and HSL components) for design systems
- Export palette JSON (base, harmonies, tints, shades) for scripting and apps
- Closest CSS color name shown for quick documentation reference
- Runs entirely in your browser — no uploads, no tracking
Tips
- Type a HEX value with or without the # prefix — both are accepted.
- Use the CSS gradient output directly in Tailwind, Sass, or plain CSS without changes.
- The Tints/Shades panel is great for building accessible button states — lighter for hover, darker for active.
- Export CSS Variables includes hsl() component values, making it easy to build alpha variants in code.
- For print work, treat the CMYK values as a quick estimate only — get accurate values from your printer’s ICC profile.
- The random palette button is a quick way to explore color combinations without a Figma or Sketch license.
Frequently asked questions
Can this convert CMYK to Pantone/PMS?
Why do HEX ↔ RGB ↔ CMYK conversions vary across tools?
Is my data uploaded anywhere?
Can I copy everything at once?
What is the difference between HSL and HSV?
How do I use exported CSS variables in my project?
--color-base, --color-base-h, --color-base-s, and --color-base-l. Paste them into your :root block and reference them in your stylesheet or Tailwind config.How do I convert a HEX color to RGB online for free?
#3b82f6) into the HEX field. The RGB, HSL, HSV, and CMYK values appear instantly. Copy the RGB value with one click. No account or software needed.How do I convert RGB to HEX online?
How do I convert HEX to HSL for CSS online?
This tool is built to be fast, private, and predictable: paste, convert, copy. If you build or design for the web, bookmark it—having rock‑solid color outputs a click away saves real time.