Três Formatos, Uma Visão
HEX, RGB e HSL são todos visíveis e editáveis ao mesmo tempo — altere um e os outros são atualizados instantaneamente.
Conversor HEX ↔ RGB ↔ HSL
Converta cores entre os formatos HEX, RGB e HSL. Pré-visualização ao vivo, predefinições rápidas, copie valores prontos para CSS. 100% no lado do cliente, sem uploads.
Publicidade
Publicidade
A color converter translates colors between different format representations used in web design and digital graphics: HEX (#RRGGBB), RGB (0-255, 0-255, 0-255), HSL (hue, saturation, lightness), and HSV (hue, saturation, value). Each format describes the same color differently -- HEX is compact for CSS, HSL is intuitive for creating variations, and RGB maps directly to display hardware. This tool converts instantly as you type, entirely in your browser.
Converta cores instantaneamente sem sair do seu navegador
HEX, RGB, and HSL — all three formats update in real time as you type or pick. Copy CSS-ready values in one click. No uploads, no sign-up, no limits.
Real-time conversion
CSS-ready output
Gratuito ilimitado
Como usar
- 1
Escolha uma Cor
Digite um valor HEX, ajuste as entradas numéricas de RGB/HSL ou clique em uma predefinição rápida.
- 2
Veja a Pré-visualização ao Vivo
A amostra na parte superior é atualizada instantaneamente para mostrar a cor atual.
- 3
Copie Qualquer Formato
Use o botão Copiar ao lado de HEX, RGB ou HSL para copiar um valor pronto para CSS.
Por que Usar Este Conversor de Cores?
Saída Pronta para CSS
Os botões de cópia fornecem strings `#RRGGBB`, `rgb(r, g, b)` ou `hsl(h, s%, l%)` que colam direto no CSS.
Predefinições Rápidas
Comece pela paleta padrão do Tailwind CSS ou preto/branco puro e depois refine com os controles deslizantes.
Publicidade
Understanding Color Formats
HEX, RGB, HSL, and HSV explained
HEX (#RRGGBB) is the most compact color format for web design. Each pair of hexadecimal digits (00-FF) represents the intensity of red, green, and blue, respectively. The value 00 means the channel is off (black), and FF means it's at full intensity. For example, #FF0000 is pure red, #00FF00 is pure green, and #FFFFFF is white. HEX is the standard format in CSS, HTML, and design tools because it's short, unambiguous, and easy to copy-paste. Shorthand notation (#RGB) exists for colors where each pair is identical, like #F00 for red.
RGB uses decimal values (0-255) for the same three channels. It's the format that display hardware natively understands -- each pixel on an LCD or OLED screen has red, green, and blue subpixels that can be set to 256 brightness levels. RGB is also used in JavaScript's canvas API (ctx.fillStyle = 'rgb(255, 0, 0)') and in image processing libraries. RGBA adds an alpha channel (0-1 or 0-255) for transparency.
HSL (Hue, Saturation, Lightness) describes colors in a way that's more intuitive for humans. Hue is the color itself, measured as an angle on the color wheel (0掳=red, 120掳=green, 240掳=blue). Saturation is how vivid the color is (0%=gray, 100%=fully colored). Lightness is how dark or light (0%=black, 50%=normal, 100%=white). HSL makes it easy to create tints (increase lightness), shades (decrease lightness), and tones (decrease saturation) of a base color. HSV (Hue, Saturation, Value) is similar but uses Value instead of Lightness -- Value=100% means the color at full brightness, while Lightness=100% means white.
Publicidade
Quando usar cada formato
Use HEX for CSS and HTML -- it's the most widely supported format and the shortest to write. Use RGB when you need to programmatically manipulate color channels (e.g., mixing two colors by averaging their RGB values) or when you need alpha transparency (rgba()). Use HSL when you need to create color variations -- for example, generating a button's hover state by increasing lightness by 10%, or creating a monochromatic color scheme by keeping hue constant and varying saturation and lightness.
HSL is particularly powerful in CSS custom properties (CSS variables). You can define -- hue: 210 and then use hsl(var(-- hue), 70%, 50%) throughout your stylesheet. Changing a single variable updates the entire color scheme -- impossible with HEX or RGB without recalculating every value. This is why modern CSS frameworks like Tailwind v4 are moving toward HSL-based color systems.
Publicidade
Casos de Uso Comuns
Design com HSL
Construa uma paleta de cores escolhendo uma matiz base e ajustando a luminosidade — muito mais fácil em HSL do que em RGB.
Convertendo Cores do Figma para CSS
O Figma frequentemente mostra HEX; o CSS às vezes precisa de RGB ou HSL (para `color-mix` ou opacidade). Obtenha a string exata em um clique.
Verificação de Acessibilidade
Combine esta ferramenta com o Verificador de Contraste para verificar se suas escolhas de cor atendem aos requisitos WCAG.
Ajuste de Temas
Troque rapidamente uma predefinição do Tailwind por uma cor de marca personalizada e copie o HEX resultante para sua configuração.
Como isso se compara a outros conversores de cores?
A side-by-side comparison of popular color conversion tools.
| Recurso | NovaTools | RapidTables | W3Schools |
|---|---|---|---|
| HEX 鈫?RGB 鈫?HSL 鈫?HSV | SIM Todos os formatos | SIM | Limitado |
| Live preview as you type | SIM Instantâneo | Submit button | NÃO |
| Color picker integration | EyeDropper API | NÃO | NÃO |
| Privacidade (sem upload) | SIM 100% local | NÃO Lado do servidor | NÃO |
| Copy CSS-ready values | SIM | SIM | NÃO |
| Funciona offline | SIM | NÃO | NÃO |
A maioria dos conversores de cores online processa conversões no servidor deles. Nossa ferramenta realiza todos os cálculos no seu navegador — seus valores de cor nunca são transmitidos ou armazenados.
Perguntas frequentes
Quais formatos de cor são suportados?
HEX (ex.: `#2563EB`), RGB (ex.: `rgb(37, 99, 235)`) e HSL (ex.: `hsl(217, 83%, 53%)`). Todos os três são atualizados simultaneamente conforme você altera qualquer valor.
Qual é a diferença entre RGB e HSL?
RGB descreve uma cor por seus componentes vermelho, verde e azul. HSL a descreve por matiz (ângulo da roda de cores), saturação (intensidade) e luminosidade. HSL é mais intuitivo para designers porque você pode alterar a luminosidade sem recalcular os outros.
A ferramenta suporta a abreviação HEX de 3 dígitos?
Sim. Digitar `#fff` é automaticamente expandido para `#FFFFFF`. A saída sempre usa o formato de 6 dígitos para máxima compatibilidade.
Posso copiar valores prontos para CSS?
Sim. O botão Copiar ao lado de cada formato fornece `#2563EB`, `rgb(37, 99, 235)` ou `hsl(217, 83%, 53%)` — prontos para colar diretamente no CSS.
O que acontece se eu digitar um valor HEX inválido?
O campo HEX é de texto livre, então você pode digitar qualquer coisa, mas os valores RGB e HSL só são atualizados quando o HEX é válido. Isso permite experimentar sem perder sua cor anterior.
How do I convert a Tailwind CSS color to RGB or HSL?
Simply type the Tailwind HEX value into the HEX field (e.g., `#2563EB` for `blue-600`). The RGB and HSL values will update instantly, and you can copy them with one click. This is useful when you need to use a Tailwind color in a context that requires RGB or HSL — for example, `color-mix(in srgb, rgb(37, 99, 235) 50%, transparent)` or `hsl(217, 83%, 53% / 0.5)` for opacity. You can also use the built-in Tailwind preset palette to start from any standard Tailwind color.
Posso usar esta ferramenta para criar uma paleta de cores?
Yes. HSL is particularly well-suited for palette generation because you can fix the hue and vary lightness to create tints and shades of the same color. For example, set hue to 217 and saturation to 83%, then create five variations by changing lightness to 20%, 40%, 53%, 70%, and 90%. Each variation can be copied as a HEX value. Pair this tool with the Contrast Checker to verify that your text-background combinations meet WCAG accessibility standards.
Esta ferramenta é precisa para trabalho de design profissional?
Yes. The conversion math follows the W3C CSS Color Module Level 4 specification, which is the same standard that browsers use internally. This means the values you copy from this tool will render identically in browsers, design tools like Figma and Sketch, and image editors like Photoshop. The tool does not apply gamma correction or color space conversion (sRGB to Display P3), so all values are in the standard sRGB color space, which is the default for web design.
Sua privacidade é nossa prioridade
Esta ferramenta funciona inteiramente no seu navegador. Seus arquivos não são enviados, armazenados ou analisados.
- Não enviamos, armazenamos ou analisamos seus arquivos.
- Tudo o que você processa permanece no seu dispositivo.
- Não há processamento do lado do servidor, nem armazenamento em nuvem, nem análise.
Mesmo se sua conexão com a internet cair, seus arquivos permanecem seguros.
Você também pode gostar
Explorar este tema
Guias uteis
Como converter cores entre HEX, RGB e HSL
Aprenda a diferença entre HEX, RGB e HSL, quando usar cada formato de cor e como converter cores para CSS com dicas práticas de color-mix.
Como converter maiúsculas e minúsculas: camelCase, snake_case, Title Case e mais
Guia completo dos 12 estilos de maiúsculas e minúsculas — de UPPER e Title Case a camelCase, snake_case e kebab-case — e quando usar cada um no código.
Um Guia Prático sobre Contraste de Cores para Design de UI
Aprenda os fundamentos da acessibilidade web e do contraste de cores. Entenda as classificações WCAG (AA vs. AAA) e use as nossas verificações rápidas e correções práticas para tornar a sua UI legível para todos.
Publicidade