Skip to main content

Intro to CSS: Three CSS Color Types You Could Try

The simplest thing to make our web content attractive is to change text color. There are three CSS color types many programmers are using very commonly.

Hexadecimal

Hexadecimal is the # plus string of 6 hexadecimal numbers, which range from 0 to F. For example, color:#4B0082 is a purple color.

The first two numbers correspond how much red is in the color. The next two numbers correspond how much green in the color, and the last two numbers correspond to how much blue in the color. For example, color #FF0000 means all red. 

However, it is impossible to know the exactly hexadecimal for each color. So the easiest way is to find the color on Color Picker to select the color you want.


RGB

RGB includes three channels: Red, Green and Blue. Each ranges from 0 to 255. For example, if you want your <h1> text to color all green, you can use color: rgb (0,255,0).

RGBA

Just like RGB, but with an alpha (transparency) channel ranges from 0.0 to 1.0. For example, if you want your <h1> text to color all green with half transparency, the color will be rgba(0,255,0,0.5).

Now I am going to use those three color types to show a simple CSS color example.

Step one: create a HTML web page

I create a simple site named "Find Your Fruit" by using HTML. As you can see below, the text are all in default black. 

Step two: create a separate CSS file to add color property for those content.

Now I apply three different types of CSS color in this example. For h1, I go to the color picker site to select an watermelon kind of red color. Then, I copy the hexadecimal number (#FF5733) and paste in the color value.

Then, I add rgb value (50,100,150) for the h3 text color. I want the color is dark blue, so I put 150 on blue part. 

At last, I want the list content maintains the same color as the h3 text does, but only has some transparency. So I use rgba (50, 100, 150, 0.5), which keep the first three number unchanged, and add 0.5 transparency level.


Step three: link the CSS file to the HTML file

After I finished the CSS part, I link the css file "color example.css" to the HTML. Therefore, the web page can change the text color as I expected.



As the result:

Personally, I like the hexadecimal color type because I can view the color visually, and simply select any color I want in the color picker. For the RGB, I have to mix the three color channels by myself. Since I am not an artist, I have no idea how to mix red, green and blue into a different color. To be honest, I can't image what color I really want until I see it.




Labels:

Comments

Post a Comment

Popular posts from this blog

Intermediate Express.js: How To Add Styles & Partials in EJS File?

So far, we only have simple HTML tags and ejs tags in each ejs file. Every template page has no style at all. And the basic HTML header and footer are also missing. Today, I learned how to add styles and partials in ejs file. Link Style Step One: Touch a Separate CSS file I create a new directory "Style" under the "EJSDemo" directory, then I add a new CSS file "app.css" inside "Style" folder. Step Two: Add app.use(express.static()) in the app.js I add app.use(express.static("style")) in the "app.js". This will tell Express.js to serve the content of "Style" directory. Step Three: Write styles in CSS file I simple give body an orange background color and set text color to be grey. Step Four: Link to CSS file in the EJS file I just add <link> tag to link the "app.css" file on the top of the h1 tag in each ejs template. As the result, when I run the app and...
Post a Comment
Read more

Intermediate Express.Js: Write Conditions and Loops In The EJS (study note)

We continue to use the app.js which we have build to be the study example. In the last post, we only add a simple EJS tag <%= thingVar %> inside h1 tag. This will match the "thing" to any "thing" request from the user. If Statement Today, the course shows us to write a simple if statement in the EJS file. I learn to apply it to my own app. In the if statement, if users send"/wantto/workout" request, the page will show a new content "Good Idea!". We wrote the if statement in the "diet.ejs" file, and we add "<% %>" tags around the code. We have to wrap every line of JavaScript anytime JavaScript starts and ends. Moreover, you may see there are two types of ejs tags here: <%= %> The one with equal sign. According to the course, when we add equal sign, the value that is returned inside of the tag will be rendered to the HTML page. it will be added to the HTML. For example, if we write ...
Post a Comment
Read more

Authentication Project: Secret Page App Part One (Set up & Create User Model)

So far we only write the RESTful routes to send request and redirect to the related page, but we haven't do anything about authentication. If we can sign up, login, and log out, it will make our app more meaningful. Therefore, the course shows us how to create a secret page app, which will allow us to sign up, login to a secret page, and logout. Since it requires so many pieces, I will divided this project into three parts: set up & create user model, sign up, and login/logout. In this post, I am going to show all the set up process. Set Up Step One: Install packages The first thing we are going to do to create a folder "Auth", and inside of "Auth", we need to create another folder "AuthDemo". Then we cd (change directory) to "AuthDemo". Now we can set up the actual application structure by installing a few packages: passport, passport-local, passport-local-mongoose, mongoose, express, ejs, body-parser, and express-session....
Post a Comment
Read more