FileFlipSeletor de Cor

Seletor de Cor

Escolha e converta cores entre HEX, RGB, HSL, CMYK. Gere harmonias e verifique o contraste WCAG.

Pré-visualização

em branco 3.7:1AA Failem preto 5.7:1AA Pass

Contraste

#3b82f6
rgb(59, 130, 246)
rgba(59, 130, 246, 1)
hsl(217, 91%, 60%)
hsla(217, 91%, 60%, 1)
cmyk(76%, 47%, 0%, 4%)
--color-primary: #3b82f6

Harmonias de cor

Complementar

Análogas

Triádica

Complementar dividido

Tetrádica

Matizes e sombras

Como usar

  • Clique no seletor ou digite um valor HEX/RGB/HSL
  • Todos os formatos atualizam automaticamente
  • Clique num valor para copiar

tools.colorPicker.editorialTitle

tools.colorPicker.editorialBody

Ferramentas relacionadas

Gerador de favicon
Imagem para Texto (OCR)
Contador de Palavras

Perguntas frequentes

O que é um seletor de cor e como funciona?
Um seletor de cor permite escolher uma cor visualmente ou por valores e vê-la em vários formatos (HEX, RGB, HSL, CMYK). Este sincroniza todos os campos em tempo real e permite copiar qualquer formato, gerar harmonias e verificar contraste para acessibilidade.
Qual a diferença entre HEX, RGB e HSL?
HEX é uma forma compacta de RGB (ex.: #ff0000 para vermelho). RGB usa três números 0–255. HSL descreve cor por Matiz (0–360), Saturação e Luminosidade (0–100%). A ferramenta converte entre todos instantaneamente.
O que é CMYK e quando usar?
CMYK são Ciano, Magenta, Amarelo e Preto. Usado sobretudo em impressão. A ferramenta mostra o equivalente CMYK de qualquer cor para alinhar marca entre web e impresso.
O que é o rácio de contraste WCAG?
WCAG define rácios de contraste mínimos entre texto e fundo. AA exige 4,5:1 para texto normal; AAA 7:1. A ferramenta mostra o rácio em branco e preto e indica se passa AA ou AAA.
O que são harmonias de cor?
São conjuntos de cores que combinam: complementar, análogas, triádica, complementar dividido, tetrádica. A ferramenta gera a partir da cor escolhida. Clique numa amostra para defini-la como cor principal.
O que são matizes e sombras?
Matizes são cor com mais branco; sombras com mais preto. A ferramenta gera nove passos de 10% a 90%, semelhantes às escalas do Tailwind CSS.
Posso usar para web e CSS?
Sim. Obtém HEX, RGB, RGBA, HSL, HSLA e variável CSS. Copie qualquer valor para a folha de estilo. O contraste ajuda a escolher cores de texto acessíveis.
O que é uma variável CSS (custom property) para cores?
Custom properties CSS permitem definir uma cor uma vez e reutilizar (ex.: --color-primary: #1a2b3c; depois var(--color-primary)). A ferramenta mostra a forma variável para :root.