All about Colors

HTML Color

There are four different ways to use colors in CSS. You can use RGB, RGBA, Hexadecimal, and color names. They all have advantages some are easy to use than others, this tutorial will show you all the different types and situations to use them in. With RGB, RGBA, and Hex there are 16,777,216 different colors but you can only use 256 on the web.

Color words

Colors words are the easiest out of the four ways to add colors to word in HTML but they also do the least. To add colors words to tags you just add the name of the color you want. Color words are the least used way because they are very limited in the amount of colors you can use in your web page.

Ex.

<p style="color: Red;">Hello</p>

Hello

Links:

All the color words

Hexadecimal

The hex system for colors is base 16 and are 6 digits long(Hex meaning 6 in latin), and look like #FF0000. The system goes from 0-F Both RGB and Hex codes have the same amount of colors for the web. The order for hex codes go "RRGGBB" Red Green Blue. Each one of the values you be a character from 0-F. F being the most of one color and 0 being none of that color. Web colors are all hex codes that are doubled like #00FF33 or #55DD22 but like #12FC5A

Ex.

<p style="color: #FF0000;">Hello</p>

Hello

RGBA and RGB

RGB and RGBA are almost the same system they use different amounts of red green and blue. Each color goes from 0-255 (256 different numbers).The a on RGBA stands for alpha it is a value from .0-1 it is the transparency value.

Ex.

<p style="color: rgba(255,0,0,1);">Hello</p>

Hello

<p style="color: rgb(255,0,0);">Hello</p>

Hello

Here is a picture of how transparency can be used.

In Conclusion

All of the different types of color choices work in HTML 5 and they all have there different uses. You can refer to my other blogpost for examples of each type.

Links:
HTML Color Picker
HTML Colors

RGBA Transpareny

The scope of this project was to teach us how to use transparency in the web instead of relying on hex codes.

Begging

I started off this project by creating 5 div tags.

The container tag held all of the 1-4 tags and had CSS that applied to all of the IDs.

Middle

In this project we learned how to use the DIV tag and specify special CSS properties for each one like transparency. The default way to use colors was using HEX codes you had to change it to RGBA for this project

Each one of the DIV tags had differing levels of transparency from 20%-80%

Final Product

When all of the tables and tags were set up correctly each div had different levels of transparency for each tag. In future projects I can apply how to use Divs

Basic HTML projects

Tim Berners-Lee Page

In this page I learned how to insert a image into the web page and float the image to the right direction. We also added padding the the right side of the image so the text wouldn't be directly touching it.

Hex Codes Page
In this project we used the div tag and changed from inline CSS to Internal CSS. Instead of putting most of the CSS inside the tags to putting the CSS in the header of each page. I learned how to use HEX codes instead of the name of each color to get a wider variety of colors. The hex codes are a 16 base system going from 0-F Each code is 6 digits long. The order goes red red green green blue bluee.

Adobe Illustrator projects

Tutorial

I started by doing the tutorial and finishing the basic pencil. This taught me how to use the polygon tool to create shapes and use the arrow keys to choose how many points they have. Once I was done I was able to group everything together and use the live paint bucket like a coloring book to color in each of the spots on the pencil and cup.

Customized Pencil

After I finished the basics of Adobe Illustrator I could move on and build my own mechanical pencil. The cup on the left also has the word "Pencil" on it that is stretched around the cup to make it look more realistic. Again I used my knowledge of the first pencil and was able to use the live paint bucket to finish my custom pencils colors.

The other pencil is the tutorial pencil stretched out to make it look more like a real pencil and not just a stub of one.

Creation

This was the final custom piece we had to make. The two parts of it are the flag and the flag pole. The American flag was easy to make except the stars because they are not on a perfect grid, to go around this I made two separate grids of stars and put them together to get the right look for the American flag. I made the grid using the vertical and horizontal align center tools. This was I only had to line up 8 stars (4 for each grid) and than I was able to just copy and center align the rest of them. I think it looks just like a real American flag.