1
00:00:01,050 --> 00:00:01,500
ESTÁ BEM.

2
00:00:01,740 --> 00:00:06,600
Então, nesta lição, vamos discutir muitas das diferentes maneiras de descrever e representar

3
00:00:06,750 --> 00:00:14,040
cores em C Ss e até agora, se nós vamos à avaliação que estamos escrevendo, acabamos de usar cores simples

4
00:00:14,040 --> 00:00:20,520
da escola primária como vermelho e verde e roxo e, obviamente, eles funcionam bem, mas eles não são

5
00:00:20,520 --> 00:00:22,880
tons particularmente agradáveis, não são cores agradáveis.

6
00:00:22,890 --> 00:00:28,440
Na minha opinião e você provavelmente nunca usá-los porque a maioria dos designers e a maioria das pessoas que fazem

7
00:00:28,770 --> 00:00:30,900
sites tem uma paleta de cores muito específica.

8
00:00:31,320 --> 00:00:36,210
marca como uma sombra muito específica de verde para uma marca ou se é uma paleta de cores.

9
00:00:36,210 --> 00:00:39,070
Se é algo que você conhece é seguir a cor da

10
00:00:39,250 --> 00:00:45,300
Eu sou designer ou alguém criou quase ninguém usa apenas o padrão padrão vermelho ou verde ou roxo.

11
00:00:47,130 --> 00:00:52,670
Com isso dito, há bastantes cores embutidas e CSSA que possuem nomes.

12
00:00:52,980 --> 00:00:55,380
E, na verdade, provavelmente há mais do que você pensaria.

13
00:00:55,500 --> 00:00:59,370
E há muito mais do que a maioria das pessoas lembrou.

14
00:00:59,370 --> 00:01:06,710
Então, há coisas como orquídeas azulas ou escuras, e acho que são 147 cores diferentes.

15
00:01:06,870 --> 00:01:10,530
E este site aqui que realmente realmente nunca usei.

16
00:01:10,540 --> 00:01:15,350
Eu só quero mostrar para você que é uma maneira de visualizar todas as diferentes cores com nome e ver avaliar.

17
00:01:16,080 --> 00:01:22,980
E, é claro, o problema com o uso destes ainda é apenas 147 cores e você pode querer uma cor que

18
00:01:22,980 --> 00:01:29,070
pareça com essa cor dourada, mas ligeiramente mais leve ou ligeiramente mais escura ou ligeiramente mais vermelha e

19
00:01:29,070 --> 00:01:31,500
não haverá uma opção perfeita para você.

20
00:01:31,500 --> 00:01:36,310
E então, o outro problema é que é difícil lembrar esses nomes como cinza de ardósia claro.

21
00:01:36,360 --> 00:01:37,750
Ninguém lembra disso.

22
00:01:37,770 --> 00:01:44,910
Então eu realmente uso apenas cores com nome como roxo laranja vermelho apenas para fins de depuração muito rápidos para garantir que

23
00:01:44,910 --> 00:01:45,940
algo esteja funcionando.

24
00:01:45,960 --> 00:01:48,410
Eu simplesmente o deixarei vermelho e ver se isso funciona.

25
00:01:48,540 --> 00:01:54,080
E também apenas para fins educacionais, mas a maioria das pessoas nunca usaria essas cores.

26
00:01:54,730 --> 00:01:58,940
Portanto, o CSS fornece alguns sistemas de cores diferentes com os quais podemos trabalhar.

27
00:01:59,280 --> 00:02:03,410
E estes são sistemas de cores pela maneira que existem fora do SS.

28
00:02:03,540 --> 00:02:10,320
Então, se você tem alguma familiaridade com a fotografia ou a impressão e você trabalhou com cores antes de

29
00:02:10,320 --> 00:02:11,790
ter encontrado algumas delas.

30
00:02:12,120 --> 00:02:17,700
Então, o primeiro é algo chamado hexadecimal e antes de falar sobre porque é chamado de hexadecimal

31
00:02:17,910 --> 00:02:21,970
e o que isso significa, vamos dar uma olhada em alguns exemplos.

32
00:02:21,990 --> 00:02:28,650
Então, por aqui, a primeira coisa que estamos fazendo é selecionar todos os H-1 e mudar a cor do texto para ser preto.

33
00:02:30,030 --> 00:02:34,860
A próxima coisa que estamos fazendo é selecionar todas as tatuagens mudando a cor para ser uma sombra de

34
00:02:34,860 --> 00:02:39,550
púrpura e, em seguida, selecionar todos os grupos de idade e ensiná-los a ser uma sombra de rosa.

35
00:02:39,600 --> 00:02:46,150
Então, o que você notará é que, em vez de ter uma palavra como vermelho ou roxo, agora temos esse

36
00:02:46,220 --> 00:02:50,710
símbolo de hash e é tecnicamente chamado de otimista Thorpe seguido de seis dígitos.

37
00:02:51,270 --> 00:02:56,100
Então, para ficar preto, são seis zeros para serem roxos.

38
00:02:56,160 --> 00:02:59,690
Você notará que é números, mas também há uma letra B lá.

39
00:02:59,940 --> 00:03:07,000
E, finalmente, para obter essa cor rosada é novamente números e letras desta vez, letra F. Então, o que está acontecendo aqui.

40
00:03:07,020 --> 00:03:09,200
Eu vou continuar e abrir algumas anotações que eu tenho.

41
00:03:09,390 --> 00:03:12,300
E nós vamos fazer uma aula de matemática muito curta é

42
00:03:12,630 --> 00:03:18,120
isso mais apenas por algo que eu acho interessante, mas também é informativo e ajudará a entender como o hexadecimal funciona.

43
00:03:18,120 --> 00:03:23,620
Então, se você voltar para o ensino médio quando eu estava na escola, pelo menos falamos muito sobre

44
00:03:23,640 --> 00:03:28,410
o sistema decimal e como vamos supor que queria criar um número de três dígitos.

45
00:03:28,890 --> 00:03:35,080
Nós colocamos uma vez o 10º lugar no lugar das centenas.

46
00:03:35,310 --> 00:03:39,660
Então, se eu quisesse um número, o maior número de três dígitos que posso criar

47
00:03:39,690 --> 00:03:45,660
é novecentos e noventa e nove, o número mais pequeno de três dígitos tecnicamente é 111 ou 0 0 ou 1.

48
00:03:45,660 --> 00:03:52,710
de números decimais Eu tenho 10 opções para cada slot que eu posso fazer de 0 a 9.

49
00:03:53,190 --> 00:04:01,500
Mas a idéia é que cada lugar em nossa base regular 10, que é o que isso significa base 10 sistema

50
00:04:01,500 --> 00:04:07,560
Então, a base 10 é o que estamos acostumados a trabalhar com os nossos dígitos são 0 1 2 3 4 5 6 7 8 9.

51
00:04:07,980 --> 00:04:14,950
Mas existem outros sistemas de números.

52
00:04:15,390 --> 00:04:17,630
Então, você já ouviu falar de binário antes e isso é baseado em dois.

53
00:04:17,790 --> 00:04:21,940
E isso significa que nós só temos 0 e 1 como nossas opções.

54
00:04:21,960 --> 00:04:25,360
Então, se eu quisesse construir um número binário de três dígitos, o maior que eu posso construir é 1 1 1.

55
00:04:25,770 --> 00:04:32,690
Isso não é o mesmo que cento e onze.

56
00:04:32,700 --> 00:04:35,560
que o hacking parece e eles estão totalmente errados.

57
00:04:35,580 --> 00:04:42,350
Então, este não é realmente o momento de realmente examinar como o binário funciona, mas você pode ver coisas como esta em

58
00:04:42,370 --> 00:04:46,960
shows da CSI ou em qualquer tipo de show onde eles estão tentando mostrar o

59
00:04:46,960 --> 00:04:48,310
Mas é verdade que o binário é uma parte realmente importante de como os computadores funcionam.

60
00:04:48,490 --> 00:04:53,230
Então, isso também está baseado.

61
00:04:53,470 --> 00:04:54,850
Então, temos apenas duas escolhas, zero ou uma.

62
00:04:54,910 --> 00:04:57,030
Então hexadecimal é a base 16.

63
00:04:57,370 --> 00:04:59,850
Então, isso significa que temos 16 escolhas

64
00:05:00,340 --> 00:05:07,300
e essas escolhas vão de zero a nove e, em vez de ir para 10 11 12 13 14 15.

65
00:05:07,300 --> 00:05:10,480
Esses são números de dois dígitos com dois dígitos que são mais problemáticos e que incluem letras.

66
00:05:10,810 --> 00:05:17,380
Então temos 0 a 9 e depois ABC DCF.

67
00:05:17,380 --> 00:05:22,070
Assim, o maior número hexadecimal de números de três dígitos seria F F F e o menor 0 0 0.

68
00:05:22,270 --> 00:05:33,090
Então é como qualquer outro sistema de números, exceto que temos 16 escolhas.

69
00:05:33,910 --> 00:05:37,500
E a razão pela qual o hexadecimal é usado em

70
00:05:37,690 --> 00:05:45,520
vez de usar apenas decimal para nomear uma cor é que nos dá mais opções enquanto mantém os nomes de recolors relativamente curtos.

71
00:05:45,520 --> 00:05:50,610
Então, basicamente, o hexadecimal é apenas tirar cores e dar-lhes nomes numéricos.

72
00:05:50,920 --> 00:05:55,370
E se usarmos a base 10, só temos 10 opções por dígito.

73
00:05:55,390 --> 00:05:59,200
Portanto, precisamos usar mais dígitos se usarmos binário e precisamos usar uma tonelada de dígitos para representar as cores.

74
00:05:59,200 --> 00:06:05,410
Centenas e centenas de milhares de dígitos.

75
00:06:05,770 --> 00:06:07,870
Então, os números hexadecimais são começos de seis dígitos do que Octa Thorpe.

76
00:06:07,930 --> 00:06:12,820
E então um dígito dois três quatro cinco seis.

77
00:06:13,030 --> 00:06:18,590
E a maneira como funciona não é apenas números aleatórios.

78
00:06:18,730 --> 00:06:22,010
Na verdade, há um pouco de um sistema.

79
00:06:22,240 --> 00:06:24,590
Assim, os dois primeiros números correspondem à quantidade

80
00:06:24,640 --> 00:06:31,600
de cor vermelha na cor ao lado para corresponder à quantidade de verde e nas duas últimas correspondem à quantidade de azul na cor.

81
00:06:31,600 --> 00:06:36,220
Então eu vou seguir em frente e mudar para nossa Ver avaliar e mostrar o que quero dizer.

82
00:06:36,760 --> 00:06:40,300
Então, vamos trabalhar com o nosso H-1 aqui.

83
00:06:40,810 --> 00:06:43,510
Nós temos três H e devemos estilo.

84
00:06:43,600 --> 00:06:46,880
Então, para usar hexadecimal, tudo o que fazemos é diminuir Octa Thorpe e, em seguida, seis dígitos.

85
00:06:47,050 --> 00:06:51,790
Então, vamos começar por definir uma cor vermelha e lembre-se que as duas primeiras são vermelhas.

86
00:06:52,180 --> 00:06:58,090
Então, nossos dois primeiros dígitos, se desejássemos de vermelho completo, f f, porque esse é o número mais alto.

87
00:06:58,090 --> 00:07:04,370
E então, tudo o resto pode ser zero.

88
00:07:04,990 --> 00:07:07,630
Então, isso vai se tornar vermelho todo o caminho.

89
00:07:07,630 --> 00:07:10,370
Não é verde e não azul.

90
00:07:10,660 --> 00:07:12,050
E se fizermos isso.

91
00:07:12,280 --> 00:07:13,270
Vamos continuar e abrir o nosso arquivo, você verá que são h são vermelhas brilhantes.

92
00:07:13,570 --> 00:07:19,810
Então vamos voltar e vamos brincar com isso um pouco e agora apresentar um pouco verde.

93
00:07:19,870 --> 00:07:26,400
Então, vamos dar oito e você verá que pegamos essa

94
00:07:26,860 --> 00:07:35,030
linda laranja e você pode estar se perguntando como é verde laranja vermelho.

95
00:07:35,260 --> 00:07:36,280
E a resposta é

96
00:07:36,520 --> 00:07:42,700
que este não é o mesmo sistema de cores que você costumava misturar pinturas, por exemplo, o RG B funciona um pouco diferente.

97
00:07:43,930 --> 00:07:46,000
E, novamente, isso é algo para outro vídeo.

98
00:07:46,150 --> 00:07:48,190
Mas, essencialmente, se adicionamos vermelho verde

99
00:07:48,220 --> 00:07:57,820
e azul todo o caminho até vermelho cheio verde cheio e azul completo a cor resultante não é como um marrom ou preto, como você poderia esperar.

100
00:07:59,530 --> 00:08:03,160
Na verdade, é branco e isso é realmente como a luz funciona no mundo real.

101
00:08:03,160 --> 00:08:07,350
Se você pudesse levar para deixar as luzes ou três

102
00:08:07,420 --> 00:08:12,430
luzes LCD um vermelho verde e azul e combiná-los e brilhar juntos.

103
00:08:12,430 --> 00:08:13,740
Você realmente obteria luz branca.

104
00:08:13,810 --> 00:08:15,560
Então é assim que funciona esta cor.

105
00:08:15,790 --> 00:08:17,690
ESTÁ BEM.

106
00:08:18,060 --> 00:08:18,310
Então, na maioria das vezes, na verdade você não vem com essas cores do zero.

107
00:08:18,310 --> 00:08:23,380
Então não é realmente.

108
00:08:23,380 --> 00:08:24,410
Quero dizer, é uma

109
00:08:24,520 --> 00:08:29,890
boa habilidade, mas você não precisa ser capaz de identificar essa cor como um tipo de você conhece a sombra de roxo

110
00:08:33,370 --> 00:08:38,980
ou verde ou seja o que for, não é realmente o escopo o que você costuma fazer é ter um seletor de cores .

111
00:08:38,980 --> 00:08:42,750
E então digamos que eu quero como uma sombra roxa escura.

112
00:08:43,350 --> 00:08:46,670
Há todo tipo de imagens em cores.

113
00:08:46,750 --> 00:08:48,160
Há alguns que estão na sua máquina, dependendo se você tiver um Mac ou um PC, você pode baixar um.

114
00:08:48,190 --> 00:08:53,110
Alguns deles estão incluídos, mas também podemos entrar on-line e,

115
00:08:53,110 --> 00:08:59,770
se eu quiser uma sombra escura e roxa, eu posso encontrar este roxo.

116
00:08:59,770 --> 00:09:01,400
Digamos aqui esta

117
00:09:02,290 --> 00:09:03,160
cor.

118
00:09:06,220 --> 00:09:07,300
E então eu posso simplesmente copiar.

119
00:09:07,840 --> 00:09:10,160
Eu acho que isso foi copiado.

120
00:09:10,230 --> 00:09:12,080
Não, você apenas copia.

121
00:09:12,140 --> 00:09:14,050
Lá está essa cor e

122
00:09:14,160 --> 00:09:17,950
use essa atualização e nós ficamos um roxo escuro.

123
00:09:21,320 --> 00:09:24,900
Então, esta é a maioria das vezes o que você fará, você terá um seletor de cores.

124
00:09:24,980 --> 00:09:28,090
Inicialmente você escolherá suas cores e então você apenas se referirá a elas.

125
00:09:28,340 --> 00:09:32,390
Então, não é o mais intuitivo.

126
00:09:32,390 --> 00:09:33,870
É melhor se dissesse algo como berinjela escura, mas, claro, isso não será tão preciso.

127
00:09:34,010 --> 00:09:42,770
Isso é apenas uma sombra de roxo escuro.

128
00:09:42,920 --> 00:09:44,540
E se eu quiser mudar, estou sem sorte.

129
00:09:44,540 --> 00:09:47,070
Então isso é hexadecimal.

130
00:09:47,120 --> 00:09:50,420
O próximo sistema de cores sobre o qual vamos falar é R. G. b, então o RGV funciona de forma similar, exceto

131
00:09:50,420 --> 00:09:57,410
que a sintaxe é ligeiramente diferente.

132
00:09:57,410 --> 00:09:58,910
Então R. G. B existem três canais exatamente como hexadecimal.

133
00:09:58,910 --> 00:10:02,600
Há vermelho verde e azul.

134
00:10:02,630 --> 00:10:04,620
E o que é diferente é que o RGV ainda está na base 10.

135
00:10:05,120 --> 00:10:08,380
Então, o que fazemos, temos três canais diferentes

136
00:10:08,810 --> 00:10:17,540
em vermelho verde azul e a sintaxe é cor dois pontos e, em seguida, a palavra são as letras R. G. seguida, o valor de nossa leitura o valor do nosso verde e o valor do nosso azul.

137
00:10:17,600 --> 00:10:24,110
B parênteses e, em

138
00:10:24,110 --> 00:10:25,360
E aqueles variam de zero a 255.

139
00:10:25,640 --> 00:10:29,340
Então, neste caso, estamos dizendo que todos os mais velhos são R. G. seja onde Red é zero verde é todo

140
00:10:29,900 --> 00:10:39,350
o caminho até em azul é zero.

141
00:10:39,350 --> 00:10:40,170
E nós obtemos este verde claro e este nós estamos definindo todos os dois anos para ser R. G. seja onde

142
00:10:40,670 --> 00:10:49,070
Red está a meio caminho.

143
00:10:49,070 --> 00:10:50,150
O verde desapareceu completamente.

144
00:10:50,300 --> 00:10:52,100
ainda menos vermelho e nós conseguimos essa sombra de azul.

145
00:10:52,340 --> 00:10:57,920
E Blue está a cerca de meio caminho e nós conseguimos um roxo agradável e, então, este está estabelecendo todo o grupo de idade para ser principalmente azul com um pouco verde e

146
00:10:58,370 --> 00:11:04,140
Então, vamos fazer alguns exemplos.

147
00:11:04,700 --> 00:11:07,420
Vamos pegar um livro novamente.

148
00:11:08,960 --> 00:11:13,720
Então, basta escrever a palavra nossos parênteses G-B e então precisamos dos nossos canais.

149
00:11:13,820 --> 00:11:19,480
Então, o primeiro se queremos um roxo ou quer um vermelho, vamos fazer 60.

150
00:11:19,640 --> 00:11:27,180
Não conheço 68 vermelhos.

151
00:11:27,200 --> 00:11:28,800
Zero verde e

152
00:11:29,360 --> 00:11:37,580
isso será azul ou roxo do que vermelho ou roxo, então faremos cem azuis e nós o salvaremos.

153
00:11:37,580 --> 00:11:39,840
E, claro, não parece muita mudança, mas mudou um pouco.

154
00:11:41,660 --> 00:11:45,560
Então, vamos em frente e agora aumente a leitura um pouco 240 e você pode ver que nós ficamos com um roxo rosado.

155
00:11:45,560 --> 00:11:53,920
E se eu apresentar um pouco de verde e se eu virar tudo até o final, como antes, com hexadecimal cheio vermelho verde e

156
00:11:54,500 --> 00:11:55,820
azul realmente nos dá

157
00:11:59,800 --> 00:12:01,700
branco e para ficar preto.

158
00:12:05,930 --> 00:12:13,900
Você quer zero para todos os três canais.

159
00:12:13,900 --> 00:12:18,080
Portanto, o nosso B é muito semelhante ao decimal.

160
00:12:18,080 --> 00:12:20,690
A única diferença é a sintaxe.

161
00:12:20,750 --> 00:12:22,660
Então, ao invés de escrever

162
00:12:22,940 --> 00:12:34,660
algo assim, temos dois canais ou dois dígitos para o vermelho para o verde e dois para o azul, em vez disso, temos três slots e nós simplesmente passamos de zero a 255.

163
00:12:34,670 --> 00:12:43,040
Então, apenas uma outra sintaxe e outra sintaxe que eu quero falar é o nosso GPA.

164
00:12:43,040 --> 00:12:49,880
Então, a R-GA funciona como R. G. B, exceto que há um pequeno toque que é um quarto canal chamado Alpha, que é como você

165
00:12:50,270 --> 00:12:56,150
pode tornar as cores transparentes.

166
00:12:56,210 --> 00:12:59,100
Então R. G. O V-A é ótimo se você quiser ter uma cor que você está fazendo mais ou menos transparente.

167
00:12:59,270 --> 00:13:05,950
Então, a maneira como funciona é a mesma sintaxe exata, exceto que escrevemos R. G. seja um e depois temos

168
00:13:06,230 --> 00:13:12,410
quatro canais que precisamos preencher.

169
00:13:12,410 --> 00:13:13,830
E os três primeiros, como antes.

170
00:13:14,150 --> 00:13:16,560
Eles variam de zero a 255, mas o último canto no canal alfa varia de zero a 1.

171
00:13:16,580 --> 00:13:23,900
Então, vou dar-lhe alguns exemplos aqui.

172
00:13:24,470 --> 00:13:26,370
Aqui estamos definindo os três para ser exatamente a mesma cor, tanto quanto os canais RG e B estão em causa.

173
00:13:26,540 --> 00:13:33,650
Então, 11 vermelho.

174
00:13:33,920 --> 00:13:35,080
Noventa e nove, verde 950 azul.

175
00:13:35,170 --> 00:13:37,850
E então, o quarto canal, estamos mudando o alfa ou mudando a transparência.

176
00:13:38,480 --> 00:13:42,840
Então, com quatro Alpha com tudo tudo, não há nenhuma transparência.

177
00:13:42,860 --> 00:13:47,950
Acabamos com esta gripe.

178
00:13:48,050 --> 00:13:49,810
Quando dissemos que o Alpha é o ponto seis, ficamos muito mais claros e mais transparentes.

179
00:13:50,480 --> 00:13:56,340
E, então, definimos que seja o ponto dois, nós conseguimos isso que é mal lá.

180
00:13:56,690 --> 00:14:01,640
Então, vamos fazer outro exemplo, vamos fazer Archie B-A e desta vez vamos fazer um verde.

181
00:14:01,880 --> 00:14:09,300
Então, 200 ou mais verdes e um pouco de azul e então precisamos do nosso alfa e vamos começar com um.

182
00:14:09,440 --> 00:14:17,420
Atualize a página e obtemos este verde.

183
00:14:18,860 --> 00:14:23,080
Então, agora vamos fazer o mesmo, mas torná-lo um pouco pálido. Então, vamos fazer o ponto oito.

184
00:14:23,180 --> 00:14:30,830
Eu vou atualizar e você pode ver que ficou um pouco pálido.

185
00:14:30,960 --> 00:14:34,330
Agora vamos ser mais drásticos 2. 2 e você pode ver que fica muito mais transparente.

186
00:14:34,460 --> 00:14:41,810
Então, para resumir, temos as cores construídas que a maioria das pessoas não usa.

187
00:14:42,920 --> 00:14:47,480
Nós temos hexadecimal.

188
00:14:47,690 --> 00:14:49,460
Nós temos R. G. B então.

189
00:14:49,460 --> 00:14:50,900
RG B. A onde o A significa Alpha

190
00:14:50,900 --> 00:14:53,960