CSS Color Converter

Convert HEX to RGB, HSL, and Tailwind arbitrary values.

CSS

    
  




        
        

          
          
          
          
        

        
        
        

      

      
How to use
Four quick steps — paste, run, review, copy. Everything stays in your browser.
Paste your input
Paste your input
Drop CSS, HTML, JSON, or other text into the editor. Nothing is uploaded.
Run the tool
Run the tool
Click Convert or Run. The result appears instantly on this page.
Check the output
Check the output
Read the generated code and any review notes before you ship it.
Copy and use
Copy and use
Copy the output to your clipboard and paste it into your project.

      


  
About this tool

  
Convert a HEX color into RGB, HSL, and a Tailwind arbitrary background class you can paste into markup.

  
Example

  
Default sky accent demonstrates HEX → RGB/HSL → Tailwind arbitrary.

  
Input

  
#38bdf8

  
Output

  
HEX: #38BDF8
RGB: rgb(56, 189, 248)
HSL: hsl(199, 93%, 60%)
Tailwind arbitrary: bg-[#38bdf8]

  
Tip

  
Arbitrary colors are valid Tailwind; nearest-palette guessing is often wrong for brand work.




      

        Open converter
        Tools hub