1 / 0

C o l o r S c h e m e

C o l o r S c h e m e. Three types of colors, primary, secondary, and tertiary. All colors are created from the three primary colors, red, yellow, and blue. No colors need to be mixed to create these colors.

zoie
Download Presentation

C o l o r S c h e m e

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Color Scheme

  2. Three types of colors, primary, secondary, and tertiary. All colors are created from the three primary colors, red, yellow, and blue. No colors need to be mixed to create these colors. The three primary colors when mixed together form secondary colors of orange (red and yellow together), green (blue and yellow together), and purple (red and blue together). Tertiary colors are mixed from the secondary colors and lie between the primary and secondary colors on a color wheel.
  3. Coding Identifying Primary and Secondary Colors
  4. Terminology for Coding RGB Values-expresses colors by how much red, green and blue are used to make up the color and use the numbers 0 through 255. Hex Codes-Six digit codes preceded by a pound or hash tag sign. Color Names-147 predefined colors recognized by browsers. Examples of these types of coding are: RGB Values: rgb(102,205,170) Hex Codes: #66cdaa MediumAquaMarine
  5. Example of Coding for Colors Foreground Color: /* color name */ hl { color: DarkCyan;} /* hex code */ h2 { color: #ee380;} /* rgb value */ p { color: rgb(100.100.90);} Examples from HTML&CSS design and build websites by, Jon Duckett
  6. Background Color Body { background-color: rgb(200.200.200);} h1 { background-color: DarkCyan;} h2 { background-color: #ee3e80;} P { background-color: white;} Examples from HTML&CSS design and build websites by, Jon Duckett
  7. Opacity Opacity, rgba-Allows the creator to specify the opacity of an element and any of its child elements. The opacity in a RGB Value is designated with what is called an alpha value and a fourth number is added after the RGB values and uses the numbers between 0.0 and 1.0. Examples of coding opacity: p.one { background color: rgb(0,0,0); opacity: 0.5;} p.two { background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.5;} Examples from HTML&CSS design and build websites by, Jon Duckett
  8. HSL & HSLA HSL & HSLA-An alternative way to specify colors. H=Hue, S=Saturation, L=Lightness, A=Alpha Hue is expressed as an angle between 0 and 360 degrees. Saturation is expressed as a percentage. Lightness is expressed as a percentage with 0% being white, 50% being normal, and 100% being black. Alpha or Transparency is expressed as a number between 0 and 1.0. 0=no transparency, .5=50% transparency, .75=75% transparency
  9. Tint, Tone, Shade Tint is the resulting color when white is added to a color. Tone is the resulting color when gray is added to a color. Shade is the resulting color when black is added to a color.
  10. Types of Color Schemes Monochromatic Color Scheme Equates to one color with all its tints, tones, and shades. Complementary Color Scheme Matching up of colors that lie directly opposite each other on the color wheel. Triadic Color Scheme Determine a color and then pick two other colors that are equal distance from each other around the color circle. Tetradic Color Schemes Similar to the Triadic Color Scheme only two complementary colors are used.
  11. Helpful Resources on the Web for Color Scheme Color Scheme Designer http://colorschemedesigner.com/ Contrast Analyzer http://www.paciellogroup.com/resources/contrastAnalyser For palette ideas and color/themes design-seeds.com
More Related