JavaScript - Ordenando Elementos por Cores \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 07 Horas 12 Min 57 Seg Tempo restante da oferta: 07 12 57 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) JavaScript - Ordenando Elementos por Cores [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # JavaScript - Ordenando Elementos por Cores Aprenda a ordenar cores e fazer conversões entre os formatos RGB, Hexadecimal e HSL usando JavaScript. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075049/Ordenação-de-Cores.png) Olá Web Developer. Hoje vou mostrar como ordenar elementos por cores usando JavaScript. Isso pode ser útil caso você tenha algo como uma galeria de fotos. Além disso também vamos acabar aprendendo como fazer conversão de cores entre os modelos `RGB` e `Hexadecimal`. Eu usei quando fui criar uma imagem para o [Instagram](https://www.instagram.com/treinaweb/ "Instagram") mostrando os [cursos da TreinaWeb](https://www.treinaweb.com.br/cursos-online "cursos da TreinaWeb"). Criar um código para ordenar os elementos do site e tirar print da tela foi bem mais rápido do que fazer manualmente em um editor de imagem, e teve um resultado melhor do que quando tentei ordenar os elementos do HTML manualmente também. ![](https://dkrn4sk0rn31v.cloudfront.net/2020/02/20072450/Lista-de-Cursos-por-Cores.png) ## Como definir a ordem das cores? O modo mais comum de se ordenar cores é usando o `Círculo Cromático`, mostrado na imagem abaixo: ![](https://dkrn4sk0rn31v.cloudfront.net/2018/11/05072157/rgbwheel.png) Eu já falei sobre ele e sobre [como combinar cores](https://www.treinaweb.com.br/blog/voce-sabe-como-combinar-cores/ "como combinar cores") aqui no blog. Não se esqueça de dar uma conferida! É muito comum em programação utilizarmos os modelos `RGB` ou `Hexadecimal` para declarar cores, porém, o que vem depois de `rgb(32, 15, 59)`?. [ ![Desenvolvedor Front-end Sênior](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/ux-ui.svg) Formação Desenvolvedor Front-end Sênior Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-front-end-senior) Também temos o modelo `HSL` (Hue - Matiz/Tonalidade, Saturation - Saturação, Lightness - Brilho). As cores (vermelho, verde, azul, etc) são definidas pela matiz, a qual é indicada por um ângulo no círculo. Começamos no topo, 0º, que indica o vermelho, e podemos ir mudando de cores conforme vamos indo aos 360º. Isso é bem melhor para usarmos na ordenação, depois de 121 vem 122, simples assim. ![](https://dkrn4sk0rn31v.cloudfront.net/2020/02/20074501/Escala-de-Matiz.png) Então a primeira coisa que vamos fazer é converter nossas cores para o modelo `HSL`. ## Convertendo Cores para HSL É mais simples fazer a conversão para `HSL` a partir do modelo `RGB`, que possui números de 0 a 255. Se você estiver com cores em `Hexadecimal`, que utiliza valores entre 00 e FF, basta converter para `RGB` primeiro. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) ### Hexadecimal para RGB Os valores entre 00 e FF são basicamente 0 a 255 em hexadecimal. Isso é fácil de converter. Vamos criar uma função que vai pegar cada par de cores do código hexadecimal e retornar como números na base decimal. Então um FF deve retornar 255. ```javascript // exemplo de cor: #15FA3D function hexToRGB(color){ color = color.replace('#', ''); // vamos remover o # // e pegar os valores de Red, Green e Blue let red = color.substr(0, 2), green = color.substr(2, 2), blue = color.substr(4, 2); // agora vamos converter a string em número com o parseInt // por estar em hexadecimal, indicamos a base 16 red = parseInt(red, 16); green = parseInt(green, 16); blue = parseInt(blue, 16); // e vamos retornar como um array return [red, green, blue]; } // saída esperada: [21, 250, 61] ``` ### Formatando cores RGB Já temos nossa cor hexadecimal em RGB em um formato de Array, o que nos facilita na hora de pegar cada uma das cores. Mas e se inicialmente já tivermos uma cor em RGB? Vamos criar uma função para formatar cores RGB para o formato que estamos usando. É comum tanto o uso do RGB quanto o RGBA, então vamos primeiro deixar apenas os números, separar pelas vírgulas e pegar os valores de Red, Green e Blue. ```javascript // exemplo de cor: rgba(25, 15, 200, 0.8) function formatRGB(color){ // removemos as letras e parênteses color = color.replace(/[rgba()]/gi, ''); // separamos por vírgulas color = color.split(','); // agora teríamos algo como ["25", " 15", " 200", " 0.8"] // vamos pegar cada um dos valores das strings e converter para números const red = parseInt(color[0]), green = parseInt(color[1]), blue = parseInt(color[2]); return [red, green, blue]; } // saída esperada: [25, 15, 200] ``` ## Convertendo RGB para HSL Para chegarmos na parte de ordenação precisamos das cores em `HSL`. Essa parte é um pouco mais complexa, então eu vou montar a função aos poucos para ir explicando melhor cada pedaço, e no final eu mostro a função inteira. Para não ficar repetindo, as partes já explicadas serão substituídas por `...`. Vamos começar simplesmente declarando a função, que vai receber separadamente os valores de Red, Green e Blue. ```javascript function RGBToHSL(r, g, b){ } ``` Os valores de R, G e B sempre serão um número entre 0 e 255. Primeiro temos que transformar esses números em um valor entre 0 e 1. Para isso, basta dividí-los por 255. ```javascript function RGBToHSL(r, g, b){ r /= 255; g /= 255; b /= 255; // lembrando que // r/= 255 é igual a // r = r / 255; } ``` Agora vamos pegar qual o maior e o menor valor entre esses três números. Para isso utilizamos `Math.min` e `Math.max`. Também vamos declarar uma variável chamada `delta`, que vai indicar a diferença entre o maior e o menor valor, e por último já vamos declarar as variáveis `h`, `s` e `l`, que terão os valores para termos as cores no modelo `HSL`. ```javascript function RGBToHSL(r, g, b){ ... let min = Math.min(r, g, b), max = Math.max(r, g, b), delta = max - min, h = 0, s = 0, l = 0; } ``` ### Cálculo da Matiz Agora podemos começar a calcular cada uma das propriedades. Primeiro vamos calcular `Hue` (matiz). Temos algumas regrinhas para isso: - Se todos os valores (r, g e b) são iguais, h deve ser 0. - Se a maior cor for `Red`, a fórmula deve ser ((g - b) / delta) % 6 - Se a maior cor for `Green`, a fórmula deve ser (b - r) / delta + 2 - Se a maior cor for `Blue`, a fórmula deve ser (r - g) / delta + 4 Podemos utilizar o `delta` para saber se todas as cores são iguais. Afinal, se o maior valor e o menor são iguais, isso significa que todos os valores são iguais, fazendo o `delta` ser 0. Então agora, seguindo essas regras, teremos: ```javascript function RGBToHSL(r, g, b){ ... if(delta === 0){ h = 0; }else if(max === r){ h = ((g - b) / delta) % 6; }else if(max === g){ h = (b - r) / delta + 2; }else{ h = (r - g) / delta + 4; } } ``` Depois de definir o valor de `h`, multiplicamos por 60 e arrendondamos. Como precisamos de um valor entre 0 e 360, precisamos arrumar caso apareça um valor negativo. Para isso, basta somar 360. Isso significa que -90 resultaria em 270. ```javascript function RGBToHSL(r, g, b){ ... h = Math.round(h * 60); if(h < 0){ h += 360; } } ``` ### Cálculo do Brilho Agora vamos calcular `Lightness` (brilho), já que a saturação depende dele. O cálculo do brilho é a soma do maior valor e do menor valor dividido por 2. ```javascript function RGBToHSL(r, g, b){ ... l = (max + min) / 2; } ``` ### Cálculo da Saturação Agora vamos usar o `delta` para calcular `Saturation` (saturação). Se o delta for 0, a saturação também deve ser 0. Se o valor for diferente de 0 devemos pegar 1 e subtrair o valor absoluto do dobro do brilho menos 1. Valor absoluto é basicamente deixar um número negativo na forma positiva. Então -45 ficaria 45. ```javascript function RGBToHSL(r, g, b){ ... s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); } ``` ### Finalizando a conversão para HSL Agora que temos os valores de `S` e `L`, mas eles estão entre 0 e 1. Para converter para valores entre 0% e 100% basta multiplicar por 100. Vamos usar `.toFixed(1)` para limitar um número depois da vírgula. Assim um valor `0.3752` vai se tornar `37.5`. ```javascript function RGBToHSL(r, g, b){ ... s = +(s * 100).toFixed(1); l = +(l * 100).toFixed(1); } ``` Nossa função completa ficará assim: ```javascript function RGBToHSL(r, g, b){ r /= 255; g /= 255; b /= 255; let min = Math.min(r, g, b), max = Math.max(r, g, b), delta = max - min, h = 0, s = 0, l = 0; if(delta === 0){ h = 0; }else if(max === r){ h = ((g - b) / delta) % 6; }else if(max === g){ h = (b - r) / delta + 2; }else{ h = (r - g) / delta + 4; } h = Math.round(h * 60); if(h < 0){ h += 360; } l = (max + min) / 2; s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); s = +(s * 100).toFixed(1); l = +(l * 100).toFixed(1); return [h, s, l]; } ``` Como temos nossas cores em um Array, como `[25, 15, 200]`, podemos usar o operador spread para passar esses valores para a função, como: ```javascript const color = [25, 15, 200]; RGBToHSL(...color); // retorno: [243, 86, 42.2] ``` [ ![Desenvolvedor React](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Formação Desenvolvedor React Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-react) ## Ordenando Cores Agora que temos cores, tanto `Hexadecimal` quanto `RGB`, no formato `HSL`, podemos ordená-las. Como vimos, a matiz é definida pelo primeiro valor no modelo `HSL`. Então podemos usá-lo para ordenar nossas cores. Para isso basta utilizar o método `.sort()` dos Arrays e passar uma função para fazer a comparação entre as cores. ```javascript let colors = [ "#fbb735", "#e98931", "#eb403b", "#b32E37", "#6c2a6a", "#5c4399", "#274389", "#1f5ea8", "#227FB0", "#2ab0c5", "#39c0b3" ]; // convertendo de hexadecimal para hsl colors = colors.map(color => { // de hexadecimal para rgb color = hexToRGB(color); // de rgb para hsl return RGBToHSL(...color); }) // ordenação pela matiz colors.sort((a, b) => a[0] - b[0] > 0 ? 1 : -1 ); ``` ## Resultado Veja abaixo a implementação. Use os botões para gerar cores e depois para ordenar. Você vai notar que a ordenação não é 100% perfeita. Isso porque utilizamos apenas a matiz para a ordenação, e o brilho e saturação também são muito importantes para a definição de uma cor. Mas para coisas mais simples esse código funciona muito bem, além de ter servido para aprendermos muitas coisas. Para mais precisão, prefira utilizar bibliotecas como o [color-sorter](https://www.npmjs.com/package/color-sorter "color-sorter"), onde podemos passar um Array de cores em qualquer formato, até mesmo misturando formatos. Ele também leva em conta coisas como saturação, brilho e transparência. Veja como o resultado com essa biblioteca é mais preciso: Há muitas maneiras de ordenar cores, e dependendo do que você quer pode ser necessário dar mais importância para uma propriedade ao invés de outra. - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #Círculo cromático ](https://www.treinaweb.com.br/blog/tag/circulo-cromatico) - [ #Cores ](https://www.treinaweb.com.br/blog/tag/cores) - [ #Ordenação de Cores ](https://www.treinaweb.com.br/blog/tag/ordenacao-de-cores) - [ #Como converter cores ](https://www.treinaweb.com.br/blog/tag/como-converter-cores) - [ #RGB ](https://www.treinaweb.com.br/blog/tag/rgb) - [ #Hexadecimal ](https://www.treinaweb.com.br/blog/tag/hexadecimal) - [ #HSL ](https://www.treinaweb.com.br/blog/tag/hsl) - [ #Matiz ](https://www.treinaweb.com.br/blog/tag/matiz) - [ #Saturação ](https://www.treinaweb.com.br/blog/tag/saturacao) - [ #Brilho ](https://www.treinaweb.com.br/blog/tag/brilho) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/07/31131011/funções-js-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 8 anos atrás ## [ JavaScript: métodos de Arrays que você precisa conhecer ](https://www.treinaweb.com.br/blog/javascript-metodos-de-arrays-que-voce-precisa-conhecer) Trabalha com JavaScript? Então você precisa conhecer estes métodos para trabalhar com Arrays. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/13164211/JAVASCRIPT-COISAS-ESTRANHAS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ JavaScript - Entendendo as partes estranhas ](https://www.treinaweb.com.br/blog/javascript-entendendo-as-partes-estranhas) Conheça o motivo por trás de vários comportamentos considerados estranhos que o JavaScript possui. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/atributos-html-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Entendendo os atributos HTML ](https://www.treinaweb.com.br/blog/entendendo-os-atributos-html) No artigo de hoje, veremos algo que está muito presente no mundo da programação, atributos. Por que são tão importantes para o Front-End? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/javascript-comandos-do-console-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ JavaScript - Comandos do Console ](https://www.treinaweb.com.br/blog/javascript-comandos-do-console) Conheça os comandos do console do navegador e domine essa ferramenta para melhorar seus testes ou caça aos bugs do seu JavaScript! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/06/27155937/js-symbol-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 8 anos atrás ## [ JavaScript: você sabe o que são e por que usar Symbols? ](https://www.treinaweb.com.br/blog/javascript-voce-sabe-o-que-sao-e-por-que-usar-symbols) Descubra a utilidade dos Symbols no JavaScript, novo tipo primitivo introduzido no ES2015. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/02/06152024/js-engine-400x280.png) [ Desenvolvimento de Jogos ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-de-jogos) 9 anos atrás ## [ JavaScript Game Engines ](https://www.treinaweb.com.br/blog/javascript-game-engines) Conheça as principais Game Engines para JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/06/javascript-generators-e-onde-usa-los-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ JavaScript Generators e onde usá-los ](https://www.treinaweb.com.br/blog/javascript-generators-e-onde-usa-los) Veja como e onde podemos aproveitar os Generators no JavaScript para melhorar o nosso código. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/javascript_generators-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ JavaScript Assíncrono com Generators ](https://www.treinaweb.com.br/blog/javascript-assincrono-com-generators) Generators são uma funcionalidade que veio no ES2015 para nos auxiliar no desenvolvimento de código assíncrono. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/javascript-comandos-do-console-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Trabalhando com data no JavaScript ](https://www.treinaweb.com.br/blog/trabalhando-com-data-no-javascript) Neste artigo veremos como manipular datas no JavaScript, utilizando a classe Date, como pegar a data atual e utilizar os métodos da classe. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/GUIA-LINGUAGEM-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Guia da Linguagem JavaScript ](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript) Neste Guia da Linguagem Javascript vamos abordar aspectos fundamentais, como: tipos de dados, variáveis, objetos, arrays e muito mais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/5-bons-motivos-para-estudar-javascript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ 5 bons motivos para estudar JavaScript ](https://www.treinaweb.com.br/blog/5-bons-motivos-para-estudar-javascript) O JavaScript é uma linguagem que está praticamente em todos os lugares por causa de sua flexibilidade e adaptabilidade à diversos ambientes. Vamos conferir nesse artigo 5 bons motivos para você estudar essa linguagem. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/05/Criando_componente_snackbar_com_JavaScript_e_CSS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ Criando componente snackbar com JavaScript e CSS ](https://www.treinaweb.com.br/blog/criando-componente-snackbar-com-javascript-e-css) Nesse artigo, você irá ter o passo a passo de como criar um componente de snackbar do zero. Sendo capaz de adapta-lo como preferir. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **07h 12min 57s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58