Hướng dẫn mã màu css w3school

Colors are displayed combining RED, GREEN, and BLUE light.


Color Names

With CSS, colors can be set by using color names:


CSS Color Values

With CSS, colors can be specified in different ways:

  • By color names
  • As RGB values
  • As hexadecimal values
  • As HSL values (CSS3)
  • As HWB values (CSS4)
  • With the currentcolor keyword

RGB Colors

RGB color values are supported in all browsers.

An RGB color value is specified with: rgb( RED , GREEN , BLUE ).

Each parameter defines the intensity of the color as an integer between 0 and 255.

For example, rgb(0,0,255) is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.

Example

ColorRGBColor
  rgb(255,0,0) Red
  rgb(0,255,0) Green
  rgb(0,0,255) Blue

Try it Yourself »

Shades of gray are often defined using equal values for all the 3 light sources:

Example

ColorRGBColor
  rgb(0,0,0) Black
  rgb(128,128,128) Gray
  rgb(255,255,255) White

Try it Yourself »



Hexadecimal Colors

Hexadecimal color values are also supported in all browsers.

A hexadecimal color is specified with: #RRGGBB.

RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color.

For example, #0000FF is displayed as blue, because the blue component is set to its highest value (FF) and the others are set to 00.

Example

ColorHEXRGBColor
  #FF0000 rgb(255,0,0) Red
  #00FF00 rgb(0,255,0) Green
  #0000FF rgb(0,0,255) Blue

Try it Yourself »

Shades of gray are often defined using equal values for all the 3 light sources:

Example

ColorHEXRGBColor
  #000000 rgb(0,0,0) Black
  #808080 rgb(128,128,128) Gray
  #FFFFFF rgb(255,255,255) White

Try it Yourself »


Upper Case or Lower Case?

You can use upper case or lower case letters to specify hexadecimal values.

Lower case are easier to write. Upper case are easier to read.


Color Names

CSS supports 140 standard color names.

In the next chapter you will find a complete alphabetical list of color names with hexadecimal values:

Color NameHexColor
AliceBlue #F0F8FF  
AntiqueWhite #FAEBD7  
Aqua #00FFFF  
Aquamarine #7FFFD4  
Azure #F0FFFF  
Beige #F5F5DC  
Bisque #FFE4C4  


The currentcolor Keyword

The currentcolor keyword refers to the value of the color property of an element.

Example

The border color of the following

element will be blue, because the text color of the
element is blue:

#myDIV {
  color: blue; /* Blue text color */
  border: 10px solid currentcolor; /* Blue border color */
}

Try it Yourself »



W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2022 by Refsnes Data. All Rights Reserved.
W3Schools is Powered by W3.CSS.

CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

This tutorial will teach you CSS from basic to advanced.

Start learning CSS now »


Examples in Each Chapter

This CSS tutorial contains hundreds of CSS examples.

With our online editor, you can edit the CSS, and click on a button to view the result.

CSS Example

body {
  background-color: lightblue;
}

h2 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

Try it Yourself »

Click on the "Try it Yourself" button to see how it works.


CSS Examples

Learn from over 300 examples! With our editor, you can edit the CSS, and click on a button to view the result.

Go to CSS Examples!


Use the Menu

We recommend reading this tutorial, in the sequence listed in the menu.

If you have a large screen, the menu will always be present on the left.

If you have a small screen, open the menu by clicking the top menu sign .


CSS Templates

We have created some responsive W3.CSS templates for you to use.

You are free to modify, save, share, and use them in all your projects.

Free CSS Templates!



CSS Exercises


CSS Quiz

Test your CSS skills with a quiz.

Start CSS Quiz!


My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log into your account, and start earning points!

This is an optional feature. You can study W3Schools without using My Learning.

Hướng dẫn mã màu css w3school


CSS References

At W3Schools you will find complete CSS references of all properties and selectors with syntax, examples, browser support, and more.


Kickstart your career

Get certified by completing the course

Get certified

w3schoolsCERTIFIED.2022