Color Converter

Pick a color and instantly see it in HEX, RGB, HSL, and CMYK. Generate shades and copy any format.

Runs in your browser
Color Picker
R26
G92
B58
HEX#1A5C3A
RGBrgb(26, 92, 58)
HSLhsl(149, 56%, 23%)
CMYKcmyk(72%, 0%, 37%, 64%)
Tailwind-like[#1A5C3A]
Shades

How to Use the Color Converter

  1. Use the visual color picker to select any color, or type a HEX value directly into the input field.
  2. All format conversions — HEX, RGB, HSL, and CMYK — update instantly.
  3. Click any format value to copy it to your clipboard.
  4. Scroll down to explore generated shades and tints of your chosen color.

About the Color Converter

Different design and development contexts require different color formats. CSS and web development predominantly use HEX and RGB. HSL is often preferred for programmatically adjusting lightness and saturation. CMYK is the standard for print production. This tool converts instantly between all four formats from a single input, saving you from manual conversion math. The shade generator creates a full range of tints and shades — useful for building design system color scales. A Tailwind-compatible format is also available for easy integration with Tailwind CSS projects.

Frequently Asked Questions

What is the difference between HEX and RGB?
Both represent the same color model (red, green, blue channels). HEX is a compact notation using hexadecimal values (e.g., #1a2b3c), while RGB uses decimal values (e.g., rgb(26, 43, 60)). HEX is more common in CSS stylesheets; RGB is used when you need to manipulate channel values numerically.
When should I use HSL?
HSL (Hue, Saturation, Lightness) is easier to reason about programmatically. To make a color lighter or darker, you only need to adjust the L value. To create variations of the same hue, adjust S. This makes HSL ideal for generating color palettes and design system scales in CSS.
What is CMYK used for?
CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in print production. If you are sending designs to a printer or preparing assets for physical media, you need CMYK values. Note that the RGB-to-CMYK conversion is approximate since the two color spaces have different gamuts.
How do I use the Tailwind-format color output?
The Tailwind output provides the color as a value you can paste directly into your tailwind.config.js theme.colors configuration, or use inline as a CSS variable. It follows the format expected by Tailwind's color system for consistent integration.