nTropi
Tutorial·

Converting Between Color Formats with nTropi

Learn when and how to convert between HEX, RGB, HSL, and other color formats in CSS and design work.

Which Format Should You Use?

  • HEX (#ff6b6b): Default for CSS, universally supported, compact
  • RGB (rgb(255, 107, 107)): Useful when you need to manipulate channels in CSS or JS
  • HSL (hsl(0, 100%, 71%)): Best for programmatic theming — adjusting lightness is intuitive
  • CMYK: Print design; most browsers do not support it natively

Converting in CSS

Modern CSS supports all three natively — no conversion needed:

color: #ff6b6b;
color: rgb(255 107 107);        /* new syntax, no commas */
color: hsl(0 100% 71%);
color: hsl(0 100% 71% / 0.5);  /* with alpha */

When You Need an Exact Conversion

Design handoffs (Figma gives HEX, your CSS uses HSL), or picking accessible color pairs by manipulating HSL lightness.

Using the Tool

  1. Open /tools/color-converter
  2. Enter your starting color in any field
  3. All other formats update instantly
  4. Copy the format you need