·4 min de leitura

Seletor de Cores com Hex e RGB para Mac

Converter manualmente entre códigos hex, valores RGB e notação HSL é propenso a erros e desnecessário quando você faz isso várias vezes ao dia.

Um designer te envia uma cor em hex: #1A73E8. Seu framework CSS quer HSL. Sua base de código iOS precisa de valores RGB entre 0 e 1. Seu projeto Android usa inteiros ARGB. Uma cor, quatro formatos, e você está abrindo uma aba do navegador para converter entre eles — de novo.

A conversão de cores é matemática trivial (hex para RGB é apenas base-16 para decimal), mas fazer isso mentalmente para três canais enquanto tenta manter o foco em layout ou estilização é uma distração desnecessária.

O Que o macOS Oferece

O macOS tem um seletor de cores integrado acessível em alguns apps através do painel de cores do sistema. Ele mostra controles deslizantes RGB e um campo hex, mas foi projetado para escolher cores visualmente, não para converter entre formatos programaticamente. Não há uma forma fácil de colar um código hex e obter o equivalente em HSL, ou inserir inteiros RGB e copiar a saída em hex. E fica escondido dentro de apps específicos, em vez de disponível em todo o sistema.

Converta Cores Instantaneamente Entre Formatos

Bellows inclui um conversor de cores entre suas 41 ferramentas para desenvolvedores. Insira uma cor em qualquer formato suportado — hex, RGB, HSL — e veja os valores equivalentes em todos os outros formatos. Copie a representação que precisar com um clique.

Bellows color picker showing hex, RGB, and HSL conversion on macOS

Do Design ao Código

O Figma exporta cores em hex. O Tailwind CSS usa valores de cor personalizados. O SwiftUI quer Color(red:green:blue:) com valores decimais. O XML do Android usa #AARRGGBB. Ter todos os formatos visíveis ao mesmo tempo elimina o cálculo mental e as idas e voltas a sites de conversão.

Verificando Contraste e Legibilidade

Quando você pode ver a cor renderizada junto com seus valores numéricos, consegue verificar rapidamente se uma cor de texto será legível contra um fundo. Isso é mais rápido do que trocar para um verificador de contraste separado para cada par de cores na sua folha de estilos.

Acesso pela Barra de Menus

Precisa de uma conversão rápida enquanto escreve CSS? Clique no ícone do Bellows na barra de menus, selecione a ferramenta de cores, cole o código hex e copie o valor RGB. Toda a interação leva menos de cinco segundos e você nunca sai do seu editor.

Obtenha o Bellows na Mac App Store

Próximo artigo

Bellows

41 developer tools in one native Mac app — JSON, JWT, Base64, hashes, and more.

Get Bellows on the Mac App Store