Hex / RGB / HSL Color Converter
Paste a Hex, RGB or HSL code and convert between all three formats. Shows a visual preview, ready-to-copy CSS code and an approximate color name. Handy for designers and developers.
Selected color
#0F3D2E
Teal dark
Ready CSS
color: #0F3D2E; background-color: rgb(15, 61, 46); border-color: hsl(160, 61%, 15%);
When to use each format
- • HEX — design tools (Figma, Sketch), CMS, inline HTML.
- • RGB — alpha/transparency via rgba().
- • HSL — design systems and light/dark variants (tweak only L).
Quick accessibility
Black text on this color is hard to read. Use light text for adequate contrast. To meet WCAG AA for small text, aim for contrast ≥ 4.5:1.
How it works
How the Hex / RGB / HSL Color Converter works
The tool handles the three ways of describing the same color. Hex uses six base-16 digits (e.g. #FF6B35), RGB splits the three channels into values from 0 to 255, and HSL describes hue, saturation and lightness. You paste a code in any format and the tool recalculates the other two, shows a visual preview, the copy-ready CSS code, and the approximate color name.
In practice: paste your brand orange as #FF6B35 and it instantly becomes rgb(255, 107, 53) and hsl(16, 100%, 60%). The preview confirms the shade on screen, and you copy the CSS line straight into your buy button or free-shipping bar without opening Photoshop just to grab the value.
Tip for Brazilian e-commerce: standardize your store palette in a single format (Hex is ideal) and store the codes for the CTA, the discount badge and the banner. Watch out for the 3-digit shortcut (#F63 is not the same as #FF6B35), and remember the customer's screen may show the color slightly differently from the printed label or packaging.
Learn more
Articles to put this tool to work
Melhores Ferramentas para Monitorar Concorrentes em 2026 (Comparativo Honesto)
Nenhuma ferramenta faz tudo, e quem te diz o contrário quer vender uma. O comparativo direto por objetivo, com preços, pra você montar o stack certo sem desperdício.
Como Monitorar o Site de um Concorrente (Preços, Lançamentos e Mudanças)
O site é onde a estratégia do concorrente se materializa primeiro — e é o canal menos vigiado. Como detectar cada preço novo, lançamento e banner sem viver dando F5.
FAQ
Frequently asked questions
- What is the difference between Hex, RGB and HSL?
- Hex uses a 6-digit hexadecimal code (e.g. #FF5733); RGB defines the color by red, green and blue channels (e.g. rgb(255,87,51)); HSL uses hue, saturation and lightness. All three represent the same color, only the notation changes. The converter translates between all three formats.
- How do I convert Hex to RGB?
- Paste the Hex code (e.g. #FF5733) into the converter and it returns the matching RGB, in this case rgb(255, 87, 51). The conversion splits the Hex into pairs (FF, 57, 33) and turns each pair into a 0-255 value. It also works the other way: RGB to Hex.
- How do I find a color's CSS code?
- Paste the color in any format (Hex, RGB or HSL) and the converter shows ready-to-copy CSS code, plus a visual preview and an approximate color name. Just paste it straight into your stylesheet.
- Is the color converter free?
- Yes, the Hex, RGB and HSL converter is 100% free, runs in your browser and needs no signup. Ideal for designers and developers who need to switch between color formats quickly.
- When should I use HSL instead of Hex in CSS?
- Use HSL when you need to tweak a color intuitively: lighten, darken or desaturate by changing only lightness and saturation. Hex and RGB are more common in design tools, but HSL makes it easier to build variations and palettes. The converter shows all three so you can choose.
