1 of 109

Web Design

Lecture & Discussion:

Colors and Images

2 of 109

CSS color Property

RGB, Hex, HSL, CSS Color Names

Eyedropper Tool and Color Picker

HTML <img> tag

Image File Formats

CSS background property

3 of 109

CSS color Property

RGB, Hex, HSL, CSS Color Names

Eyedropper Tool and Color Picker

HTML <img> tag

Image File Formats

CSS background property

4 of 109

CSS color Property

RGB, Hex, HSL, CSS Color Names

Eyedropper Tool and Color Picker

HTML <img> tag

Image File Formats

CSS background property

5 of 109

CSS color Property

6 of 109

CSS color Property

On digital screens, all colors are created using some combination of

7 of 109

CSS color Property

On digital screens, all colors are created using some combination of red

8 of 109

CSS color Property

On digital screens, all colors are created using some combination of red, green

9 of 109

CSS color Property

On digital screens, all colors are created using some combination of red, green, and blue color values.

10 of 109

CSS color Property

11 of 109

CSS color Property

12 of 109

CSS color Property

13 of 109

CSS color Property

14 of 109

CSS color Property

15 of 109

CSS color Property

16 of 109

CSS color Property

If you use a magnifying glass🔍🔍🔍 (or just push your face right up against your screen), you might be able to see thousands of tiny red, green, and blue rectangles.

17 of 109

CSS color Property

If you use a magnifying glass🔍🔍🔍 (or just push your face right up against your screen), you might be able to see thousands of tiny red, green, and blue rectangles.

These are picture elements, or pixels.

18 of 109

CSS color Property

19 of 109

CSS color Property

In HTML and CSS, we can control colors using four different color declarations:

RGB

Hex

HSL

CSS Color Names

20 of 109

CSS color Property

RGB (Red, Green, Blue) color: rgb(0,0,0);

Hex (Hexadecimal) color: #000000;

HSL (Hue, Saturation, Lightness) color: hsl(0%,100%,50%);

CSS Color Names (140) color: black;

21 of 109

CSS color Property

RGB (0-255,0-255,0-255)

22 of 109

CSS color Property

RGB (0-255,0-255,0-255)

Black color: rgb(0,0,0);

Red color: rgb(255,0,0);

Orange color: rgb(255,165,0);

Yellow color: rgb(255,255,0);

Lime color: rgb(0,255,0);

Cyan color: rgb(0,255,255);

Blue color: rgb(0,0,255);

White color: rgb(255,255,255);

23 of 109

CSS color Property

RGB (0%-100%,0%-100%,0%-100%)

24 of 109

CSS color Property

RGB (0%-100%,0%-100%,0%-100%)

Black color: rgb(0%,0%,0%);

Red color: rgb(100%,0%,0%);

Orange color: rgb(100%,50%,0%);

Yellow color: rgb(100%,100%,0%);

Lime color: rgb(0%,100%,0%);

Cyan color: rgb(0%,100%,100%);

Blue color: rgb(0%,0%,100%);

White color: rgb(100%,100%,100%);

25 of 109

CSS color Property

Hex (#FFFFFF) 0 1 2 3 4 5 6 7 8 9 A B C D E F

26 of 109

CSS color Property

Hex (#FFFFFF) 0 1 2 3 4 5 6 7 8 9 A B C D E F

Hexadecimal is a numeral system with a base of 16.

27 of 109

CSS color Property

Hex (#FFFFFF) 0 1 2 3 4 5 6 7 8 9 A B C D E F

The decimal system (base 10) only allows us to define 100 values using two digits (00 thru 99).

But the hexadecimal system (base 16) allows us to define 256 values using two digits (00 thru ff).

28 of 109

CSS color Property

Hex (#FFFFFF) 0 1 2 3 4 5 6 7 8 9 A B C D E F

0–9 represent values zero to nine

A represents the value ten

B represents the value eleven

C represents the value twelve

D represents the value thirteen

E represents the value fourteen

F represents the value fifteen

29 of 109

CSS color Property

Hexadecimal code in popular culture. The Martian (dir. Ridley Scott, 2015)

30 of 109

CSS color Property

Hexadecimal code in popular culture. The Martian (dir. Ridley Scott, 2015)

If you watched the 2015 film The Martian, �with Matt Damon, you’ll remember that �Damon’s character uses hexadecimal code �to send messages to NASA from Mars using �a simple visual communication system.

31 of 109

CSS color Property

Hexadecimal code in popular culture. The Martian (dir. Ridley Scott, 2015)

So, learning the hexadecimal system �is not only good for defining colors �on the Web, but it will also be useful �if you ever get trapped on Mars!

32 of 109

CSS color Property

Hex (#FFFFFF) 0 1 2 3 4 5 6 7 8 9 A B C D E F

33 of 109

CSS color Property

Hex (#FFFFFF) 0 1 2 3 4 5 6 7 8 9 A B C D E F

Black color: #000000;

Red color: #ff0000;

Orange color: #ffa500;

Yellow color: #ffff00;

Lime color: #00ff00;

Cyan color: #00ffff;

Blue color: #0000ff;

White color: #ffffff;

34 of 109

CSS color Property

RGB and Hex are two different ways to specify color on the web, but they are still the same color model.

35 of 109

CSS color Property

HSL (0-360, 0-100%, 0-100%)

Hue: Where the value is on the color spectrum

Saturation: Colorfulness

Lightness: Brightness

36 of 109

CSS color Property

Unlike RGB and Hex, HSL is a different color model.

37 of 109

CSS color Property

HSL (0-360, 0-100%, 0-100%)

Black color: hsl(0,0%,0%);

Red color: hsl(0,100%,50%);

Orange color: hsl(30,100%,50%);

Yellow color: hsl(60,100%,50%);

Lime color: hsl(120,100%,50%);

Cyan color: hsl(180,100%,50%);

Blue color: hsl(240,100%,50%);

White color: hsl(0,0%,100%);

38 of 109

CSS color Property

The easiest way to define colors in CSS �is to just use basic color names.

39 of 109

CSS color Property

CSS Color Names (140)

Black color: black;

Red color: red;

Orange color: orange;

Yellow color: yellow;

Lime color: limegreen;

Cyan color: cyan;

Blue color: blue;

White color: white;

40 of 109

CSS color Property

Here is a helpful color palette “cheatsheet” that shows you all of the CSS named colors – if you click on any of the colors you can see its CSS name value, as well as the RGB hexadecimal values.

Cheatsheet: CSS Colors

41 of 109

CSS color Property

CSS Color Names (140)

https://www.w3schools.com/colors/colors_names.asp

42 of 109

CSS color Property

RGB, Hex, HSL, CSS Color Names

Eyedropper Tool and Color Picker

HTML <img> tag

Image File Formats

CSS background property

43 of 109

CSS color Property

RGB, Hex, HSL, CSS Color Names

Eyedropper Tool and Color Picker

HTML <img> tag

Image File Formats

CSS background property

44 of 109

CSS color Property

45 of 109

CSS color Property

Using the Eyedropper Tool �along with the Color Picker�in Adobe Photoshop is an �easy way to match color �values from photographs �or other references.

46 of 109

CSS color Property

Using the Eyedropper Tool �along with the Color Picker�in Adobe Photoshop is an �easy way to match color �values from photographs �or other references.

47 of 109

CSS color Property

Using the Eyedropper Tool �along with the Color Picker�in Adobe Photoshop is an �easy way to match color �values from photographs �or other references.

48 of 109

CSS color Property

Using the Eyedropper Tool �along with the Color Picker�in Adobe Photoshop is an �easy way to match color �values from photographs �or other references.

49 of 109

CSS color Property

Using the Eyedropper Tool �along with the Color Picker�in Adobe Photoshop is an �easy way to match color �values from photographs �or other references.

50 of 109

CSS color Property

Using the Eyedropper Tool �along with the Color Picker�in Adobe Photoshop is an �easy way to match color �values from photographs �or other references.

51 of 109

CSS color Property

Using the Eyedropper Tool �along with the Color Picker�in Adobe Photoshop is an �easy way to match color �values from photographs �or other references.

52 of 109

CSS color Property

Using the Eyedropper Tool �along with the Color Picker�in Adobe Photoshop is an �easy way to match color �values from photographs �or other references.

53 of 109

CSS color Property

RGB, Hex, HSL, CSS Color Names

Eyedropper Tool and Color Picker

HTML <img> tag

Image File Formats

CSS background property

54 of 109

CSS color Property

RGB, Hex, HSL, CSS Color Names

Eyedropper Tool and Color Picker

HTML <img> tag

Image File Formats

CSS background property

55 of 109

HTML <img> Tag

56 of 109

HTML <img> Tag

Start <img> tag

Source attribute

Path to file

Alternate attribute

Alternate text

Title attribute

Image title

End tag

57 of 109

HTML <img> Tag

<img> tag

Start <img> tag

Source attribute

Path to file

Alternate attribute

Alternate text

Title attribute

Image title

End tag

58 of 109

HTML <img> Tag

<img> tag

Start <img> tag

Source attribute

Path to file

Alternate attribute

Alternate text

Title attribute

Image title

End tag

59 of 109

HTML <img> Tag

<img> tag

Start <img> tag

Source attribute

Path to file

Alternate attribute

Alternate text

Title attribute

Image title

End tag

60 of 109

HTML <img> Tag

<img> tag

Start <img> tag

Source attribute

Path to file

Alternate attribute

Alternate text

Title attribute

Image title

End tag

61 of 109

HTML <img> Tag

<img> tag

Start <img> tag

Source attribute

Path to file

Alternate attribute

Alternate text

Title attribute

Image title

End tag

62 of 109

HTML <img> Tag

<img> tag

Start <img> tag

Source attribute

Path to file

Alternate attribute

Alternate text

Title attribute

Image title

End tag

63 of 109

HTML <img> Tag

<img> tag

Start <img> tag

Source attribute

Path to file

Alternate attribute

Alternate text

Title attribute

Image title

End <img> tag

64 of 109

HTML <img> Tag

<img> tag

Start <img> tag

Source attribute

Path to file

Alternate attribute

Alternate text

Title attribute

Image title

End tag

65 of 109

HTML <img> Tag

<img> tag

Start <img> tag

Source attribute

Path to file

Alternate attribute

Alternate text

Title attribute

Image title

End tag

66 of 109

HTML <img> Tag

<img> tag

Start <img> tag

Source attribute

Path to file

Alternate attribute

Alternate text

Title attribute

Image title

End <img> tag

67 of 109

HTML <img> Tag

<img> tag

Start <img> tag

Source attribute

Path to file

Alternate attribute

Alternate text

Title attribute

Image title

End <img> tag

68 of 109

Images - Common Mistake

69 of 109

Images - Common Mistake

If you ever see the name prefix “file:” in your markup, it means that the HTML document will be looking for a document on the user’s local directory (and it won’t be there).

70 of 109

Images - Common Mistake

Remember that our location specifications in markup are relational. So only apply file directions based on the document you’re currently working in (which has a folder called "img" in the same directory).

71 of 109

CSS color Property

RGB, Hex, HSL, CSS Color Names

Eyedropper Tool and Color Picker

HTML <img> tag

Image File Formats

CSS background property

72 of 109

CSS color Property

RGB, Hex, HSL, CSS Color Names

Eyedropper Tool and Color Picker

HTML <img> tag

Image File Formats

CSS background property

73 of 109

Image File Formats

JPEG�
GIF�
PNG�
SVG

74 of 109

Image File Formats

JPEG �(Joint Photographic Experts Group)
GIF �(Graphics Interchange Format)
PNG �(Portable Networks Graphics)
SVG�(Scalable Vector Graphics)

75 of 109

Image File Formats

JPEG (Joint Photographic Experts Group)

1992
Lossy
Photographs (i.e. real world imagery)
Complex coloring

76 of 109

Image File Formats

GIF (Graphics Interchange Format)

1987
Lossy, dithering
Computer graphics, simple icons
Simple colors
Animations

77 of 109

Image File Formats

<http://users.wfu.edu/matthews/>

78 of 109

Image File Formats

<http://users.wfu.edu/matthews/>

JPEG

Good for real-world imagery (photographs)

GIF

Bad for photos, better for digital �imagery (logos, animations)

79 of 109

Image File Formats

PNG (Portable Networks Graphics)

1996
Lossless
Computer graphics, alphas/transparencies, shading
Simple colors/transitions = smaller file sizes

80 of 109

Image File Formats

<http://i.stack.imgur.com/B09oZ.png>

81 of 109

Image File Formats

<http://i.stack.imgur.com/B09oZ.png>

PNG

Can handle transparency gradients

GIF

Can’t handle transparency gradients

82 of 109

Image File Formats

SVG (Scalable Vector Graphics)

2001
Open standard
XML based
Vector graphics, not raster graphics (like the difference between an AI file and a PSD file)

83 of 109

Image File Formats

<https://commons.wikimedia.org/wiki/File:Bitmap_VS_SVG.svg>

84 of 109

Image File Formats

<https://commons.wikimedia.org/wiki/File:Bitmap_VS_SVG.svg>

Raster

Gets pixelated when it scales-up

Vector

Doesn’t get pixelated when it scales-up

85 of 109

CSS color Property

RGB, Hex, HSL, CSS Color Names

Eyedropper Tool and Color Picker

HTML <img> tag

Image File Formats

CSS background property

86 of 109

CSS color Property

RGB, Hex, HSL, CSS Color Names

Eyedropper Tool and Color Picker

HTML <img> tag

Image File Formats

CSS background property

87 of 109

CSS background Property

88 of 109

CSS background Property

The CSS background-color: property is just one way to control the background of an HTML element.

89 of 109

CSS background Property

The CSS background-color: property is just one way to control the background of an HTML element.

We can also apply images to the background of an HTML element using the CSS background-image: property.

90 of 109

CSS background Property

http://www.homepage.com

91 of 109

CSS background Property

Let’s apply the CSS background-image: property to the HTML body selector in our CSS stylesheet to add some imagery to our website.

http://www.homepage.com

92 of 109

CSS background Property

body {

}

93 of 109

CSS background Property

body {

}

94 of 109

CSS background Property

http://www.homepage.com

95 of 109

CSS background Property

http://www.homepage.com

96 of 109

CSS background Property

http://www.homepage.com

This looks great! Notice that the image �is displayed at its normal size, but that �the web browser automatically tiles �and repeats the image to fill the �entire background.

97 of 109

CSS background Property

http://www.homepage.com

But what if we don’t want the �background image to tile and �repeat endlessly? Then we need �to use the CSS background-repeat: �property.

98 of 109

CSS background Property

body {

}

99 of 109

CSS background Property

body {

background-repeat: no-repeat;

}

100 of 109

CSS background Property

http://www.homepage.com

101 of 109

CSS background Property

http://www.homepage.com

OK… The background image no longer tiles and repeats, but it still displays at its normal width and height. The web browser automatically places the image in the top, left corner of the web page.

102 of 109

CSS background Property

http://www.homepage.com

If we want to make the background image �cover the entire background of the web page, �Then we need to adjust the CSS background-size: �property.

103 of 109

CSS background Property

body {

background-repeat: no-repeat;

}

104 of 109

CSS background Property

body {

background-repeat: no-repeat;

background-size: cover;

}

105 of 109

CSS background Property

http://www.homepage.com

106 of 109

CSS background Property

http://www.homepage.com

Awesome! The CSS background-size: cover; �declaration will automatically scale the image �to cover the entire background of the web page.

107 of 109

CSS color Property

RGB, Hex, HSL, CSS Color Names

Eyedropper Tool and Color Picker

HTML <img> tag

Image File Formats

CSS background property

108 of 109

CSS color Property

RGB, Hex, HSL, CSS Color Names

Eyedropper Tool and Color Picker

HTML <img> tag

Image File Formats

CSS background property