1
00:00:01,050 --> 00:00:01,500
OK.

2
00:00:01,740 --> 00:00:06,600
Quindi in questa lezione discuteremo molti dei diversi modi di descrivere e rappresentare i colori

3
00:00:06,750 --> 00:00:14,040
in C S e fino ad ora se andiamo a valutare che abbiamo scritto Abbiamo appena usato i colori elementari della scuola

4
00:00:14,040 --> 00:00:20,520
elementare come il rosso, il verde e il viola e ovviamente quelli funzionano bene, ma non sono particolarmente belli per

5
00:00:20,520 --> 00:00:22,880
le sfumature, non per i bei colori.

6
00:00:22,890 --> 00:00:28,440
Secondo me, probabilmente non li useresti mai perché la maggior parte dei designer e la maggior parte delle persone che creano siti

7
00:00:28,770 --> 00:00:30,900
web hanno una tavolozza di colori molto specifica.

8
00:00:31,320 --> 00:00:36,210
una tonalità di verde molto specifica per un marchio o se si tratta di una tavolozza di colori.

9
00:00:36,210 --> 00:00:39,070
Se è qualcosa che sai seguire il colore del marchio come

10
00:00:39,250 --> 00:00:45,300
Sono un designer o qualcuno ha creato quasi nessuno usa solo il semplice default rosso o verde o viola.

11
00:00:47,130 --> 00:00:52,670
Detto questo, ci sono alcuni colori incorporati e CSSA che hanno nomi.

12
00:00:52,980 --> 00:00:55,380
E infatti c'è probabilmente più di quanto penseresti.

13
00:00:55,500 --> 00:00:59,370
E c'è molto più di quanto la maggior parte della gente ricordi.

14
00:00:59,370 --> 00:01:06,710
Quindi ci sono cose come il fiordaliso o l'orchidea scura e credo ci siano 147 colori diversi.

15
00:01:06,870 --> 00:01:10,530
E questo sito qui che in realtà non ho mai usato.

16
00:01:10,540 --> 00:01:15,350
Voglio solo mostrartelo è un modo per visualizzare tutti i diversi colori con nome e vedere valutare.

17
00:01:16,080 --> 00:01:22,980
E ovviamente il problema con l'utilizzo di questi è ancora solo 147 colori e potresti desiderare un colore che assomiglia

18
00:01:22,980 --> 00:01:29,070
a questo colore dorato ma leggermente più chiaro o leggermente più scuro o leggermente più rosso e

19
00:01:29,070 --> 00:01:31,500
non ci sarà un'opzione perfetta per te.

20
00:01:31,500 --> 00:01:36,310
E poi l'altro problema è che è difficile ricordare questi nomi come il grigio chiaro dell'ardesia.

21
00:01:36,360 --> 00:01:37,750
Nessuno se lo ricorda.

22
00:01:37,770 --> 00:01:44,910
Quindi uso solo i colori nominati come il rosso arancio viola solo per scopi di debug molto rapidi per assicurarsi

23
00:01:44,910 --> 00:01:45,940
che qualcosa funzioni.

24
00:01:45,960 --> 00:01:48,410
Lo trasformerò in rosso e vedrò se funziona.

25
00:01:48,540 --> 00:01:54,080
E anche solo per scopi didattici, ma la maggior parte delle persone non userebbe mai questi colori.

26
00:01:54,730 --> 00:01:58,940
Quindi i CSS forniscono alcuni sistemi di colori diversi con i quali possiamo lavorare.

27
00:01:59,280 --> 00:02:03,410
E questi sono i sistemi di colore dal modo in cui esistono al di fuori della SS.

28
00:02:03,540 --> 00:02:10,320
Quindi, se hai una certa familiarità con la fotografia o la stampa e hai lavorato con i colori prima che tu possa

29
00:02:10,320 --> 00:02:11,790
aver incontrato alcuni di questi.

30
00:02:12,120 --> 00:02:17,700
Quindi il primo è qualcosa chiamato esadecimale e prima di parlare del perché si

31
00:02:17,910 --> 00:02:21,970
chiama esadecimale e cosa significa dare un'occhiata ad alcuni esempi.

32
00:02:21,990 --> 00:02:28,650
Quindi qui la prima cosa che stiamo facendo è selezionare tutto l'H-1 e cambiare il colore del testo in nero.

33
00:02:30,030 --> 00:02:34,860
La prossima cosa che stiamo facendo è selezionare tutti i tatuaggi che cambiano il colore per diventare una sfumatura

34
00:02:34,860 --> 00:02:39,550
di viola e quindi selezionare tutti i tre di età e insegnare loro ad essere una tonalità di rosa.

35
00:02:39,600 --> 00:02:46,150
Quindi quello che noterai è che piuttosto che avere una parola come rosso o viola Ora abbiamo questo

36
00:02:46,220 --> 00:02:50,710
simbolo di hash ed è tecnicamente chiamato un'ottava Thorpe seguito da sei cifre.

37
00:02:51,270 --> 00:02:56,100
Quindi per diventare neri sono sei zeri per diventare viola.

38
00:02:56,160 --> 00:02:59,690
Noterai che sono numeri ma c'è anche una lettera B lì dentro.

39
00:02:59,940 --> 00:03:07,000
E infine per ottenere questo colore rosato è di nuovo numeri e lettere questa volta la lettera F. Quindi cosa sta succedendo qui.

40
00:03:07,020 --> 00:03:09,200
Ho intenzione di andare avanti e aprire alcuni appunti che ho.

41
00:03:09,390 --> 00:03:12,300
E faremo una lezione di matematica davvero breve, è

42
00:03:12,630 --> 00:03:18,120
più solo per qualcosa che penso sia interessante ma anche informativo e aiuterà a capire come funziona l'esadecimale.

43
00:03:18,120 --> 00:03:23,620
Quindi, se tornassi alla scuola media quando ero a scuola, almeno abbiamo parlato molto del sistema

44
00:03:23,640 --> 00:03:28,410
decimale e di come supponiamo di voler creare un numero a tre cifre.

45
00:03:28,890 --> 00:03:35,080
Abbiamo il nostro posto una volta al decimo posto nel posto delle centinaia.

46
00:03:35,310 --> 00:03:39,660
Quindi, se volessi un numero, il numero più grande di tre cifre che

47
00:03:39,690 --> 00:03:45,660
posso creare è novecentonovantanove il più piccolo numero di tre cifre tecnicamente è 111 o 0 0 o 1.

48
00:03:45,660 --> 00:03:52,710
numeri decimali base 10 ho 10 scelte per ogni slot che posso fare da 0 a 9.

49
00:03:53,190 --> 00:04:01,500
Ma l'idea è che ogni posto nella nostra base regolare 10 che è ciò che questo significa sistema di

50
00:04:01,500 --> 00:04:07,560
Quindi questa è la base 10 che è quello a cui siamo abituati a lavorare con le nostre cifre: 0 1 2 3 4 5 6 7 8 9.

51
00:04:07,980 --> 00:04:14,950
Ma ci sono altri sistemi numerici.

52
00:04:15,390 --> 00:04:17,630
Quindi potresti aver sentito parlare di binari prima e questo è basato su due.

53
00:04:17,790 --> 00:04:21,940
E questo significa che abbiamo solo 0 e 1 come opzioni.

54
00:04:21,960 --> 00:04:25,360
Quindi, se volessi creare un numero binario a tre cifre, il più grande che posso costruire è 1 1 1.

55
00:04:25,770 --> 00:04:32,690
Non è lo stesso di centoundici.

56
00:04:32,700 --> 00:04:35,560
che aspetto ha l'hacking e sono totalmente sbagliati.

57
00:04:35,580 --> 00:04:42,350
Quindi questo non è il momento giusto per capire come funziona il binario ma puoi vedere cose come questa in

58
00:04:42,370 --> 00:04:46,960
CSI o in qualsiasi tipo di show in cui stanno cercando di mostrarti

59
00:04:46,960 --> 00:04:48,310
Ma è vero che il binario è una parte davvero molto importante di come funzionano i computer.

60
00:04:48,490 --> 00:04:53,230
Anche questo è basato.

61
00:04:53,470 --> 00:04:54,850
Quindi abbiamo solo due scelte zero o uno.

62
00:04:54,910 --> 00:04:57,030
Quindi esadecimale è la base 16.

63
00:04:57,370 --> 00:04:59,850
Ciò significa che abbiamo 16 scelte e

64
00:05:00,340 --> 00:05:07,300
quelle scelte vanno da zero a nove e poi piuttosto che andare a 10 11 12 13 14 15.

65
00:05:07,300 --> 00:05:10,480
Quelli sono numeri a due cifre di due cifre, il che è problematico di più X e include lettere.

66
00:05:10,810 --> 00:05:17,380
Quindi abbiamo 0 a 9 e poi ABC DCF.

67
00:05:17,380 --> 00:05:22,070
Quindi il numero esadecimale più grande di tre cifre sarebbe F F F e il più piccolo 0 0 0.

68
00:05:22,270 --> 00:05:33,090
Quindi è come qualsiasi altro sistema numerico tranne che abbiamo 16 scelte.

69
00:05:33,910 --> 00:05:37,500
E la ragione per cui l'esadecimale è usato piuttosto che

70
00:05:37,690 --> 00:05:45,520
usare solo i decimali per nominare un colore è che ci dà molte più scelte mantenendo i nomi dei recolors relativamente brevi.

71
00:05:45,520 --> 00:05:50,610
Quindi, in pratica, l'esadecimale sta semplicemente prendendo i colori e dando loro dei nomi numerici.

72
00:05:50,920 --> 00:05:55,370
E se usiamo la base 10 abbiamo solo 10 scelte per cifra.

73
00:05:55,390 --> 00:05:59,200
Quindi abbiamo bisogno di usare più cifre se usiamo il binario e avremmo bisogno di usare un numero di cifre per rappresentare i colori.

74
00:05:59,200 --> 00:06:05,410
Centinaia e centinaia di migliaia di cifre.

75
00:06:05,770 --> 00:06:07,870
Quindi i numeri esadecimali sono sei cifre dall'inizio lungo rispetto a Octa Thorpe.

76
00:06:07,930 --> 00:06:12,820
E poi una cifra due tre quattro cinque sei.

77
00:06:13,030 --> 00:06:18,590
E il modo in cui funziona non è solo numeri casuali.

78
00:06:18,730 --> 00:06:22,010
C'è in realtà un po 'di un sistema.

79
00:06:22,240 --> 00:06:24,590
Quindi i primi due numeri corrispondono a quanto

80
00:06:24,640 --> 00:06:31,600
il rosso è nel colore il prossimo a corrispondere a quanto verde e negli ultimi due corrispondono a quanto blu è nel colore.

81
00:06:31,600 --> 00:06:36,220
Quindi andrò avanti e passerò alla nostra sede per valutare e mostrarti cosa intendo.

82
00:06:36,760 --> 00:06:40,300
Quindi lavoriamo con il nostro H-1 qui.

83
00:06:40,810 --> 00:06:43,510
Abbiamo tre H e dobbiamo modellarli.

84
00:06:43,600 --> 00:06:46,880
Quindi per usare l'esadecimale tutto ciò che facciamo è rastremare Octa Thorpe e quindi sei cifre.

85
00:06:47,050 --> 00:06:51,790
Quindi iniziamo definendo un colore rosso e ricordiamo che i primi due sono rossi.

86
00:06:52,180 --> 00:06:58,090
Quindi le nostre prime due cifre se volessimo il rosso completo sarebbe f f perché questo è il numero più alto.

87
00:06:58,090 --> 00:07:04,370
E poi tutto il resto può essere zero.

88
00:07:04,990 --> 00:07:07,630
Quindi questo salverà fino al rosso.

89
00:07:07,630 --> 00:07:10,370
Niente verde e niente blu.

90
00:07:10,660 --> 00:07:12,050
E se lo facciamo.

91
00:07:12,280 --> 00:07:13,270
Andiamo avanti e apriamo il nostro file e vedrai che quelli sono di colore rosso vivo.

92
00:07:13,570 --> 00:07:19,810
Quindi torniamo indietro e giochiamo un po 'con questo e ora introduciamo un po' di verde.

93
00:07:19,870 --> 00:07:26,400
Quindi diamo otto e vedrai che otteniamo questo

94
00:07:26,860 --> 00:07:35,030
leggero arancione e ti starai chiedendo come sia verde arancione rosso.

95
00:07:35,260 --> 00:07:36,280
E la risposta è

96
00:07:36,520 --> 00:07:42,700
che questo non è lo stesso sistema di colori che sei abituato a mescolare le pitture, per esempio RG B funziona in modo leggermente diverso.

97
00:07:43,930 --> 00:07:46,000
E ancora questo è qualcosa per un altro video.

98
00:07:46,150 --> 00:07:48,190
Ma essenzialmente se sommiamo il rosso

99
00:07:48,220 --> 00:07:57,820
verde e il blu fino in fondo, così pieno rosso pieno verde e pieno blu il colore risultante non è come un marrone o nero come ci si potrebbe aspettare.

100
00:07:59,530 --> 00:08:03,160
In realtà è bianco e questo è in realtà il modo in cui la luce funziona nel mondo reale.

101
00:08:03,160 --> 00:08:07,350
Se potessi prendere per lasciare le luci o tre luci

102
00:08:07,420 --> 00:08:12,430
LCD un rosso verde e blu e combinarle e farle brillare insieme.

103
00:08:12,430 --> 00:08:13,740
Avresti effettivamente una luce bianca.

104
00:08:13,810 --> 00:08:15,560
Ecco come funziona questo colore.

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

106
00:08:18,060 --> 00:08:18,310
Quindi la maggior parte delle volte in realtà non ti viene in mente questi colori da zero.

107
00:08:18,310 --> 00:08:23,380
Quindi non è davvero.

108
00:08:23,380 --> 00:08:24,410
Voglio dire, è una

109
00:08:24,520 --> 00:08:29,890
bella abilità, ma non devi essere in grado di identificare questo colore come una sorta di sfumatura di viola o verde

110
00:08:33,370 --> 00:08:38,980
o qualsiasi altra cosa che non è proprio lo scopo che più spesso farai è avere un selettore di colori .

111
00:08:38,980 --> 00:08:42,750
E quindi diciamo che voglio un'ombra color porpora scuro.

112
00:08:43,350 --> 00:08:46,670
Esistono tutti i tipi di immagini a colori.

113
00:08:46,750 --> 00:08:48,160
Ce ne sono alcuni sulla tua macchina, a seconda che tu abbia un Mac o un PC, puoi scaricarne uno.

114
00:08:48,190 --> 00:08:53,110
Alcuni di questi sono inclusi, ma possiamo anche andare

115
00:08:53,110 --> 00:08:59,770
online e, se voglio un colore viola scuro, riesco a trovare questo viola.

116
00:08:59,770 --> 00:09:01,400
Diciamo questo colore

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

118
00:09:06,220 --> 00:09:07,300
E poi posso solo copiare.

119
00:09:07,840 --> 00:09:10,160
Penso che l'abbia copiato.

120
00:09:10,230 --> 00:09:12,080
No, basta copiare.

121
00:09:12,140 --> 00:09:14,050
Lì è questo colore e

122
00:09:14,160 --> 00:09:17,950
lo uso che rinfresca e otteniamo un viola scuro.

123
00:09:21,320 --> 00:09:24,900
Quindi questo è più spesso quello che farai avrai un selezionatore di colori.

124
00:09:24,980 --> 00:09:28,090
Inizialmente sceglierai i tuoi colori e poi ti riferirai a loro.

125
00:09:28,340 --> 00:09:32,390
Quindi non è il più intuitivo.

126
00:09:32,390 --> 00:09:33,870
È più bello se dicesse qualcosa come melanzane scure, ma ovviamente non sarà così preciso.

127
00:09:34,010 --> 00:09:42,770
Questa è solo una sfumatura di viola scuro.

128
00:09:42,920 --> 00:09:44,540
E se voglio cambiarlo sono sfortunato.

129
00:09:44,540 --> 00:09:47,070
Quindi è esadecimale.

130
00:09:47,120 --> 00:09:50,420
Il prossimo sistema di colori di cui parleremo è R. G. b quindi RGV funziona in modo molto simile, tranne

131
00:09:50,420 --> 00:09:57,410
che la sintassi è leggermente diversa.

132
00:09:57,410 --> 00:09:58,910
Quindi R. G. B ci sono tre canali proprio come con esadecimale.

133
00:09:58,910 --> 00:10:02,600
C'è rosso verde e blu.

134
00:10:02,630 --> 00:10:04,620
E ciò che è diverso è che RGV è ancora nella base 10.

135
00:10:05,120 --> 00:10:08,380
Quindi quello che facciamo abbiamo tre canali

136
00:10:08,810 --> 00:10:17,540
diversi rosso verde blu e la sintassi è il colore due punti e quindi la parola sono le lettere R. G. il valore della nostra leggere il valore del nostro verde e il valore del nostro blu.

137
00:10:17,600 --> 00:10:24,110
B parentesi e quindi

138
00:10:24,110 --> 00:10:25,360
E quelli vanno da zero a 255.

139
00:10:25,640 --> 00:10:29,340
Quindi in questo caso stiamo dicendo che tutte le età sono R. G. essere dove Rosso è zero il verde

140
00:10:29,900 --> 00:10:39,350
è tutto in blu è zero.

141
00:10:39,350 --> 00:10:40,170
E otteniamo questo verde brillante e questo stiamo impostando tutti gli altri due per essere R. G. sii dove

142
00:10:40,670 --> 00:10:49,070
Red è a metà strada.

143
00:10:49,070 --> 00:10:50,150
Il verde è completamente sparito.

144
00:10:50,300 --> 00:10:52,100
e ancora meno rosso e otteniamo questa sfumatura di blu.

145
00:10:52,340 --> 00:10:57,920
E Blu è a circa metà altezza e otteniamo un bel viola e poi questo stiamo impostando tutti i tre anni per essere principalmente blu con un po 'di verde

146
00:10:58,370 --> 00:11:04,140
Quindi facciamo alcuni esempi.

147
00:11:04,700 --> 00:11:07,420
Andiamo a fare un viola di nuovo.

148
00:11:08,960 --> 00:11:13,720
Quindi scriviamo semplicemente la parola tra parentesi G-B e poi abbiamo bisogno dei nostri canali.

149
00:11:13,820 --> 00:11:19,480
Quindi il primo se vogliamo un viola o un po 'di rosso facciamo 60.

150
00:11:19,640 --> 00:11:27,180
Non conosco il 68 rosso.

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

152
00:11:29,360 --> 00:11:37,580
sarà un blu o viola allora che un rosso o un viola, quindi faremo un centinaio di blu e lo salveremo.

153
00:11:37,580 --> 00:11:39,840
E ovviamente non sembra un granché, ma è cambiato leggermente.

154
00:11:41,660 --> 00:11:45,560
Quindi andiamo avanti e ora alziamo la lettura di un bel 240 e potete vedere che otteniamo un viola rosato.

155
00:11:45,560 --> 00:11:53,920
E se introduco un po 'di verde e se faccio girare tutto fino in fondo come prima con il rosso esadecimale, il rosso e il

156
00:11:54,500 --> 00:11:55,820
blu ci danno effettivamente

157
00:11:59,800 --> 00:12:01,700
il bianco e diventano neri.

158
00:12:05,930 --> 00:12:13,900
Vuoi zero per tutti e tre i canali.

159
00:12:13,900 --> 00:12:18,080
Quindi la nostra B è molto simile al decimale.

160
00:12:18,080 --> 00:12:20,690
L'unica differenza è la sintassi.

161
00:12:20,750 --> 00:12:22,660
Quindi piuttosto che scrivere qualcosa

162
00:12:22,940 --> 00:12:34,660
di simile in cui abbiamo due canali o due cifre per il rosso per il verde e due per il blu invece abbiamo tre slot e passiamo da zero a 255.

163
00:12:34,670 --> 00:12:43,040
Quindi solo un'altra sintassi e un'altra sintassi di cui voglio parlare è il nostro GPA.

164
00:12:43,040 --> 00:12:49,880
Quindi R-GA funziona proprio come R. G. B eccetto che c'è una piccola svolta che è un quarto canale chiamato Alpha che è il modo in

165
00:12:50,270 --> 00:12:56,150
cui puoi rendere i colori trasparenti.

166
00:12:56,210 --> 00:12:59,100
Quindi R. G. V-A è ottimo se vuoi avere un colore che stai facendo più o meno trasparente.

167
00:12:59,270 --> 00:13:05,950
Quindi il modo in cui funziona è la stessa sintassi esatta tranne che scriviamo R. G. essere un e quindi abbiamo

168
00:13:06,230 --> 00:13:12,410
quattro canali che dobbiamo compilare.

169
00:13:12,410 --> 00:13:13,830
E i primi tre come prima.

170
00:13:14,150 --> 00:13:16,560
Esse vanno da zero a 255 ma l'ultimo canto sul canale alfa va da zero a 1.

171
00:13:16,580 --> 00:13:23,900
Quindi ti darò alcuni esempi qui.

172
00:13:24,470 --> 00:13:26,370
Qui impostiamo tutti e tre come lo stesso colore dei canali RG e B.

173
00:13:26,540 --> 00:13:33,650
Quindi 11 rosso.

174
00:13:33,920 --> 00:13:35,080
Novantanove 950 verdi blu.

175
00:13:35,170 --> 00:13:37,850
E poi il quarto canale stiamo cambiando l'alfa o cambiando la trasparenza.

176
00:13:38,480 --> 00:13:42,840
Quindi con quattro Alpha con tutto il tutto senza alcuna trasparenza.

177
00:13:42,860 --> 00:13:47,950
Finiamo con questa influenza.

178
00:13:48,050 --> 00:13:49,810
Quando dicemmo che Alpha era il sesto punto otteniamo questo blu molto più leggero e più trasparente.

179
00:13:50,480 --> 00:13:56,340
E poi lo impostiamo per essere punto due, otteniamo questo che è appena lì.

180
00:13:56,690 --> 00:14:01,640
Facciamo un altro esempio, facciamo Archie B-A e stavolta facciamo un green.

181
00:14:01,880 --> 00:14:09,300
Quindi circa 200 o più verde e un po 'di blu e quindi abbiamo bisogno del nostro alfa e cominciamo con uno solo.

182
00:14:09,440 --> 00:14:17,420
Aggiorna la pagina e otteniamo questo verde.

183
00:14:18,860 --> 00:14:23,080
Quindi ora facciamo la stessa cosa ma rendiamola leggermente più chiara. Facciamo il punto otto.

184
00:14:23,180 --> 00:14:30,830
Ho intenzione di aggiornare e puoi vedere che è diventato un po 'più pallido.

185
00:14:30,960 --> 00:14:34,330
Ora siamo più drastici 2. 2 e puoi vedere che diventa molto più trasparente.

186
00:14:34,460 --> 00:14:41,810
Quindi, per riassumere, abbiamo i colori incorporati che la maggior parte delle persone non usa.

187
00:14:42,920 --> 00:14:47,480
Abbiamo un esadecimale.

188
00:14:47,690 --> 00:14:49,460
Abbiamo R. G. B allora.

189
00:14:49,460 --> 00:14:50,900
RG B. A dove A sta per Alpha

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