1
00:00:01,050 --> 00:00:01,500
DE ACUERDO.

2
00:00:01,740 --> 00:00:06,600
Entonces en esta lección vamos a discutir muchas de las diferentes formas de describir y

3
00:00:06,750 --> 00:00:14,040
representar colores en C Ss y hasta ahora si vamos a la evaluación que hemos estado escribiendo. Acabamos de utilizar colores simples

4
00:00:14,040 --> 00:00:20,520
de la escuela primaria. como el rojo, el verde y el morado, y obviamente esos funcionan bien, pero no

5
00:00:20,520 --> 00:00:22,880
son tonos particularmente bonitos ni bonitos colores.

6
00:00:22,890 --> 00:00:28,440
En mi opinión, es probable que nunca los uses porque la mayoría de los diseñadores y la mayoría de las personas que crean

7
00:00:28,770 --> 00:00:30,900
sitios web tienen una paleta de colores muy específica.

8
00:00:31,320 --> 00:00:36,210
de la marca como un tono verde muy específico para una marca o si se trata de una paleta de colores.

9
00:00:36,210 --> 00:00:39,070
Si se trata de algo que usted sabe está siguiendo el color

10
00:00:39,250 --> 00:00:45,300
Soy un diseñador o alguien ha creado casi nadie usa solo el rojo, verde o morado predeterminado.

11
00:00:47,130 --> 00:00:52,670
Dicho esto, hay bastantes colores incorporados y CSSA que tienen nombres.

12
00:00:52,980 --> 00:00:55,380
Y de hecho, probablemente haya más de lo que piensas.

13
00:00:55,500 --> 00:00:59,370
Y hay mucho más que la mayoría de la gente recuerda.

14
00:00:59,370 --> 00:01:06,710
Así que hay cosas como el azul aciano o la orquídea oscura y creo que hay 147 colores diferentes.

15
00:01:06,870 --> 00:01:10,530
Y este sitio aquí que realmente nunca he usado.

16
00:01:10,540 --> 00:01:15,350
Solo quiero mostrárselo, es una forma de visualizar todos los diferentes colores nombrados y ver evaluar.

17
00:01:16,080 --> 00:01:22,980
Y, por supuesto, el problema con el uso de estos sigue siendo que solo tiene 147 colores y es posible que desee un

18
00:01:22,980 --> 00:01:29,070
color que le guste este color dorado pero ligeramente más claro o ligeramente más oscuro o ligeramente más rojo y no

19
00:01:29,070 --> 00:01:31,500
va a ser una opción perfecta para usted.

20
00:01:31,500 --> 00:01:36,310
Y luego el otro problema es que es difícil recordar estos nombres como gris pizarra claro.

21
00:01:36,360 --> 00:01:37,750
Nadie recuerda eso.

22
00:01:37,770 --> 00:01:44,910
Así que realmente solo uso colores con nombre como rojo naranja púrpura solo para depuración muy rápida para asegurarme de

23
00:01:44,910 --> 00:01:45,940
que algo funciona.

24
00:01:45,960 --> 00:01:48,410
Voy a ponerlo rojo y ver si funciona.

25
00:01:48,540 --> 00:01:54,080
Y también solo con fines educativos, pero la mayoría de la gente nunca usaría estos colores.

26
00:01:54,730 --> 00:01:58,940
Entonces, CSS proporciona algunos sistemas de color diferentes con los que podemos trabajar.

27
00:01:59,280 --> 00:02:03,410
Y estos son sistemas de color por cierto que existen fuera de las SS.

28
00:02:03,540 --> 00:02:10,320
Por lo tanto, si está familiarizado con la fotografía o la impresión y ha trabajado con colores antes, es posible que

29
00:02:10,320 --> 00:02:11,790
haya encontrado algunos de estos.

30
00:02:12,120 --> 00:02:17,700
Entonces, el primero es algo llamado hexadecimal y antes de hablar sobre por qué se llama

31
00:02:17,910 --> 00:02:21,970
hexadecimal y qué significa eso, echemos un vistazo a algunos ejemplos.

32
00:02:21,990 --> 00:02:28,650
Así que aquí lo primero que estamos haciendo es seleccionar todo H-1 y cambiar el color de texto para que sea negro.

33
00:02:30,030 --> 00:02:34,860
Lo siguiente que estamos haciendo es seleccionar todos los tatuajes cambiando el color para que sea de

34
00:02:34,860 --> 00:02:39,550
un tono púrpura y luego seleccionar tres en tres y enseñarles a ser de un tono rosado.

35
00:02:39,600 --> 00:02:46,150
Entonces, lo que notarán es que en lugar de tener una palabra como rojo o morado ahora tenemos este

36
00:02:46,220 --> 00:02:50,710
símbolo hash y técnicamente se llama Thorpe de octava seguido por seis dígitos.

37
00:02:51,270 --> 00:02:56,100
Entonces para obtener negro son seis ceros para obtener morado.

38
00:02:56,160 --> 00:02:59,690
Notarás que son los números, pero también hay una letra B allí.

39
00:02:59,940 --> 00:03:07,000
Y, por último, para obtener este color rosado, esta vez números y letras esta vez letra F. Entonces, ¿qué está pasando aquí?

40
00:03:07,020 --> 00:03:09,200
Voy a seguir adelante y abrir algunas notas que tengo.

41
00:03:09,390 --> 00:03:12,300
Y vamos a hacer una clase de matemáticas realmente corta, esto

42
00:03:12,630 --> 00:03:18,120
es más solo por algo que creo que es interesante, pero también es informativo y ayudará a entender cómo funciona el hexadecimal.

43
00:03:18,120 --> 00:03:23,620
Así que si vuelves a la escuela secundaria cuando estaba en la escuela, al menos hablamos mucho

44
00:03:23,640 --> 00:03:28,410
sobre el sistema decimal y cómo suponemos que quería crear un número de tres dígitos.

45
00:03:28,890 --> 00:03:35,080
Tenemos nuestra una vez lugar el décimo lugar en el lugar de las centenas.

46
00:03:35,310 --> 00:03:39,660
Entonces, si quisiera un número, el número de tres dígitos más grande que puedo crear

47
00:03:39,690 --> 00:03:45,660
es novecientos noventa y nueve, el número más pequeño de tres dígitos es técnicamente 111 o 0 0 o 1.

48
00:03:45,660 --> 00:03:52,710
10 sistema decimal, tengo 10 opciones para cada ranura que puedo hacer de 0 a 9.

49
00:03:53,190 --> 00:04:01,500
Pero la idea es que cada lugar en nuestra base regular 10, que es lo que esto significa, base

50
00:04:01,500 --> 00:04:07,560
Así que esa es la base 10, eso es a lo que estamos acostumbrados a trabajar con nuestros dígitos: 0 1 2 3 4 5 6 7 8 9.

51
00:04:07,980 --> 00:04:14,950
Pero hay otros sistemas numéricos.

52
00:04:15,390 --> 00:04:17,630
Así que es posible que haya oído hablar de binarios antes y que se basa dos.

53
00:04:17,790 --> 00:04:21,940
Y eso significa que solo tenemos 0 y 1 como opciones.

54
00:04:21,960 --> 00:04:25,360
Entonces, si quería construir un número binario de tres dígitos, el más grande que puedo construir es 1 1 1.

55
00:04:25,770 --> 00:04:32,690
Eso no es lo mismo que ciento once.

56
00:04:32,700 --> 00:04:35,560
cómo se ve el hacking y están totalmente equivocados.

57
00:04:35,580 --> 00:04:42,350
Así que este no es realmente el momento de repasar realmente cómo funciona el binario, pero puedes ver cosas como esta

58
00:04:42,370 --> 00:04:46,960
en shows CSI similares o en cualquier tipo de show en el que intenten mostrarte

59
00:04:46,960 --> 00:04:48,310
Pero es cierto que el binario es una parte muy importante de cómo funcionan las computadoras.

60
00:04:48,490 --> 00:04:53,230
Así que eso está basado también.

61
00:04:53,470 --> 00:04:54,850
Entonces solo tenemos dos opciones cero o uno.

62
00:04:54,910 --> 00:04:57,030
Entonces hexadecimal es base 16.

63
00:04:57,370 --> 00:04:59,850
Entonces eso significa que tenemos 16 elecciones

64
00:05:00,340 --> 00:05:07,300
y esas opciones van de cero a nueve y luego, en lugar de ir a 10 11 12 13 14 15.

65
00:05:07,300 --> 00:05:10,480
Esos son números de dos dígitos, números de dos dígitos, que es un problema X más y que incluye letras.

66
00:05:10,810 --> 00:05:17,380
Entonces tenemos 0 a 9 y luego ABC DCF.

67
00:05:17,380 --> 00:05:22,070
Entonces, el número hexadecimal más grande de tres dígitos sería F F F y el más pequeño 0 0 0.

68
00:05:22,270 --> 00:05:33,090
Entonces es como cualquier otro sistema numérico, excepto que tenemos 16 opciones.

69
00:05:33,910 --> 00:05:37,500
Y la razón por la que se usa hexadecimal en lugar de

70
00:05:37,690 --> 00:05:45,520
usar sólo decimal para nombrar un color es que nos da muchas más opciones a la vez que conservamos los nombres de los recolors relativamente cortos.

71
00:05:45,520 --> 00:05:50,610
Así que, básicamente, tiene hexadecimal es simplemente tomar colores y darles nombres numéricos.

72
00:05:50,920 --> 00:05:55,370
Y si usamos la base 10, solo tenemos 10 opciones por dígito.

73
00:05:55,390 --> 00:05:59,200
Entonces, necesitamos usar más dígitos si usamos binarios y tendremos que usar una tonelada de dígitos para representar los colores.

74
00:05:59,200 --> 00:06:05,410
Cientos y cientos de miles de dígitos.

75
00:06:05,770 --> 00:06:07,870
Así que los números hexadecimales son seis dígitos de inicio largo que Octa Thorpe.

76
00:06:07,930 --> 00:06:12,820
Y luego un dígito dos tres cuatro cinco seis.

77
00:06:13,030 --> 00:06:18,590
Y la forma en que funciona no es solo números aleatorios.

78
00:06:18,730 --> 00:06:22,010
De hecho, hay un poco de un sistema.

79
00:06:22,240 --> 00:06:24,590
Entonces, los primeros dos números corresponden a la cantidad

80
00:06:24,640 --> 00:06:31,600
de rojo en el color, el siguiente para corresponder a la cantidad de verde y en los dos últimos corresponde a la cantidad de azul en el color.

81
00:06:31,600 --> 00:06:36,220
Así que voy a seguir adelante y cambiar a nuestro ver evaluar y mostrar lo que quiero decir.

82
00:06:36,760 --> 00:06:40,300
Así que trabajemos con nuestro H-1 aquí.

83
00:06:40,810 --> 00:06:43,510
Tenemos tres H y debemos diseñarlos.

84
00:06:43,600 --> 00:06:46,880
Entonces, para usar hexadecimal todo lo que hacemos es reducir gradualmente a Octa Thorpe y luego a seis dígitos.

85
00:06:47,050 --> 00:06:51,790
Comencemos definiendo un color rojo y recordemos que los dos primeros son rojos.

86
00:06:52,180 --> 00:06:58,090
Entonces nuestros primeros dos dígitos si quisiéramos el rojo completo serían f f porque ese es el número más alto.

87
00:06:58,090 --> 00:07:04,370
Y luego todo lo demás puede ser cero.

88
00:07:04,990 --> 00:07:07,630
Así que esto se va a volver rojo hasta el final.

89
00:07:07,630 --> 00:07:10,370
No verde y no azul.

90
00:07:10,660 --> 00:07:12,050
Y si hacemos eso

91
00:07:12,280 --> 00:07:13,270
Avancemos y abramos nuestro archivo, verá que son h rojo brillante.

92
00:07:13,570 --> 00:07:19,810
Así que regresemos y juguemos un poco con esto y ahora presentemos un poco de verde.

93
00:07:19,870 --> 00:07:26,400
Así que démosle ocho y verá que obtenemos esta naranja

94
00:07:26,860 --> 00:07:35,030
leve y usted se estará preguntando cómo es el naranja rojo y verde.

95
00:07:35,260 --> 00:07:36,280
Y la respuesta es

96
00:07:36,520 --> 00:07:42,700
que este no es el mismo sistema de color en el que solía mezclar pinturas, por ejemplo, RG B funciona de forma ligeramente diferente.

97
00:07:43,930 --> 00:07:46,000
Y de nuevo, eso es algo para otro video.

98
00:07:46,150 --> 00:07:48,190
Pero, en esencia, si sumamos rojo,

99
00:07:48,220 --> 00:07:57,820
verde y azul hasta el fondo, de modo que el rojo completo, el verde y el azul, el color resultante no sea como el marrón o el negro, como cabría esperar.

100
00:07:59,530 --> 00:08:03,160
En realidad es blanco y así es como funciona la luz en el mundo real.

101
00:08:03,160 --> 00:08:07,350
Si puede tomar para dejar las luces o tres luces

102
00:08:07,420 --> 00:08:12,430
de LCD de un rojo verde y azul y combinarlos y brillar juntos.

103
00:08:12,430 --> 00:08:13,740
En realidad obtendrías luz blanca.

104
00:08:13,810 --> 00:08:15,560
Así es como funciona este color.

105
00:08:15,790 --> 00:08:17,690
DE ACUERDO.

106
00:08:18,060 --> 00:08:18,310
Por lo tanto, la mayoría de las veces, en realidad no se te ocurrirán estos colores desde cero.

107
00:08:18,310 --> 00:08:23,380
Entonces no es realmente

108
00:08:23,380 --> 00:08:24,410
Me refiero a que

109
00:08:24,520 --> 00:08:29,890
es una buena habilidad, pero no tiene que ser capaz de identificar este color como una especie de sombra de púrpura o

110
00:08:33,370 --> 00:08:38,980
verde o lo que sea que no sea realmente el alcance lo que más a menudo hará es tener un selector de color .

111
00:08:38,980 --> 00:08:42,750
Y digamos que quiero un tono púrpura oscuro.

112
00:08:43,350 --> 00:08:46,670
Hay todo tipo de imágenes en color.

113
00:08:46,750 --> 00:08:48,160
Hay algunos que están en su máquina, dependiendo de si tiene una Mac o PC, puede descargar una.

114
00:08:48,190 --> 00:08:53,110
Algunos de ellos están incluidos, pero también podemos ir en

115
00:08:53,110 --> 00:08:59,770
línea y si quiero un tono púrpura oscuro puedo encontrar este color púrpura.

116
00:08:59,770 --> 00:09:01,400
Digamos este color

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

118
00:09:06,220 --> 00:09:07,300
Y luego solo puedo copiar.

119
00:09:07,840 --> 00:09:10,160
Creo que eso lo copió

120
00:09:10,230 --> 00:09:12,080
No, solo copia.

121
00:09:12,140 --> 00:09:14,050
Ahí está este color y

122
00:09:14,160 --> 00:09:17,950
uso que se actualiza y obtenemos un color púrpura oscuro.

123
00:09:21,320 --> 00:09:24,900
Entonces, con mayor frecuencia lo que harás, tendrás un selector de color.

124
00:09:24,980 --> 00:09:28,090
Inicialmente elegirás tus colores y luego solo volverás a consultarlos.

125
00:09:28,340 --> 00:09:32,390
Por lo tanto, no es el más intuitivo.

126
00:09:32,390 --> 00:09:33,870
Es más agradable si dice algo así como berenjena oscura, pero luego, por supuesto, eso no va a ser tan preciso.

127
00:09:34,010 --> 00:09:42,770
Eso es solo un tono de color morado oscuro.

128
00:09:42,920 --> 00:09:44,540
Y si quiero cambiarlo, no tengo suerte.

129
00:09:44,540 --> 00:09:47,070
Entonces eso es hexadecimal

130
00:09:47,120 --> 00:09:50,420
El siguiente sistema de color del que vamos a hablar es R. GRAMO. b por lo que RGV funciona de manera muy similar,

131
00:09:50,420 --> 00:09:57,410
excepto que la sintaxis es ligeramente diferente.

132
00:09:57,410 --> 00:09:58,910
Entonces R. GRAMO. B hay tres canales como con hexadecimal.

133
00:09:58,910 --> 00:10:02,600
Hay rojo verde y azul.

134
00:10:02,630 --> 00:10:04,620
Y lo que es diferente es que RGV todavía está en la base 10.

135
00:10:05,120 --> 00:10:08,380
Entonces, ¿qué hacemos? Tenemos tres canales diferentes

136
00:10:08,810 --> 00:10:17,540
rojo verde azul y la sintaxis es color dos puntos y luego la palabra son las letras R. GRAMO. el valor de nuestro leer el valor de nuestro verde y el valor de nuestro azul.

137
00:10:17,600 --> 00:10:24,110
B paréntesis y luego

138
00:10:24,110 --> 00:10:25,360
Y esos van desde cero hasta 255.

139
00:10:25,640 --> 00:10:29,340
Entonces, en este caso, estamos diciendo que todas las edades son R. GRAMO. estar donde el rojo es cero verde es todo

140
00:10:29,900 --> 00:10:39,350
el camino hacia arriba en azul es cero.

141
00:10:39,350 --> 00:10:40,170
Y obtenemos este verde brillante y este que estamos configurando todas las edades son R. GRAMO. estar donde

142
00:10:40,670 --> 00:10:49,070
Red está a mitad de camino.

143
00:10:49,070 --> 00:10:50,150
El verde se ha ido por completo.

144
00:10:50,300 --> 00:10:52,100
verde y aún menos rojo, y obtenemos este tono de azul.

145
00:10:52,340 --> 00:10:57,920
Y Blue está a la mitad del camino y obtenemos un bonito color violeta, y luego, este es el que establecemos para los mayores de tres años que sean principalmente azules con un poco de

146
00:10:58,370 --> 00:11:04,140
Entonces, hagamos algunos ejemplos.

147
00:11:04,700 --> 00:11:07,420
Vamos a hacer un púrpura de nuevo.

148
00:11:08,960 --> 00:11:13,720
Así que simplemente enviamos un mensaje de texto con la palabra nuestro paréntesis G-B y luego necesitamos nuestros canales.

149
00:11:13,820 --> 00:11:19,480
Entonces, el primero, si queremos un morado o queremos un poco de rojo, hagamos 60.

150
00:11:19,640 --> 00:11:27,180
No sé 68 rojo.

151
00:11:27,200 --> 00:11:28,800
Cero verde y esto

152
00:11:29,360 --> 00:11:37,580
será azul o púrpura en lugar de rojo o púrpura, así que haremos un centenar de azul y lo guardaremos.

153
00:11:37,580 --> 00:11:39,840
Y, por supuesto, no parece un gran cambio, pero cambió un poco.

154
00:11:41,660 --> 00:11:45,560
Así que sigamos adelante y ahora suba la lectura un poco 240 y se puede ver que obtenemos un color púrpura rosado.

155
00:11:45,560 --> 00:11:53,920
Y si introduzco algo de verde y si enciendo todo al máximo, como antes, con hexadecimal completo, rojo, verde

156
00:11:54,500 --> 00:11:55,820
y azul nos

157
00:11:59,800 --> 00:12:01,700
da blanco y negro.

158
00:12:05,930 --> 00:12:13,900
Quieres cero para los tres canales.

159
00:12:13,900 --> 00:12:18,080
Entonces nuestro B es muy similar al decimal.

160
00:12:18,080 --> 00:12:20,690
La única diferencia es la sintaxis.

161
00:12:20,750 --> 00:12:22,660
Entonces, en lugar de escribir

162
00:12:22,940 --> 00:12:34,660
algo como esto, tenemos dos canales o dos dígitos para rojo para verde y dos para azul, en cambio tenemos tres ranuras y pasamos de cero a 255.

163
00:12:34,670 --> 00:12:43,040
Así que solo otra sintaxis y otra sintaxis de las que quiero hablar es nuestro GPA.

164
00:12:43,040 --> 00:12:49,880
Entonces R-GA funciona igual que R. GRAMO. B, excepto que hay un pequeño giro que es que hay un cuarto canal llamado Alpha que es cómo puedes

165
00:12:50,270 --> 00:12:56,150
hacer que los colores sean transparentes.

166
00:12:56,210 --> 00:12:59,100
Entonces R. GRAMO. V-A es ideal si desea tener un color que esté haciendo más o menos transparente.

167
00:12:59,270 --> 00:13:05,950
Entonces, la forma en que funciona es la misma sintaxis exacta, excepto que escribimos R. GRAMO. ser un y luego tenemos cuatro

168
00:13:06,230 --> 00:13:12,410
canales que tenemos que completar.

169
00:13:12,410 --> 00:13:13,830
Y los primeros tres al igual que antes.

170
00:13:14,150 --> 00:13:16,560
Van desde cero hasta 255, pero el último canto en el canal alfa va de cero a 1.

171
00:13:16,580 --> 00:13:23,900
Así que les daré algunos ejemplos aquí.

172
00:13:24,470 --> 00:13:26,370
Aquí estamos configurando los tres para que tengan exactamente el mismo color en lo que respecta a los canales RG y B.

173
00:13:26,540 --> 00:13:33,650
Entonces 11 rojo.

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

175
00:13:35,170 --> 00:13:37,850
Y luego, el cuarto canal estamos cambiando el alfa o cambiando la transparencia.

176
00:13:38,480 --> 00:13:42,840
Así que con cuatro Alpha con todo, todo sin transparencia.

177
00:13:42,860 --> 00:13:47,950
Terminamos con esta gripe.

178
00:13:48,050 --> 00:13:49,810
Cuando dijimos que Alpha era el punto seis, obtenemos este azul mucho más claro y transparente.

179
00:13:50,480 --> 00:13:56,340
Y luego lo configuramos para que sea el Punto Dos, obtenemos esto que apenas está allí.

180
00:13:56,690 --> 00:14:01,640
Así que hagamos otro ejemplo, hagamos Archie B-A y esta vez hagamos un verde.

181
00:14:01,880 --> 00:14:09,300
Así que aproximadamente 200 verdes y un poco de azul y luego necesitamos nuestro alfa y comencemos con uno.

182
00:14:09,440 --> 00:14:17,420
Actualiza la página y obtenemos este verde.

183
00:14:18,860 --> 00:14:23,080
Entonces, hagamos lo mismo, pero hagamos que sea un poco más pálido. Hagamos el punto ocho.

184
00:14:23,180 --> 00:14:30,830
Voy a actualizar y puedes ver que se puso un poco más pálido.

185
00:14:30,960 --> 00:14:34,330
Ahora seamos más drásticos 2. 2 y puede ver que se vuelve mucho más transparente.

186
00:14:34,460 --> 00:14:41,810
Entonces, para resumir tenemos los colores integrados que la mayoría de la gente no usa.

187
00:14:42,920 --> 00:14:47,480
Tenemos hexadecimal

188
00:14:47,690 --> 00:14:49,460
Tenemos R. GRAMO. B entonces.

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

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