Como capturar cores da tela? - @Curso em Vídeo HTML5 e CSS3

124.96k views1896 WordsCopy TextShare
Curso em Vídeo
Você sabe como capturar uma cor que está aparecendo na sua tela? Sabe como obter códigos de cores us...
Video Transcript:
E você tava navegando no site eu levo um PDF no seu navegador e apareceu aquela cor linda maravilhosa você quiser saber o código dela pois eu vou te ensinar como capturar esse código de cor de maneira muito sim é [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem-vindo a mais uma aula aqui do seu curso de html com CSS esse assunto que a gente vai ver agora ainda está no Capítulo 13 que a gente fala sobre cores e muita gente que chega para mim fala assim uma Guanabara tem aquela cor específica Naquele site que eu gosto tem como capturar tem como capturar antes eu vou te mostrar como as pessoas fazem Terra errado não né uma das maneiras que as pessoas fazem e depois vou te mostrar uma maneira muito mais fácil bem comigo aqui pra tela do computador que eu vou te explicar o passo-a-passo para isso mas antes de dar continuidade a sua aula tu vem aqui dar um recado especial da re code que é patrocinadora do nosso curso e Como disse aqui anteriormente em outros vídeos esse curso a Record é uma organização com o objetivo de ensinar tecnologias e ela tá trazendo para você que é aluno do curso em vídeo uma série de cursos que vão te preparar para entrar no mercado de trabalho e eles oferecem cursos desde o mais básico que é conhecendo o ambiente Windows e o pacote Office até alguns outros que com certeza vão te interessar um pouquinho mais como aí e aquelas coisas realidade virtual realidade aumentada desenvolvimento de aplicativos móveis um curso de tecnologias para o futuro e muito mais e para fazer parte da plataforma da Record é muito simples a inscrição é grátis e você vai ter todas as instruções pelo código que tá aparecendo aqui na sua tela é só você abrir o aplicativo da sua câmera apontar para o código que tá aparecendo e ver todas as oportunidades que a Record tá trazendo para você voltamos agora a sua aula então é só uma das coisas que as pessoas fazem Então vou aqui no site da hostnet hostnet. Com. br tá lá aí tu fala assim caramba ela teve aqui uma parada esse rostinho aqui Nossa gostei muito dessas duas cores aqui que que geralmente as pessoas fazem elas apertam print screen do teclado para tirar um print da tela aqui como eu tô em outro sistema operacional é uma outra coisa que eu vou fazer eu vou capturar aqui só esperar sua vida até perto da cápsula aqui embaixo você pode apertar printscreen aí no seu no seu teclado ou acessar a ferramenta de captura de tela que tem Exatamente isso agora eu vou o direito da imagem vem aqui dormindo abrindo no manda abrir com eu vou abrir ninguém ele vai abrir o arquivo não é o copiar né Se você usar o print screen você consegue colar no Gimp só queria um arquivo novo outro aqui em converter E tá lá então você conseguir pegar essa cor é só você vir aqui ó existe essa ferramenta que dão conta gota É só você clicar ele pegou vou mudar aqui a cor ou colocar uma conta gota de novo hoje então tá lá as duas cores inclusive o teu negócio pra te mostrar aqui no ambiente eu não tinha te mostrado anteriormente é lembra que eu tinha indicado aqui selecionar dessa forma olha aqui ó se você clicar aqui aqui ó você vai para o círculo cromático aquele negócio que a gente já tinha feito anteriormente você consegue selecionar a cor aqui a tonalidade aqui tá Anna saturação luminosidade aquela coisa toda e também tem o código aqui para você conseguir pegar tá é mas tem muita gente que faz isso né tira print do site vai no editor de imagem para poder pegar o código da cor Então eu tenho aqui ó esse roxinho É o quatro 75 15 e o verdinho e na verdade o verde é 21 adc1 eu vou te dizer o seguinte cara provavelmente a tonalidade da cor mudou um pouquinho quando eu tiro print tá então nem é tão confiável assim que eu vou te mostrar agora a ferramenta maravilhosa que você vai instalar no seu navegador aí ó a gente abre o nosso Google Chrome do Google Chrome qualquer eu tô até coisa esses anterior aqui vai para o Google você vai procurar pô Chrome Web Store que é o gestor de é lojinha de extensões do Google Chrome abre aqui Google Chrome história Chrome.
Google. com/Web Store aqui na Pesquisar loja você vai colocar um planeta chamado color Zila Zila para escrever assim colorzilla apertou E aí você vai ter aqui ó o colo se lá você vai clicar aqui nesse botão usar no Chrome ele vai te pedir autorização você vai adicionar a extensão quando eu clicar aqui ó fica de olho do lado da nossa engrenagem zinha aqui que a gente já instalou no início do curso por quê como adicionar extensão ele já abriu aqui eu tenho opção do colorzilla agora eu posso acessar aquele site que eu quis lá post net. com.
br Aí você procura o que você quer aí eu quero muito essas coisas aqui é o que você vai fazer você vai clicar nessa esse conta-gotas que vai aparecer aqui e vai clicar em perdi color picker cliquei agora isso eu vou mexendo o mouse em qualquer lugar olha o que ele tá fazendo aqui em cima aqui em cima aí tá mostrando o código RGB eu cliquei ele Já copiou o código hexadecimal para lá então se eu ver aqui ó eu consigo vou colar aqui nessa exercício que a gente fez só para você ver a lá ele Já copiou o código do rostinho se eu vi aqui ó do verdinho perdão se você cliente quiser eu coloquei aqui de novo hoje decola pq aqui e clica no o Sheen Já copiou também eu posso voltar para cá e também conta aqui aqui essas aqui são as duas cores estavam lá no site isso funciona com qual o site com qualquer paleta qualquer coisa esteja aparecendo no seu navegador eu falei lá no início a Júlia tá dando um PDF para ler PDF ficar no navegador né se você tiver fazendo um PDF para aquela voz abrir aqui o Gustavo Guanabara quanto 20 Ranger pronto aí eu aí eu vou abrir a parte de PDF vou abrir a parte de cores essa aula atual aqui ele baixou tá lá eu tô vendo um PDF na tela se você quiser pode até vem aqui onde download ele baixar o pdf para você tá aqui tá vendo o pdf você quiser você clica aqui color picker pega aqui ó ele pegou o verdinho também tá então assim você consegue é capturar cores utilizando o colorzilla fica muito mais fácil aí eu consigo por exemplo vou aqui na no da Rosinete vou pegar aqui o verdinho pegar o verdinho copiei tá o código vem aqui no colo. Adobe. com aí eu venho aqui ó em qualquer um deles pode clicar aqui ó e control V doente é aquela cor quero pegar aquele verdinho também vão capturar o verdinho tá aqui o verdinho na Capítulo roxinho calma aí aqui a hora que o teu o verde vou vir aqui no segundo violência é na hora não deixa o primeiro e segundo não já vai deixar um só no naquele outro curso você consegue a gente vamos fazer no curso tá vendo por isso que eu mostrei várias possibilidades óculos pontocom.
com mudar lá Estar direito ele vai abrir as cinco cores aqui para mim let's go aqui ó hoje passa ele para né tá lá eu vou fazer o seguinte eu clico aqui colo a cor doente já foi vou dar um lote nela vou vir aqui selecione a outra cor vim aqui no curso cliquei vou colar aqui só tirar hashtag na frente que ele já tem a hashtag e vou dar um toque nela também então ó todas essas duas essas duas coisas eu puxei do site agora é só apertar no espaço e ver com as outras cores que combinam com ela tem uma outra maneira que eu pensei aqui agora que eu tava te explicando que dá para fazer com Adobe Colors Cola contador.
Related Videos
Como criar degradê com CSS ? - @Curso em Vídeo HTML5 e CSS3
13:45
Como criar degradê com CSS ? - @Curso em V...
Curso em Vídeo
193,220 views
Anatomia do tipo - @Curso em Vídeo HTML5 e CSS3
25:11
Anatomia do tipo - @Curso em Vídeo HTML5 e...
Curso em Vídeo
125,393 views
Paleta de cores - @Curso em Vídeo HTML5 e CSS3
18:59
Paleta de cores - @Curso em Vídeo HTML5 e ...
Curso em Vídeo
143,969 views
Harmonia de cores - @Curso em Vídeo HTML5 e CSS3
25:08
Harmonia de cores - @Curso em Vídeo HTML5 ...
Curso em Vídeo
157,349 views
Usando Google Fonts - @Curso em Vídeo HTML5 e CSS3
15:23
Usando Google Fonts - @Curso em Vídeo HTML...
Curso em Vídeo
150,968 views
Representando Cores com CSS3 - @Curso em Vídeo HTML5 e CSS3
20:46
Representando Cores com CSS3 - @Curso em V...
Curso em Vídeo
176,686 views
Primeiros passos em Tipografia - @Curso em Vídeo HTML5 e CSS3
17:00
Primeiros passos em Tipografia - @Curso em...
Curso em Vídeo
130,869 views
Criando um exemplo real - @Curso em Vídeo HTML5 e CSS3
15:57
Criando um exemplo real - @Curso em Vídeo ...
Curso em Vídeo
174,267 views
Usando o id com CSS - @Curso em Vídeo HTML5 e CSS3
13:02
Usando o id com CSS - @Curso em Vídeo HTML...
Curso em Vídeo
126,829 views
Planejando a estrutura do seu site - @Curso em Vídeo HTML5 e CSS3
15:32
Planejando a estrutura do seu site - @Curs...
Curso em Vídeo
111,928 views
Curso de HTML e CSS com projeto - HTML e CSS para iniciantes
2:59:27
Curso de HTML e CSS com projeto - HTML e C...
Matheus Battisti - Hora de Codar
157,131 views
COMO FAZER ENCAIXE DAS CORES DA SERIGRAFIA
18:49
COMO FAZER ENCAIXE DAS CORES DA SERIGRAFIA
Bora Silkar
24,223 views
Curso de CSS para iniciantes - Aprenda CSS e crie um projeto
1:49:17
Curso de CSS para iniciantes - Aprenda CSS...
Matheus Battisti - Hora de Codar
159,759 views
Unveiling CSS Grid in practice | Mayk Brito
36:17
Unveiling CSS Grid in practice | Mayk Brito
Rocketseat
372,949 views
Como fazer marcações das telas para estampas de duas ou mais cores
13:25
Como fazer marcações das telas para estamp...
SILK FÁCIL
5,820 views
Como definir a paleta de cores para um site - Curso WordPress #11
27:32
Como definir a paleta de cores para um sit...
Curso em Vídeo
109,696 views
CSS Grid Layout e Flexbox - Quando Utilizar
39:09
CSS Grid Layout e Flexbox - Quando Utilizar
Origamid
653,340 views
Curso de HTML e CSS para iniciantes - Aula 1
16:12
Curso de HTML e CSS para iniciantes - Aula 1
RBtech
1,423,988 views
Pseudo-classes em CSS - @Curso em Vídeo HTML5 e CSS3
13:56
Pseudo-classes em CSS - @Curso em Vídeo HT...
Curso em Vídeo
148,390 views
Copyright © 2024. Made with ♥ in London by YTScribe.com