CSS 合法颜色值

สี CSS

CSS 中的颜色可以通过以下方法指定：

  • 十六进制颜色
  • 带透明度的十六进制颜色
  • สี RGB
  • สี RGBA
  • สี HSL
  • สี HSLA
  • ชื่อสีที่กำหนดก่อนหน้านี้/ที่เข้ากันได้ระหว่างหน้าบราวน์เซอร์
  • ใช้ currentcolor 关键字

十六进制颜色

用 #RRGGBB 规定十六进制颜色，其中 RR（红色）、GG（绿色）和 BB（蓝色）十六进制整数指定颜色的成分（分量）。所有值必须在 00 到 FF 之间。

例如，＃0000ff 值呈现为蓝色，因为蓝色分量设置为最高值（ff），其他分量设置为 00。

ตัวอย่าง

定义不同的 HEX 颜色：

#p1 {background-color: #ff0000;}   /* 红色 */
#p2 {background-color: #00ff00;}   /* 绿色 */
#p3 {background-color: #0000ff;}   /* 蓝色 */

ทดลองด้วยตัวเอง

带透明度的十六进制颜色

用 #RRGGBB 规定十六进制颜色。如需增加透明度，请在 00 和 FF 之间添加两个额外的数字。

ตัวอย่าง

กำหนดสี HEX ที่มีความโปร่งใส：

#p1a {background-color: #ff000080;}   /* สีแดงที่มีความโปร่งใส */
#p2a {background-color: #00ff0080;}   /* สีเขียวที่มีความโปร่งใส */
#p3a {background-color: #0000ff80;}   /* สีน้ำเงินที่มีความโปร่งใส */

ทดลองด้วยตัวเอง

สี RGB

ค่าสี RGB ประกอบด้วย ฟังก์ชัน rgb()กำหนดโดยเฉพาะ มีความเขียนเกี่ยวกับสัญญาณดังนี้:

rgb(red, green, blue)

พาเมอร์แต่ละตัว (red, green, blue）กำหนดความแข็งแกร่งของสี ซึ่งอาจเป็นตัวเลขเต็มหรือร้อยละจาก 0 ถึง 255 (จาก 0% ถึง 100%)。

เช่น ค่า rgb(0,0,255) แสดงเป็นสีสีน้ำเงิน เพราะค่าพาเมอร์ blue ตั้งเป็นค่าสูงสุด (255) และค่าอื่น ๆ ตั้งเป็น 0。

นอกจากนี้ ค่าต่อไปนี้กำหนดสีเดียวกัน: rgb(0,0,255) และ rgb(0%,0%,100%)。

ตัวอย่าง

กำหนดสี RGB ต่างๆ:

#p1 {background-color: rgb(255, 0, 0);}   /* สีสีแดง */
#p2 {background-color: rgb(0, 255, 0);}   /* สีสีเขียว */
#p3 {background-color: rgb(0, 0, 255);}   /* สีสีน้ำเงิน */

ทดลองด้วยตัวเอง

สี RGBA

สี RGBA คือการขยายค่าสี RGB โดยมีช่องทาง Alpha - กำหนดความโดดเด่นของวัตถุ。

สี RGBA ผ่าน rgba() ฟังก์ชันกำหนดโดยเฉพาะ มีความเขียนเกี่ยวกับสัญญาณดังนี้:

rgba(red, green, blue, alpha)

alpha ตัวเลขที่อยู่ระหว่าง 0.0 (ทรงเงา) และ 1.0 (ไม่มีทรงเงา)

ตัวอย่าง

กำหนดสี RGB ต่างๆ ที่มีความโดดเด่น:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* สีสีแดงที่มีความโดดเด่น */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* สีสีเขียวที่มีความโดดเด่น */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* สีสีน้ำเงินที่มีความโดดเด่น */

ทดลองด้วยตัวเอง

สี HSL

HSL หมายถึงมุมฉาก (hue)、ความเข้มข้น (saturation) และความระลึกซึ้ง (lightness) - คือการแสดงสีด้วยระบบเส้นโค้งคลื่นสี.

ใช้ hsl() ฟังก์ชันกำหนดค่าสี HSL โดยเฉพาะ มีความเขียนเกี่ยวกับสัญญาณดังนี้:

hsl(hue, saturation, lightness)

ความสีเป็นองศาบนวงวาลีสี (จาก 0 ถึง 360) - 0 (หรือ 360) คือสีแดง 120 คือสีเขียว และ 240 คือสีสีน้ำเงิน。

ความเข้มข้นเป็นอัตราเปอร์เซ็นต์; 0% แสดงถึงสีเงา และ 100% คือสีสดใส。

ความระลึกซึ้งเป็นเปอร์เซ็นต์; 0% เป็นสีดำ และ 100% เป็นสีขาว。

ตัวอย่าง

กำหนดสี HSL ต่างๆ：

#p1 {background-color: hsl(120, 100%, 50%);}   /* สีเขียว */
#p2 {background-color: hsl(120, 100%, 75%);}   /* สีเขียวเหลือง */
#p3 {background-color: hsl(120, 100%, 25%);}   /* สีเขียวดำ */
#p4 {background-color: hsl(120, 60%, 70%);}    /* ฝากขาวสีเขียวอ่อน */

ทดลองด้วยตัวเอง

สี HSLA

ค่าสี HSLA คือค่าสี HSL ที่มี Alpha ช่อง - กำหนดความโปร่งใสของวัตถุ

ค่าสี HSLA ประกอบด้วย ฟังก์ชัน hsla()กำหนด กระแสการใช้งานของฟังก์ชันดังนี้:

hsla(hue, saturation, lightness, alpha)

alpha ตัวเลขที่อยู่ระหว่าง 0.0 (ทรงเงา) และ 1.0 (ไม่มีทรงเงา)

ตัวอย่าง

กำหนดสี HSL ที่มีความโปร่งใสต่างๆ

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* ฝากขาวเงาสีเขียว */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* ฝากขาวเงาสีเขียวแสวง */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* ฝากขาวเงาสีเขียวดำ */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* ฝากขาวเงาสีเขียวอ่อน */

ทดลองด้วยตัวเอง

ชื่อสีที่กำหนดก่อนหน้านี้/ที่เข้ากันได้ระหว่างหน้าบราวน์เซอร์

HTML และ CSS มีชื่อสีที่กำหนดก่อนหน้านี้ 140 ชื่อ

ตัวอย่าง:blue、red、coral、brown ตัวอย่าง:

ตัวอย่าง

กำหนดชื่อสีต่างๆ

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}

ทดลองด้วยตัวเอง

รายชื่อทั้งหมดของชื่อสีที่กำหนดก่อนหน้านี้สามารถหาได้ใน คู่มือชื่อสีสีน้ำเงินของเรา

คำสั่ง currentcolor

currentcolor ใช้คำสั่ง color ขององค์ประกอบที่ถูกอ้างอิง

ตัวอย่าง

ของ <div> ฝากขาวตรงขอบจะเป็นสีส้มสลับ เพราะ <div> ฝากขาวตรงขอบของข้อความเป็นสีส้มสลับ:

#myDIV {
  color: blue; /* ฝากขาวตรงขอบ */
  border: 10px solid currentcolor; /* ฝากขาวตรงขอบ */
}

ทดลองด้วยตัวเอง