CSS Color


CSS Color names

<style>
p.myStyle {
  color: white;
  background-color: mediumSeaGreen;
}

</style>

<p class="myStyle">Welcome to CSS</p>

Welcome to CSS

CSS Color Values : RGP

Ta có thể xét color bằng giá trị RGP. RGP có cấu trúc sau: rgb(red,green,blue).

<style>
p.myStyle2 {
  color: rgb(255,199,61);
  background-color: Violet;

}
</style>

<p class="myStyle2">Welcome to CSS</p>

Welcome to CSS

Nếu xét màu trắng thì cả 3 màu đều bằng 255. rgb(255,255,255). Nếu xét màu đen thì cả 3 màu đều bằng 0. rgb(0,0,0).

Nếu ta muốn xét màu gray có đậm nhạt khác nhau ta dùng 3 màu có giá trị bằng nhau.

<style>
p.myStyle3 {
  color: rgb(170,170,170);

}
p.myStyle4 {
  color: rgb(100,100,100);

}

</style>

<p class="myStyle3">Welcome to CSS</p>
<p class="myStyle4">Welcome to CSS</p>

Welcome to CSS

Welcome to CSS

CSS Color Values : RGPA

RGPA(red,green,blue,alpha). alpha có giá trị từ 0.0 đến 1.0. 0 mờ nhất, không thấy luôn, còn 1.0 là rõ nhất, còn ta muốn chỉnh mờ mờ thì chỉnh giá trị trong khoảng giữa 0.0 và 1.0. Ta xem ví dụ.

<style>
p.myStyle5 {
  color: black;
  background-color: rgba(100,100,100,0.5);

}
p.myStyle6 {
  color: black;
  background-color: rgba(100,100,100,1.0);

}

</style>

<p class="myStyle5">Welcome to CSS</p>
<p class="myStyle6">Welcome to CSS</p>


Welcome to CSS

Welcome to CSS

CSS Color Values : Hex

Ta có thể xét màu bằng số hex , cấu trúc như sau: #rrbbgg (rr: red, bb: blue, gg: green). Ta xem ví dụ sau.

<style>
p.myStyle7 {
  color: white;
  background-color: #ff0000;

}
p.myStyle8 {
  color: white;
  background-color: #00ff00;

}

p.myStyle9 {
  color: white;
  background-color: #0000ff;

}


p.myStyle10 {
  color: #ffffff; /* white */
  background-color: #000000; /* back */

}

</style>

<p class="myStyle7">#ff0000</p>
<p class="myStyle8">#00ff00</p>
<p class="myStyle9">#0000ff</p>
<p class="myStyle10">Welcome to CSS</p>


#ff0000

#00ff00

#0000ff

Welcome to CSS

Màu xám rất hay được dùng. Ta xem một số màu gray thường dùng nhé.

<style>
p.myStyle11 {
  color: white;
  background-color: #3c3c3c;

}
p.myStyle12 {
  color: white;
  background-color: #b4b4b4;

}

p.myStyle13 {
  color: white;
  background-color: #787878;

}

p.myStyle14 {
  color: white;
  background-color: #f0f0f0;

}



</style>

<p class="myStyle11">#3c3c3c</p>
<p class="myStyle12">#b4b4b4</p>
<p class="myStyle13">#787878</p>
<p class="myStyle14">#f0f0f0</p>


#3c3c3c

#b4b4b4

#787878

#f0f0f0

CSS Color Values : HSL

hsl(hue, saturation, lightness).

hue : là góc màu từ 0 đến 360. 0 là red, 120 là green, 240 là blue. Saturation: có giá trị là %. 0% là gray, 100% là full color của hue. lightness: có giá trị là %. 0% là black, 100% là white bất chấp hue là màu gì.


<style>
p.myStyle15 {
  color: white;
  background-color: hsl(0,100%,50%);

}
p.myStyle16 {
  color: white;
  background-color: hsl(120,100%,50%);

}

p.myStyle17 {
  color: white;
  background-color: hsl(240,100%,50%);

}

p.myStyle18 {
  color: white;
  background-color: hsl(0,60%,30%);

}



</style>

<p class="myStyle15">hsl(0,100%,50%)</p>
<p class="myStyle16"> hsl(120,100%,50%)</p>
<p class="myStyle17"> hsl(240,100%,50%)</p>
<p class="myStyle18">hsl(0,60%,30%)</p>


hsl(0,100%,50%)

hsl(120,100%,50%)

hsl(240,100%,50%)

hsl(0,60%,30%)

Như vậy ta đã biết cách dùng color, tóm lại ta có thể dùng :

  1. Color name : red, green, tomato.
  2. Color Value: RGP
  3. Color Value : RGPA
  4. Color Value : Hex
  5. Color Value : HSL