🎨

Color Converter

Convert colors between HEX, RGB, HSL and HSV formats. Color picker with live preview. Free online color converter tool.

Live·100% in your browser — no upload

    


    
    

      
Shades & Tints

      

    

  


  

  



What is Color Converter
The Color Converter transforms a color between HEX, RGB, HSL and HSV formats, with a live preview and automatic shades and tints. It is the right tool when a design gives you a HEX but your code wants RGB, or when you need lighter and darker variants.
Everything happens in the browser, with nothing sent: copy the value in the format you need with one click.
How it works
  1. Pick a color with the selector or paste a HEX/RGB/HSL value.
  2. Read the conversions to the other formats immediately.
  3. Copy the format you need with the Copy button.
  4. Use the generated shades and tints to build a consistent palette.
Frequently Asked Questions
Which color formats does it support?
HEX, RGB, HSL and HSV. Enter a color in any format and instantly get the others, ready to copy.
What are HSL and HSV good for versus RGB?
They describe color in terms of hue, saturation and lightness: more intuitive for lightening, darkening or creating harmonious variants.
Are the values CSS-ready?
Yes. The produced formats (e.g. #2563EB, rgb(37,99,235), hsl(217,91%,60%)) paste directly into your CSS.


Related tools
◐
CSS Border Radius Generator
Live
Create CSS border-radius shapes visually. Control each corner independently. Generate circles, pills, blobs and custom shapes. Free border radius tool.
css
▦
CSS Box Shadow Generator
Live
Create CSS box shadows visually with live preview. Adjust offset, blur, spread, color and opacity. Multiple shadows support. Free box shadow maker.
css
👁️
Color Blindness Simulator
Live
See how colors look to people with color blindness. Simulate Protanopia, Deuteranopia, Tritanopia and more.
css
🎨
Color Palette Generator
Live
Generate beautiful color palettes. Complementary, analogous, triadic, split-complementary schemes. Export as CSS variables, Tailwind or SCSS.
css