G4GAME/DevTools

CSS Color Converter

Paste a HEX, rgb() or hsl() value and get all the other formats immediately, with a live swatch to confirm the color.

Last updated: · Runs 100% in your browser

// controls
Presets
Live preview
Generated CSS
/* Converted from: rgb(0, 255, 102) */
.color {
  color: #00ff66; /* HEX */
  color: rgb(0, 255, 102); /* RGB */
  color: hsl(144, 100%, 50%); /* HSL */
}

// Example output

/* Converted from: rgb(0, 255, 102) */
.color {
  color: #00ff66; /* HEX */
  color: rgb(0, 255, 102); /* RGB */
  color: hsl(144, 100%, 50%); /* HSL */
}

// Features

  • ▸Accepts HEX, rgb() and hsl()
  • ▸Outputs HEX, RGB and HSL
  • ▸Short and long HEX support
  • ▸Invalid input detection
  • ▸Live swatch

// How to use

  1. 01Adjust the controls on the left or pick a preset to start the CSS Color Converter.
  2. 02Watch the live preview update instantly as you change each setting.
  3. 03Fine-tune the generated CSS by hand in the code panel if you like.
  4. 04Click Copy CSS or Download CSS, or Share to send a link to your design.

// FAQ

Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.

Sponsored · Recommended developer deals

// Related tools

CSS Color Picker
Pick any color and get HEX, RGB, RGBA and HSL values as ready-to-use CSS custom properties.
WCAG Contrast Checker
Check text and background color contrast against WCAG 2.2 AA and AAA for normal and large text.
CSS Gradient Palette Generator
Generate harmonious color palettes — analogous, complementary, triadic or monochrome — with matching gradients.