OK.
Quindi in questa lezione discuteremo molti dei diversi modi di descrivere e rappresentare i colori
in C S e fino ad ora se andiamo a valutare che abbiamo scritto Abbiamo appena usato i colori elementari della scuola
elementare come il rosso, il verde e il viola e ovviamente quelli funzionano bene, ma non sono particolarmente belli per
le sfumature, non per i bei colori.
Secondo me, probabilmente non li useresti mai perché la maggior parte dei designer e la maggior parte delle persone che creano siti
web hanno una tavolozza di colori molto specifica.
una tonalità di verde molto specifica per un marchio o se si tratta di una tavolozza di colori.
Se è qualcosa che sai seguire il colore del marchio come
Sono un designer o qualcuno ha creato quasi nessuno usa solo il semplice default rosso o verde o viola.
Detto questo, ci sono alcuni colori incorporati e CSSA che hanno nomi.
E infatti c'è probabilmente più di quanto penseresti.
E c'è molto più di quanto la maggior parte della gente ricordi.
Quindi ci sono cose come il fiordaliso o l'orchidea scura e credo ci siano 147 colori diversi.
E questo sito qui che in realtà non ho mai usato.
Voglio solo mostrartelo è un modo per visualizzare tutti i diversi colori con nome e vedere valutare.
E ovviamente il problema con l'utilizzo di questi è ancora solo 147 colori e potresti desiderare un colore che assomiglia
a questo colore dorato ma leggermente più chiaro o leggermente più scuro o leggermente più rosso e
non ci sarà un'opzione perfetta per te.
E poi l'altro problema è che è difficile ricordare questi nomi come il grigio chiaro dell'ardesia.
Nessuno se lo ricorda.
Quindi uso solo i colori nominati come il rosso arancio viola solo per scopi di debug molto rapidi per assicurarsi
che qualcosa funzioni.
Lo trasformerò in rosso e vedrò se funziona.
E anche solo per scopi didattici, ma la maggior parte delle persone non userebbe mai questi colori.
Quindi i CSS forniscono alcuni sistemi di colori diversi con i quali possiamo lavorare.
E questi sono i sistemi di colore dal modo in cui esistono al di fuori della SS.
Quindi, se hai una certa familiarità con la fotografia o la stampa e hai lavorato con i colori prima che tu possa
aver incontrato alcuni di questi.
Quindi il primo è qualcosa chiamato esadecimale e prima di parlare del perché si
chiama esadecimale e cosa significa dare un'occhiata ad alcuni esempi.
Quindi qui la prima cosa che stiamo facendo è selezionare tutto l'H-1 e cambiare il colore del testo in nero.
La prossima cosa che stiamo facendo è selezionare tutti i tatuaggi che cambiano il colore per diventare una sfumatura
di viola e quindi selezionare tutti i tre di età e insegnare loro ad essere una tonalità di rosa.
Quindi quello che noterai è che piuttosto che avere una parola come rosso o viola Ora abbiamo questo
simbolo di hash ed è tecnicamente chiamato un'ottava Thorpe seguito da sei cifre.
Quindi per diventare neri sono sei zeri per diventare viola.
Noterai che sono numeri ma c'è anche una lettera B lì dentro.
E infine per ottenere questo colore rosato è di nuovo numeri e lettere questa volta la lettera F. Quindi cosa sta succedendo qui.
Ho intenzione di andare avanti e aprire alcuni appunti che ho.
E faremo una lezione di matematica davvero breve, è
più solo per qualcosa che penso sia interessante ma anche informativo e aiuterà a capire come funziona l'esadecimale.
Quindi, se tornassi alla scuola media quando ero a scuola, almeno abbiamo parlato molto del sistema
decimale e di come supponiamo di voler creare un numero a tre cifre.
Abbiamo il nostro posto una volta al decimo posto nel posto delle centinaia.
Quindi, se volessi un numero, il numero più grande di tre cifre che
posso creare è novecentonovantanove il più piccolo numero di tre cifre tecnicamente è 111 o 0 0 o 1.
numeri decimali base 10 ho 10 scelte per ogni slot che posso fare da 0 a 9.
Ma l'idea è che ogni posto nella nostra base regolare 10 che è ciò che questo significa sistema di
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.
Ma ci sono altri sistemi numerici.
Quindi potresti aver sentito parlare di binari prima e questo è basato su due.
E questo significa che abbiamo solo 0 e 1 come opzioni.
Quindi, se volessi creare un numero binario a tre cifre, il più grande che posso costruire è 1 1 1.
Non è lo stesso di centoundici.
che aspetto ha l'hacking e sono totalmente sbagliati.
Quindi questo non è il momento giusto per capire come funziona il binario ma puoi vedere cose come questa in
CSI o in qualsiasi tipo di show in cui stanno cercando di mostrarti
Ma è vero che il binario è una parte davvero molto importante di come funzionano i computer.
Anche questo è basato.
Quindi abbiamo solo due scelte zero o uno.
Quindi esadecimale è la base 16.
Ciò significa che abbiamo 16 scelte e
quelle scelte vanno da zero a nove e poi piuttosto che andare a 10 11 12 13 14 15.
Quelli sono numeri a due cifre di due cifre, il che è problematico di più X e include lettere.
Quindi abbiamo 0 a 9 e poi ABC DCF.
Quindi il numero esadecimale più grande di tre cifre sarebbe F F F e il più piccolo 0 0 0.
Quindi è come qualsiasi altro sistema numerico tranne che abbiamo 16 scelte.
E la ragione per cui l'esadecimale è usato piuttosto che
usare solo i decimali per nominare un colore è che ci dà molte più scelte mantenendo i nomi dei recolors relativamente brevi.
Quindi, in pratica, l'esadecimale sta semplicemente prendendo i colori e dando loro dei nomi numerici.
E se usiamo la base 10 abbiamo solo 10 scelte per cifra.
Quindi abbiamo bisogno di usare più cifre se usiamo il binario e avremmo bisogno di usare un numero di cifre per rappresentare i colori.
Centinaia e centinaia di migliaia di cifre.
Quindi i numeri esadecimali sono sei cifre dall'inizio lungo rispetto a Octa Thorpe.
E poi una cifra due tre quattro cinque sei.
E il modo in cui funziona non è solo numeri casuali.
C'è in realtà un po 'di un sistema.
Quindi i primi due numeri corrispondono a quanto
il rosso è nel colore il prossimo a corrispondere a quanto verde e negli ultimi due corrispondono a quanto blu è nel colore.
Quindi andrò avanti e passerò alla nostra sede per valutare e mostrarti cosa intendo.
Quindi lavoriamo con il nostro H-1 qui.
Abbiamo tre H e dobbiamo modellarli.
Quindi per usare l'esadecimale tutto ciò che facciamo è rastremare Octa Thorpe e quindi sei cifre.
Quindi iniziamo definendo un colore rosso e ricordiamo che i primi due sono rossi.
Quindi le nostre prime due cifre se volessimo il rosso completo sarebbe f f perché questo è il numero più alto.
E poi tutto il resto può essere zero.
Quindi questo salverà fino al rosso.
Niente verde e niente blu.
E se lo facciamo.
Andiamo avanti e apriamo il nostro file e vedrai che quelli sono di colore rosso vivo.
Quindi torniamo indietro e giochiamo un po 'con questo e ora introduciamo un po' di verde.
Quindi diamo otto e vedrai che otteniamo questo
leggero arancione e ti starai chiedendo come sia verde arancione rosso.
E la risposta è
che questo non è lo stesso sistema di colori che sei abituato a mescolare le pitture, per esempio RG B funziona in modo leggermente diverso.
E ancora questo è qualcosa per un altro video.
Ma essenzialmente se sommiamo il rosso
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.
In realtà è bianco e questo è in realtà il modo in cui la luce funziona nel mondo reale.
Se potessi prendere per lasciare le luci o tre luci
LCD un rosso verde e blu e combinarle e farle brillare insieme.
Avresti effettivamente una luce bianca.
Ecco come funziona questo colore.
OK.
Quindi la maggior parte delle volte in realtà non ti viene in mente questi colori da zero.
Quindi non è davvero.
Voglio dire, è una
bella abilità, ma non devi essere in grado di identificare questo colore come una sorta di sfumatura di viola o verde
o qualsiasi altra cosa che non è proprio lo scopo che più spesso farai è avere un selettore di colori .
E quindi diciamo che voglio un'ombra color porpora scuro.
Esistono tutti i tipi di immagini a colori.
Ce ne sono alcuni sulla tua macchina, a seconda che tu abbia un Mac o un PC, puoi scaricarne uno.
Alcuni di questi sono inclusi, ma possiamo anche andare
online e, se voglio un colore viola scuro, riesco a trovare questo viola.
Diciamo questo colore
qui.
E poi posso solo copiare.
Penso che l'abbia copiato.
No, basta copiare.
Lì è questo colore e
lo uso che rinfresca e otteniamo un viola scuro.
Quindi questo è più spesso quello che farai avrai un selezionatore di colori.
Inizialmente sceglierai i tuoi colori e poi ti riferirai a loro.
Quindi non è il più intuitivo.
È più bello se dicesse qualcosa come melanzane scure, ma ovviamente non sarà così preciso.
Questa è solo una sfumatura di viola scuro.
E se voglio cambiarlo sono sfortunato.
Quindi è esadecimale.
Il prossimo sistema di colori di cui parleremo è R. G. b quindi RGV funziona in modo molto simile, tranne
che la sintassi è leggermente diversa.
Quindi R. G. B ci sono tre canali proprio come con esadecimale.
C'è rosso verde e blu.
E ciò che è diverso è che RGV è ancora nella base 10.
Quindi quello che facciamo abbiamo tre canali
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.
B parentesi e quindi
E quelli vanno da zero a 255.
Quindi in questo caso stiamo dicendo che tutte le età sono R. G. essere dove Rosso è zero il verde
è tutto in blu è zero.
E otteniamo questo verde brillante e questo stiamo impostando tutti gli altri due per essere R. G. sii dove
Red è a metà strada.
Il verde è completamente sparito.
e ancora meno rosso e otteniamo questa sfumatura di blu.
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
Quindi facciamo alcuni esempi.
Andiamo a fare un viola di nuovo.
Quindi scriviamo semplicemente la parola tra parentesi G-B e poi abbiamo bisogno dei nostri canali.
Quindi il primo se vogliamo un viola o un po 'di rosso facciamo 60.
Non conosco il 68 rosso.
Zero verde e questo
sarà un blu o viola allora che un rosso o un viola, quindi faremo un centinaio di blu e lo salveremo.
E ovviamente non sembra un granché, ma è cambiato leggermente.
Quindi andiamo avanti e ora alziamo la lettura di un bel 240 e potete vedere che otteniamo un viola rosato.
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
blu ci danno effettivamente
il bianco e diventano neri.
Vuoi zero per tutti e tre i canali.
Quindi la nostra B è molto simile al decimale.
L'unica differenza è la sintassi.
Quindi piuttosto che scrivere qualcosa
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.
Quindi solo un'altra sintassi e un'altra sintassi di cui voglio parlare è il nostro GPA.
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
cui puoi rendere i colori trasparenti.
Quindi R. G. V-A è ottimo se vuoi avere un colore che stai facendo più o meno trasparente.
Quindi il modo in cui funziona è la stessa sintassi esatta tranne che scriviamo R. G. essere un e quindi abbiamo
quattro canali che dobbiamo compilare.
E i primi tre come prima.
Esse vanno da zero a 255 ma l'ultimo canto sul canale alfa va da zero a 1.
Quindi ti darò alcuni esempi qui.
Qui impostiamo tutti e tre come lo stesso colore dei canali RG e B.
Quindi 11 rosso.
Novantanove 950 verdi blu.
E poi il quarto canale stiamo cambiando l'alfa o cambiando la trasparenza.
Quindi con quattro Alpha con tutto il tutto senza alcuna trasparenza.
Finiamo con questa influenza.
Quando dicemmo che Alpha era il sesto punto otteniamo questo blu molto più leggero e più trasparente.
E poi lo impostiamo per essere punto due, otteniamo questo che è appena lì.
Facciamo un altro esempio, facciamo Archie B-A e stavolta facciamo un green.
Quindi circa 200 o più verde e un po 'di blu e quindi abbiamo bisogno del nostro alfa e cominciamo con uno solo.
Aggiorna la pagina e otteniamo questo verde.
Quindi ora facciamo la stessa cosa ma rendiamola leggermente più chiara. Facciamo il punto otto.
Ho intenzione di aggiornare e puoi vedere che è diventato un po 'più pallido.
Ora siamo più drastici 2. 2 e puoi vedere che diventa molto più trasparente.
Quindi, per riassumere, abbiamo i colori incorporati che la maggior parte delle persone non usa.
Abbiamo un esadecimale.
Abbiamo R. G. B allora.
RG B. A dove A sta per Alpha