Ferramentas de CSS e cores
As ferramentas de design da Nouplo para front-end em um só lugar: CSS pronto para colar, conversão de cores e verificação de contraste, paletas e conta-gotas, e ícones, SVG e texto de preenchimento. Tudo roda no seu navegador.
Geradores de CSS
Cores e contraste
◒ Conversor de cor HEX, RGB, HSL e CMYK — mais a razão de contraste que decide a legibilidade. ◐ Verificador de contraste Se alguém consegue mesmo ler. ◒ Ferramentas de imagem Gerador de paleta de cores Aperte espaço para uma nova paleta; trave as cores de que gostar. ◉ Ferramentas de imagem Conta-gotas de cor da imagem Um clique para um código de cor, um botão para a paleta da imagem. ◉ Ferramentas de imagem Paleta de cores de uma imagem As cores principais da imagem, em códigos hex. ◒ Ferramentas de imagem Simulador de daltonismo Cerca de um homem em cada doze não consegue ler uma legenda vermelha sobre verde.
Ícones, SVG e texto de preenchimento
◰ Ferramentas de imagem Gerador de favicon Entra uma imagem; saem favicon.ico, apple-touch-icon, ícones do manifesto e as tags para colar. ⇄ Conversores SVG para PNG Transforme um vetor em um bitmap nítido para as plataformas que não aceitam SVG, sem enviar o arquivo para lugar nenhum. ◇ Conversores Imagem para SVG Uma imagem redesenhada em contornos que ficam nítidos em qualquer tamanho. • Ferramentas de texto Gerador de Lorem Ipsum Texto de preenchimento para layouts e protótipos, na quantidade de parágrafos, frases ou palavras que você precisar.
Perguntas frequentes
- Posso colar o resultado direto na minha folha de estilos?
- Sim. As páginas de gradiente, box-shadow e cubic-bezier geram a própria declaração CSS, pronta para copiar, e o conversor de cor dá a mesma cor em cada notação CSS.
- Qual padrão de contraste o verificador usa?
- O WCAG 2: ele mostra a razão de contraste e se o par passa nos níveis AA e AAA para texto normal, texto grande e elementos de interface.
- Por que alguns cartões levam a outro site?
- O gerador de paletas, o conta-gotas e o gerador de favicon trabalham com imagens, por isso ficam no site de imagens da Nouplo; a conversão para SVG fica no site de conversão e o lorem ipsum no site de textos. Os cartões dizem para onde levam.
- Minhas imagens são enviadas?
- Não. As imagens abertas para pegar cores ou criar um favicon são lidas no seu navegador e nunca saem do seu aparelho.