1
00:00:01,050 --> 00:00:01,500
D'ACCORD.

2
00:00:01,740 --> 00:00:22,880
Donc, dans cette leçon, nous allons discuter beaucoup des différentes façons de décrire et de représenter les couleurs dans C Ss et jusqu'à maintenant si nous allons à l'évaluation que nous avons écrit Nous venons d'utiliser des couleurs élémentaires simple école Comme le rouge et le vert et le violet et évidemment ceux fonctionnent bien mais ils ne sont pas particulièrement beaux nuances pas de belles couleurs.

3
00:00:22,890 --> 00:00:30,900
À mon avis et vous seriez probablement jamais les utiliser parce que la plupart des concepteurs et la plupart des gens faisant des sites Web ont une palette de couleurs très spécifiques.

4
00:00:31,320 --> 00:00:39,070
Que ce soit quelque chose que vous savez est de suivre la couleur de la marque comme une nuance très spécifique de vert pour une marque ou si c'est une palette de couleurs.

5
00:00:39,250 --> 00:00:46,760
Je suis un designer ou quelqu'un a créé presque personne n'utilise que le défaut par défaut rouge ou vert ou violet.

6
00:00:47,130 --> 00:00:52,670
Avec cela dit il ya un peu construit en couleurs et CSSA qui ont des noms.

7
00:00:52,980 --> 00:00:55,380
Et en fait, il ya probablement plus que vous ne le pensez.

8
00:00:55,500 --> 00:00:59,370
Et il ya beaucoup plus que la plupart des gens se souviennent.

9
00:00:59,370 --> 00:01:06,710
Donc, il ya des choses comme cornflower bleu ou foncé orchidée et il ya je pense 147 couleurs différentes.

10
00:01:06,870 --> 00:01:10,530
Et ce site ici que j'ai vraiment jamais utilisé.

11
00:01:10,540 --> 00:01:15,800
Je veux juste vous montrer que c'est un moyen de visualiser toutes les différentes couleurs nommées et de voir évaluer.

12
00:01:16,080 --> 00:01:31,500
Et bien sûr, le problème avec l'utilisation de ceux-ci est toujours il ne fait que 147 couleurs et vous pourriez vouloir une couleur qui ressemble à cette couleur or, mais légèrement plus léger ou légèrement plus sombre ou un peu plus rouge et il ne va pas être une option parfaite pour vous.

13
00:01:31,500 --> 00:01:36,310
Et puis l'autre problème est qu'il est juste difficile de se rappeler ces noms comme gris ardoise claire.

14
00:01:36,360 --> 00:01:37,750
Personne ne s'en souvient.

15
00:01:37,770 --> 00:01:45,940
Donc, je n'utilise que des couleurs nommées comme le rouge orange pourpre juste pour des fins de débogage très rapide pour s'assurer que quelque chose fonctionne.

16
00:01:45,960 --> 00:01:48,410
Je vais juste le rendre rouge et voir si cela fonctionne.

17
00:01:48,540 --> 00:01:54,080
Et aussi juste à des fins éducatives, mais la plupart des gens n'utiliseront jamais ces couleurs.

18
00:01:54,730 --> 00:01:58,940
Ainsi CSS fournit quelques systèmes de couleur différents avec lesquels nous pouvons travailler.

19
00:01:59,280 --> 00:02:03,410
Et ce sont des systèmes de couleurs par la façon dont existent en dehors de la SS.

20
00:02:03,540 --> 00:02:11,790
Donc, si vous avez une certaine familiarité avec la photographie ou l'impression et que vous avez travaillé avec des couleurs avant que vous avez rencontré certains de ceux-ci.

21
00:02:12,120 --> 00:02:21,970
Donc, le premier est quelque chose appelé hexadécimal et avant que nous parlions de pourquoi il est appelé hexadécimal et ce que cela signifie juste jeter un coup d'oeil à quelques exemples.

22
00:02:21,990 --> 00:02:29,740
Donc ici la première chose que nous faisons est de sélectionner tous les H-1 et de changer leur couleur de texte pour être noir.

23
00:02:30,030 --> 00:02:39,550
La prochaine chose que nous faisons est de sélectionner tous les tatouages ​​de changer la couleur pour être une nuance de violet, puis en sélectionnant tous les trois ans et leur enseigner à être une nuance de rose.

24
00:02:39,600 --> 00:02:50,710
Donc, ce que vous remarquerez, c'est que plutôt que d'avoir un mot comme le rouge ou le violet Nous avons maintenant ce symbole de hachage et il est techniquement appelé une octave Thorpe suivie de six chiffres.

25
00:02:51,270 --> 00:02:56,100
Donc, pour obtenir noir, il est de six zéros pour obtenir violet.

26
00:02:56,160 --> 00:02:59,690
Vous remarquerez que c'est des chiffres, mais il ya aussi une lettre B là-dedans.

27
00:02:59,940 --> 00:03:07,000
Et enfin pour obtenir cette couleur rosâtre c'est de nouveau des chiffres et des lettres cette lettre de temps F ..

28
00:03:07,020 --> 00:03:09,200
Donc ce qui se passe ici.

29
00:03:09,390 --> 00:03:12,300
Je vais aller de l'avant et ouvrir quelques notes que j'ai.

30
00:03:12,630 --> 00:03:23,620
Et nous allons faire une très courte leçon de mathématiques est ce plus juste pour quelque chose que je pense est intéressant mais il est également informatif et aidera à comprendre comment fonctionne hexadécimal.

31
00:03:23,640 --> 00:03:35,080
Donc, si vous retournez au collège quand j'étais à l'école, au moins, nous avons beaucoup parlé du système décimal et comment supposer que je voulais créer un numéro à trois chiffres.

32
00:03:35,310 --> 00:03:39,660
Nous avons notre fois place la 10e place dans la place des centaines.

33
00:03:39,690 --> 00:03:52,710
Donc, si je voulais un numéro le plus grand numéro à trois chiffres que je peux créer est neuf cent quatre-vingt-dix-neuf le plus petit nombre à trois chiffres techniquement est 111 ou 0 0 ou 1.

34
00:03:53,190 --> 00:04:07,560
Mais l'idée est que chaque endroit dans notre base régulière 10 qui est ce que cela signifie base 10 nombre décimal système, j'ai 10 choix pour chaque emplacement, je peux faire 0 à 9.

35
00:04:07,980 --> 00:04:14,950
Donc c'est la base 10 que nous avons l'habitude de travailler avec nos chiffres sont 0 1 2 3 4 5 6 7 8 9.

36
00:04:15,390 --> 00:04:17,630
Mais il existe d'autres systèmes numériques.

37
00:04:17,790 --> 00:04:21,940
Donc, vous avez peut-être entendu parler de binaire avant et qui est basé sur deux.

38
00:04:21,960 --> 00:04:25,360
Et donc cela signifie que nous avons seulement 0 et 1 comme nos options.

39
00:04:25,770 --> 00:04:32,690
Donc, si je voulais construire un nombre binaire à trois chiffres le plus grand que je peux construire est 1 1 1.

40
00:04:32,700 --> 00:04:35,560
Ce n'est pas la même chose que cent onze.

41
00:04:35,580 --> 00:04:48,310
Donc, ce n'est pas vraiment le moment de vraiment aller sur le fonctionnement binaire, mais vous pouvez voir des choses comme ça dans des spectacles comme CSI ou toute sorte de spectacle où ils essaient de vous montrer ce que le piratage ressemble et ils sont totalement faux.

42
00:04:48,490 --> 00:04:53,230
Mais il est vrai que le binaire est une partie très importante de la façon dont les ordinateurs fonctionnent.

43
00:04:53,470 --> 00:04:54,850
Donc, c'est basé aussi.

44
00:04:54,910 --> 00:04:57,030
Donc nous avons juste deux choix zéro ou un.

45
00:04:57,370 --> 00:04:59,850
So hexadécimal est la base 16.

46
00:05:00,340 --> 00:05:10,480
Donc cela signifie que nous avons 16 choix et que ces choix vont de zéro à 9 et ensuite plutôt que d'aller à 10 11 12 13 14 15.

47
00:05:10,810 --> 00:05:17,380
Ce sont deux nombres de chiffre à deux chiffres qui est problématique X plus et qui comprend des lettres.

48
00:05:17,380 --> 00:05:22,070
Donc nous avons 0 à 9 et puis ABC DCF.

49
00:05:22,270 --> 00:05:33,090
Ainsi, le plus grand nombre hexadécimal à trois chiffres serait F F F et le plus petit 0 0 0.

50
00:05:33,910 --> 00:05:37,500
Donc, c'est comme n'importe quel autre système numérique, sauf que nous avons 16 choix.

51
00:05:37,690 --> 00:05:50,610
Et la raison que l'hexadécimal est utilisé plutôt que d'utiliser juste décimale pour nommer une couleur, c'est qu'il nous donne beaucoup plus de choix tout en gardant les noms des recolors relativement courts.

52
00:05:50,920 --> 00:05:55,370
Donc, fondamentalement, a hexadécimal est juste de prendre des couleurs et de leur donner des noms numériques.

53
00:05:55,390 --> 00:05:59,200
Et si nous utilisons la base 10, nous n'avons que 10 choix par chiffre.

54
00:05:59,200 --> 00:06:05,760
Donc, nous avons besoin d'utiliser plus de chiffres si nous utilisons le binaire et nous aurions besoin d'utiliser une tonne de chiffres pour représenter les couleurs.

55
00:06:05,770 --> 00:06:07,870
Des centaines et des centaines de milliers de chiffres.

56
00:06:07,930 --> 00:06:12,820
Ainsi, les nombres hexadécimaux sont six premiers chiffres de début que Octa Thorpe.

57
00:06:13,030 --> 00:06:18,590
Et puis un chiffre deux trois quatre cinq six.

58
00:06:18,730 --> 00:06:22,010
Et la façon dont il fonctionne, ce n'est pas seulement des nombres aléatoires.

59
00:06:22,240 --> 00:06:24,590
Il ya effectivement un peu d'un système.

60
00:06:24,640 --> 00:06:36,220
Ainsi, les deux premiers chiffres correspondent à la quantité de rouge dans la couleur suivante pour correspondre à la quantité de vert et dans les deux derniers correspondent à la quantité de bleu est dans la couleur.

61
00:06:36,760 --> 00:06:40,300
Donc, je vais aller de l'avant et passer à notre voir évaluer et vous montrer ce que je veux dire.

62
00:06:40,810 --> 00:06:43,510
Alors travaillons avec notre H-1 ici.

63
00:06:43,600 --> 00:06:46,880
Nous avons trois H et doit leur style.

64
00:06:47,050 --> 00:06:51,790
Donc, pour utiliser hexadécimal tout ce que nous faisons est conicité Octa Thorpe et puis six chiffres.

65
00:06:52,180 --> 00:06:58,090
Commençons donc par définir une couleur rouge et rappelez-vous que les deux premiers sont rouges.

66
00:06:58,090 --> 00:07:04,370
Donc nos deux premiers chiffres si nous voulions plein rouge serait f f parce que c'est le plus grand nombre.

67
00:07:04,990 --> 00:07:07,630
Et puis tout le reste peut être nul.

68
00:07:07,630 --> 00:07:10,370
Donc, cela va sauver tourner rouge tout le chemin.

69
00:07:10,660 --> 00:07:12,050
Pas de vert et pas de bleu.

70
00:07:12,280 --> 00:07:13,270
Et si nous le faisons.

71
00:07:13,570 --> 00:07:19,810
Allons-y et ouvrez notre dossier, vous verrez que ceux-ci sont de couleur rouge vif.

72
00:07:19,870 --> 00:07:26,400
Revenons donc et nous allons jouer avec cela un peu et maintenant pour introduire un peu de vert.

73
00:07:26,860 --> 00:07:36,280
Alors donnez-lui huit et vous verrez que nous obtenons cette orange légère et vous pourriez vous demander comment est vert orange rouge.

74
00:07:36,520 --> 00:07:46,000
Et la réponse est que ce n'est pas le même système de couleur que vous avez l'habitude de mélanger les peintures par exemple RG B fonctionne légèrement différente.

75
00:07:46,150 --> 00:07:48,190
Et encore une fois c'est quelque chose pour une autre vidéo.

76
00:07:48,220 --> 00:08:03,160
Mais essentiellement si nous avons ajouté rouge vert et bleu tout le chemin jusqu'à plein plein rouge plein vert et plein bleu de la couleur résultante n'est pas comme un brun ou noir comme vous pourriez vous attendre.

77
00:08:03,160 --> 00:08:07,350
C'est en fait blanc et c'est en fait comment fonctionne la lumière dans le monde réel.

78
00:08:07,420 --> 00:08:13,740
Si vous pouviez prendre pour laisser les lumières ou trois lumières LCD rouge vert et bleu et de les combiner et de les briller ensemble.

79
00:08:13,810 --> 00:08:15,560
Vous obtiendrez réellement la lumière blanche.

80
00:08:15,790 --> 00:08:17,690
Voilà comment fonctionne cette couleur.

81
00:08:18,060 --> 00:08:18,310
D'ACCORD.

82
00:08:18,310 --> 00:08:23,380
Donc, la plupart du temps, vous n'arrivez pas à trouver ces couleurs à partir de zéro.

83
00:08:23,380 --> 00:08:24,410
Donc ce n'est pas vraiment.

84
00:08:24,520 --> 00:08:42,750
Je veux dire, c'est une belle compétence, mais vous n'avez pas à être en mesure d'identifier cette couleur comme une sorte de vous savez l'ombre de violet ou vert ou tout ce qui est ce n'est pas vraiment la portée ce que vous le plus souvent fera est d'avoir un sélecteur de couleur .

85
00:08:43,350 --> 00:08:46,670
Et disons que je veux comme une ombre pourpre foncé.

86
00:08:46,750 --> 00:08:48,160
Il ya toutes sortes d'images en couleur.

87
00:08:48,190 --> 00:08:53,110
Il ya certains qui sont sur votre machine selon si vous avez un Mac ou un PC, vous pouvez en télécharger un.

88
00:08:53,110 --> 00:09:01,400
Certains d'entre eux sont inclus, mais nous pouvons aussi simplement aller en ligne et si je veux comme une ombre pourpre foncé je peux juste trouver ce violet.

89
00:09:02,290 --> 00:09:07,300
Disons cette couleur ici.

90
00:09:07,840 --> 00:09:10,160
Et puis je peux simplement copier.

91
00:09:10,230 --> 00:09:12,080
Je crois que cela a été copié.

92
00:09:12,140 --> 00:09:14,050
Non, vous venez de copier.

93
00:09:14,160 --> 00:09:24,900
Là c'est cette couleur et l'utilisation que rafraîchir et nous obtenons un pourpre foncé.

94
00:09:24,980 --> 00:09:28,090
Donc, c'est le plus souvent ce que vous ferez, vous aurez un sélecteur de couleur.

95
00:09:28,340 --> 00:09:32,390
Au début, vous choisirez vos couleurs et vous revenez simplement à eux.

96
00:09:32,390 --> 00:09:33,870
Ce n'est donc pas le plus intuitif.

97
00:09:34,010 --> 00:09:42,920
Il est plus agréable si elle a dit quelque chose comme l'aubergine foncée, mais bien sûr, cela ne va pas être aussi précis.

98
00:09:42,920 --> 00:09:44,540
C'est juste une nuance de pourpre foncé.

99
00:09:44,540 --> 00:09:47,070
Et si je veux changer, je suis hors de la chance.

100
00:09:47,120 --> 00:09:50,420
C'est hexadécimal.

101
00:09:50,420 --> 00:09:58,910
Le prochain système de couleurs dont nous allons parler est R.G. B donc RGV fonctionne de manière très similaire sauf que la syntaxe est légèrement différente.

102
00:09:58,910 --> 00:10:02,600
Donc R.G. B il ya trois canaux comme avec hexadécimal.

103
00:10:02,630 --> 00:10:04,620
Il y a le vert rouge et le bleu.

104
00:10:05,120 --> 00:10:08,380
Et ce qui est différent, c'est que RGV est toujours dans la base 10.

105
00:10:08,810 --> 00:10:25,360
Donc, ce que nous faisons, nous avons trois canaux différents rouge vert bleu et la syntaxe est colon de couleur et puis le mot sont les lettres R.G. B entre parenthèses puis la valeur de notre lire la valeur de notre vert et la valeur de notre bleu.

106
00:10:25,640 --> 00:10:29,340
Et ceux qui vont de zéro à 255.

107
00:10:29,900 --> 00:10:40,170
Donc, dans ce cas, nous disons tous les âges sont R.G. Être où le rouge est vert zéro est tout le chemin vers le haut dans le bleu est zéro.

108
00:10:40,670 --> 00:10:50,150
Et nous obtenons ce vert vif et celui-ci nous mettons toutes les deux d'âge pour être R.G. Être là où Red est à mi-chemin.

109
00:10:50,300 --> 00:10:52,100
Le vert est complètement disparu.

110
00:10:52,340 --> 00:11:04,140
Et Blue est à peu près à mi-hauteur et nous obtenons une jolie pourpre et puis celui-ci nous mettons tous les trois ans trois ans pour être principalement bleu avec un peu de vert et encore moins rouge et nous obtenons cette nuance de bleu.

111
00:11:04,700 --> 00:11:07,420
Alors faisons quelques exemples.

112
00:11:08,960 --> 00:11:13,720
Let's go pour un let's faire un pourpre encore.

113
00:11:13,820 --> 00:11:19,480
Donc, nous juste texte le mot nos parenthèses G-B et puis nous avons besoin de nos canaux.

114
00:11:19,640 --> 00:11:27,180
Donc, le premier, si nous voulons un violet ou voulez un peu de rouge faisons 60.

115
00:11:27,200 --> 00:11:28,800
Je ne sais pas 68 rouge.

116
00:11:29,360 --> 00:11:39,840
Zéro vert et ce sera un bleu ou violet puis d'un rouge ou violet donc nous allons faire une centaine de bleu et nous l'enregistrer.

117
00:11:41,660 --> 00:11:45,560
Et bien sûr, il n'a pas l'air d'une grande partie d'un changement, mais il a changé légèrement.

118
00:11:45,560 --> 00:11:53,920
Alors allons-y et maintenant montons la lecture un peu 240 et vous pouvez voir que nous obtenons un pourpre rose.

119
00:11:54,500 --> 00:12:13,900
Et si je présente un peu de vert et si je tourne tout le chemin tout comme avant avec hexadécimal plein rouge vert et bleu nous donne réellement blanc et d'obtenir noir.

120
00:12:13,900 --> 00:12:18,080
Vous voulez zéro pour les trois canaux.

121
00:12:18,080 --> 00:12:20,690
Donc, notre B est très similaire à la décimale.

122
00:12:20,750 --> 00:12:22,660
La seule différence est la syntaxe.

123
00:12:22,940 --> 00:12:43,040
Donc, plutôt que d'écrire quelque chose comme ça, où nous avons deux canaux ou deux chiffres pour le rouge pour le vert et deux pour le bleu à la place, nous avons trois emplacements et nous allons juste de zéro à 255.

124
00:12:43,040 --> 00:12:49,880
Donc, juste une autre syntaxe et une autre syntaxe dont je veux parler est notre GPA.

125
00:12:50,270 --> 00:12:59,100
Donc R-GA fonctionne comme R.G. B, sauf qu'il ya une petite torsion qui est il ya un quatrième canal appelé Alpha qui est la façon dont vous pouvez rendre les couleurs transparentes.

126
00:12:59,270 --> 00:13:05,950
Donc R.G. V-A est grand si vous voulez avoir une couleur que vous rendez plus ou moins transparent.

127
00:13:06,230 --> 00:13:13,830
Donc, la façon dont il fonctionne, c'est la même syntaxe exacte sauf que nous écrivons R.G. Être un et puis nous avons quatre canaux que nous devons remplir.

128
00:13:14,150 --> 00:13:16,560
Et les trois premiers comme avant.

129
00:13:16,580 --> 00:13:23,900
Ils vont de zéro à 255 mais le dernier chant sur le canal alpha va de zéro à 1.

130
00:13:24,470 --> 00:13:26,370
Je vais vous donner quelques exemples.

131
00:13:26,540 --> 00:13:33,800
Ici, nous mettons tous les trois pour être exactement la même couleur en ce qui concerne les canaux RG et B sont concernés.

132
00:13:33,920 --> 00:13:35,080
Donc 11 rouges.

133
00:13:35,170 --> 00:13:37,850
Neuf neuf vert 950 bleu.

134
00:13:38,480 --> 00:13:42,840
Et puis le quatrième canal nous changeons l'alpha ou changeons la transparence.

135
00:13:42,860 --> 00:13:47,950
Donc, avec quatre Alpha avec tout le tout sans aucune transparence du tout.

136
00:13:48,050 --> 00:13:49,810
Nous finissons avec cette grippe.

137
00:13:50,480 --> 00:13:56,340
Quand nous avons dit Alpha pour être point six, nous obtenons ce bleu beaucoup plus clair et plus transparent.

138
00:13:56,690 --> 00:14:01,640
Et puis nous avons mis le point deux, nous obtenons ce qui est à peine là.

139
00:14:01,880 --> 00:14:09,300
Alors faisons un autre exemple, faisons Archie B-A et cette fois, faisons un green.

140
00:14:09,440 --> 00:14:18,860
Donc 200 ou si vert et un peu de bleu et puis nous avons besoin de notre alpha et commençons juste avec un.

141
00:14:18,860 --> 00:14:23,080
Actualisez la page et nous obtenons ce vert.

142
00:14:23,180 --> 00:14:30,830
Donc, maintenant, faisons la même chose mais la rendons légèrement plus pâle. Alors, faisons le point huit.

143
00:14:30,960 --> 00:14:34,330
Je vais rafraîchir et vous pouvez le voir a un peu plus pâle.

144
00:14:34,460 --> 00:14:41,810
Maintenant soyons plus drastiques vers le bas 2.2 et vous pouvez le voir devient beaucoup plus transparent.

145
00:14:42,920 --> 00:14:47,480
Donc, pour résumer, nous avons construit dans des couleurs que la plupart des gens n'utilisent pas.

146
00:14:47,690 --> 00:14:49,460
Nous avons hexadécimal.

147
00:14:49,460 --> 00:14:50,900
Nous avons R.G. B puis.