HTML Colors Color is one of the most important ideas of the Principles of Design. It is used to separate and emphasis elements in a design. Insert a picture.

Slides:



Advertisements
Similar presentations
© Mark E. Damon - All Rights Reserved. Custom Color is taking more than one hue of a color and giving it a name.
Advertisements

CSS cont. October 5, Unit 4. Padding We can add borders around the elements of our pages To increase the space between the content and the border, use.
End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science
4.01 HTML, CSS and Color. Introduction This presentation includes the following topics: Additive color theory Color Names RGB Colors Hex Colors.
Design, Formatting, CSS, & Colors 27 February, 2011.
Lab 10: Creating a Presentation
HTML Lesson 2 TBE 540 Farah Fisher. Prerequisites Access web pages and navigate Use search engines to locate specific information Download graphics from.
RGB color model Skills: none IT concepts: combining red, green and blue light to generate colors This work is licensed under a Creative Commons Attribution-Noncommercial-
1 Chapter 20 — Creating Web Projects Microsoft Visual Basic.NET, Introduction to Programming.
HTML BASIC
Contains 16,777,216 Colors. My Car is red My Car is red How do I add colors to my web page? Notepad Browser Works with the “Standard” colors: Red, Green,
Colour & Image in HTML Wah Yan College (Hong Kong) Mr. Li C.P.
© Maths Support Service 2007 Binary and Hexadecimal Numbers Next Slide AE98FD AE98FD.
Chapter 9 Color…. Objectives Appreciate the appeal of color in your designs. Learn the secret messages of color. Gain familiarity with RGB, CMYK, and.
Introduction To Graphic Design. What is graphic design? Graphic design is the process and art of combining text and graphics and communicating an effective.
Color Theory in Web Design Web Design – Sec 2-2. Objectives  The student will: –Have a better understanding of effective use of color on the web. –Be.
Use a Large Bold Type for the Main Title Use Smaller Type for the Subtitle. Above type is 96 pt, this type is 66 pt Make Authors’ names smaller. This is.
1 Ethics of Computing MONT 113G, Spring 2012 Session 11 Graphics on the Web Limits of Computer Science.
CMYK vs. RGB Design. Primary colors The colors that make up the base for every other color created. Depending on whether you are looking at it from science,
Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
Online News Graphics and Flash. Why use graphics 1. Attract attention Large pictures attract attention better than small ones Suitable for covers in print,
IT Introduction to Website Development Welcome!
Lesson 13 – Color and Typography. 2 Objectives Discuss basic color theory. Understand the color wheel. Understand how color is presented on a computer.
1 Perception, Illusion and VR HNRS 299, Spring 2008 Lecture 14 Introduction to Computer Graphics.
Creating a PowerPoint Presentation
Content To Date Review Course Work/Labs Assigned to Date Review HTML Image Tag Editing code for image folder Introduce HTML Color Tags Webpage Safe Colors.
More Basic HTML. Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features Add alignments.
Kevin Murphy Web Color Basics Masters Project CS 490.
Department of Information Technology Chapter 8 - Creating Hypertext links Lecturer: Ms Melinda Chung.
15.2 More Basic HTML. More Basic HTML Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features.
Most of the attributes of the body element specify colors for the Web page. Note: The background attribute won’t be useful till we learn about graphics.
1 Web Developer Foundations: Using XHTML Chapter 4 Key Concepts.
Web Colors. Web Colors: Up until now, we have been using only pre- defined color names, such as "orange" and "lightblue". As web designers, we need the.
Colors. Color of HTML Elements You can control the color of the following elements: You can control the color of the following elements: All text within.
Applying Color in CSS Web Design – Sec 4-5 Part or all of this lesson was adapted from the University of Washington’s “ Web Design & Development I ” Course.
1 Ethics of Computing MONT 113G, Spring 2012 Session 10 HTML Tables Graphics on the Web.
CREATING A POWERPOINT PRESENTATION. Planning a presentation Create a presentation Rearrange and delete text and slides Add animations Add transitions.
_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the.
XHTML Formatting font with a style declaration. Formatting Font HTML uses the font tag to change size and family of font But… the font tag is being deprecated.
12/20/20151 Color Fall, 2010 Modified by Linda Kenney 10/26/10.
HTML & Color How to Use Color  Backgrounds-  Usually a light color is best  Should have a color based on a theme or plan  Can have a dark.
Elements of Design 1.02 Investigate Design Principles and Elements.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
1.02 Color Here we go AGAIN!. A chart used to choose colors—helps you choose colors that look good together. Color Palette.
Web page layout in elegance.  Specific Designs for Target Audiences Consider your audiences tastes when creating your website.
Chapter 3 Color Objectives Identify the color systems and resolution Clarify category of colors.
© ExplorNet’s Centers for Quality Teaching and Learning 1 Objective % Understand concepts used to create digital graphics.
Desktop Publishing Lesson 5 — Enhancing Publications.
Lesson 13 – Color and Typography. 2 Objectives Understand basic color theory. Understand the color wheel. Understand how color is presented on a computer.
Creating Web Pages in Word. Sharing Office Files Online Many Web pages are created using the HTML programming language. Web page editors are software.
Graphics and Desktop Publishing Objective 1.02: Investigate Design Principles and Elements.
Color Basics.
CNIT 131 Graphics.
Permeability (% of Control)
Permeability (% of Control)
4.01 HTML, CSS and Color.
UNIT 2 – LESSON 4 Encoding Color Images.
4.01 HTML, CSS and Color.
By Brian MacMillan version all rights reserved.
Color Using Understanding the possibilities and complexities of printing in color. Digital Communications 1 Unit 2 _ Use w Worksheet_Ann Ware.
Understand typography, multiuse design principles and elements
Color Using Understanding the possibilities and complexities of printing in color.
4.01 HTML, CSS and Color.
Use a Large Bold Type for the Main Title (80 pt):
Permeability (% of Control)
Use a Large Bold Type for the Main Title (80 pt):
Permeability (% of Control)
Use a Large Bold Type for the Main Title (70 pt):
Presentation transcript:

HTML Colors Color is one of the most important ideas of the Principles of Design. It is used to separate and emphasis elements in a design. Insert a picture or background that is appropriate for this topic.

Psychology of Color Color choice should always be evaluated carefully because different colors invoke similar reactions from most people. Keep in mind that these meanings are interpreted. They may not mean the same thing to you, your clients or the audience.

Red symbolizes power and summons feelings of excitement. Insert a picture here that illustrates this color and the feelings it invokes.

Orange represents creativity and instills confidence. Insert a picture here that illustrates this color and the feelings it invokes.

Yellow is generally portrayed as cheerful. It depicts optimism. Insert a picture here that illustrates this color and the feelings it invokes.

Green is peaceful and represents a harmonious sentiment. Insert a picture here that illustrates this color and the feelings it invokes.

Blue symbolizes honesty and conjures feelings of calmness. Insert a picture here that illustrates this color and the feelings it invokes.

Purple signifies beauty and invokes inspiration. Insert a picture here that illustrates this color and the feelings it invokes.

White implies innocence and suggests feelings of security. Insert a picture here that illustrates this color and the feelings it invokes.

Black represents elegance. It can signify strength. Insert a picture here that illustrates this color and the feelings it invokes.

Colors on the Web There are three options for specifying colors in HTML – color name, hexadecimal value, RGB value.

Color Name There are sixteen valid HTML color names that can be used on the web. They are case- insensitive.

AquaBlackBlueFuchsia GrayGreenLimeMaroon NavyOlivePurpleRed SilverTealWhiteyellow Fill in each box with the appropriate color. Make the table fill the page with prettyfullness.

Hexadecimal Value Hexadecimal values are six digits ranging from 0 to f preceded by a hash (#) symbol. The first two digits represent the color intensity of red. The second two digits set the intensity of green. The last two set the intensity of blue.

The hexadecimal value for red is #ff0000. The ff means that red is set to 100%. The 00 means that blue and green are set to 0%. If you wanted 100% green the value would be #00ff00. If you wanted 100% blue the value would be #0000ff.

For a complete list of hexadecimal values go to GO TO this site. 2.Use Print Screen or the Snipping tool to copy/paste ALL the examples shown. It might take you several slides. There are 5 blank slides after this one. 3.Make the background BLACK just like the site. 4.If you need more slides… CTRL M.

EXAMPLE – make yours cropped and pretty and get all the colors.

RGB Color When you look at your computer monitor you’re looking at colors generated using red, green and blue light. This is called an additive color model because varying percentages of red, green and blue light create the variety of colors your monitor produces.

The key word here is light. 100% red light, 100% green light and 100% blue light added together will create white on your monitor. In order to create black you must turn the RGB light sources down to zero.

RGB Value RGB Values are represent the numeric value 0 through 255 for each of the colors red, green and blue.

Go to this site and copy/paste the chart that has the basic color values. asp asp DELETE the color HEX columns and only include the RGB.

Web-Safe Palette Not all computers or web browsers display the same amount or render the colors similarly. Therefore, the web-safe palette was invented. The web-safe palette of consists of 216 colors. The number 216 was chosen because computer operating systems customarily reserved up to twenty colors for their own use. The 216 web-safe colors and the 40 reserved colors total 256.

In the 1990s when the Internet was becoming popular, computers where only capable of displaying 256 colors. Today however, computers are capable displaying over 16 million colors. So, the only reason to use the web-safe color palette today is if you feel your website will be viewed from an older, 256 color computer system.

Find a picture of an OLD computer that might only be able to show 256 colors.

Color Tips A few things to keep in mind about using color on the web.

Don’t forget the hash (#) symbol when specifying hexadecimal colors or the color may not appear in all browsers. ADD a graphic or picture to illustrate the tip mentioned above.

Color should be used to enhance a message or design. Therefore, you should be careful not to use to many different colors. ADD a graphic or picture to illustrate the tip mentioned above.

Be careful when setting text and background colors. Readability should be the most important thing. ADD a graphic or picture to illustrate the tip mentioned above.

White and black always make a good combination. ADD a graphic or picture to illustrate the tip mentioned above.

Blue is the default color for hyperlinks. ADD a graphic or picture to illustrate the tip mentioned above.

Purple is the default color for visited hyperlinks. ADD a graphic or picture to illustrate the tip mentioned above.

THE END!!!!!