Colors

.demo {
	*color: red
}
.demo-1 {
	*background-color: #ff0000
}
.demo-2 {
	*background-color: rgb(255, 0, 0)
}
.demo-3 {
	*background-color: hsl(0, 100%, 50%)
}

https://jsfiddle.net/bo3rxfhb/10/

ColorNameHex ValuesRGB ValuesHSL Values
black#000000rgb(0, 0, 0)hsl(0, 0%, 0%)
silver#c0c0c0rgb(192, 192, 192)hsl(0, 0%, 75%)
gray#808080rgb(128, 128, 128)hsl(0, 0%, 50%)
white#ffffffrgb(255, 255, 255)hsl(0, 100%, 100%)
maroon#800000rgb(128, 0, 0)hsl(0, 100%, 25%)
red#ff0000rgb(255, 0, 0)hsl(0, 100%, 50%)
purple#800080rgb(128, 0, 128)hsl(300, 100%, 25%)
fuchsia#ff00ffrgb(255, 0, 255)hsl(300, 100%, 50%)
green#008000rgb(0, 128, 0)hsl(120, 100%, 25%)
olive#808000rgb(0, 255, 0)hsl(120, 100%, 50%)
lime#00ff00rgb(128, 128, 0)hsl(60, 100%, 25%)
yellow#ffff00rgb(255, 255, 0)hsl(60, 100%, 50%)
navy#000080rgb(0, 0, 128)hsl(240, 100%, 25%)
blue#0000ffrgb(0, 0, 255)hsl(240, 100%, 50%)
teal#008080rgb(0, 128, 128)hsl(180, 100%, 25%)
aqua#00ffffrgb(0, 255, 255)hsl(180, 100%, 50%)

Cách viết

Hệ màuChú thíchCách viếtDEMO
HEX

HEX là viết tắt của từ "hexadecimal".
Cách viết: gồm dấu "#" kết hợp với dãy ký tự Latin, chỉ bao gồm số hoặc chữ (hệ thập lục phân), không phân biệt chữ hoa hay chữ thường.
Các ký tự Latin có thể chấp nhận là: a,b,c,d,e,f,A,B,C,D,E,F.
Ví dụ: #00ffff
Ta có thể viết gút gọn màu này theo các cách sau:
Gút gọn 6 ký tự giống nhau thành 3 ký tự: #ffffff => #fff
Gút gọn 3 cặp ký tự thành 3 ký tự: #ff0066 => #f06

#+[value]

.demo {
	*color: #FF0000
}
RGB

RGB là viết tắt của từ "Red-Green-Blue".
Xác định màu theo RGB là sự kết hợp của 3 màu cơ bản: đỏ (Red), xanh lá cây (Green) và xanh dương (Blue)
Cách viết: rgb(giá trị 1, giá trị 2, giá trị 3)
Với giá trị từ 0 tới 255.
Ví dụ: rgb(155,167,1)
Ngoài ra còn có giá trị đặc biệt là RGBA với A có giá trị từ 0 đến 1. Giá trị này xác định độ transparent của màu
Ví dụ: rgba(155,167,1, 0.5)

RGB([value],[value],[value])
RGBA([value],[value],[value],[transparent])

.demo {
	*color: rgb(155,167,1)
}
.demo {
	*color: rgba(155,167,1, .8)
}
HSL

HSL là viết tắt của từ "Hue-Saturation-Lightness".
Xác định màu theo HSL là sự kết hợp của 3 yếu tố cơ bản: mức độ về màu sắc, độ bão hoà, độ sáng
Cách viết: hsl(giá trị 1, giá trị 2, giá trị 3)
Với giá trị Hue từ 0 tới 360.
Với giá trị Saturation từ 0% tới 100%.
Với giá trị Lightness từ 0% tới 100%.
Ví dụ: hsl(180, 50%, 50%)

HSL([value],[value],[value])

.demo {
	*color: hsl(180, 50%, 50%)
}
HWB
Chú ý thuộc tính này rất mới chỉ hỗ trợ CSS4

HWB là viết tắt của từ "Hue-Whiteness-Blackness".
Xác định màu theo HWB là sự kết hợp của 3 yếu tố cơ bản: mức độ về màu sắc, độ trắng, độ đen
Cách viết: hwb(giá trị 1, giá trị 2, giá trị 3)
Với giá trị Hue từ 0 tới 360.
Với giá trị Whiteness từ 0% tới 100%.
Với giá trị Blackness từ 0% tới 100%.
Ví dụ: hwb(60, 60%, 0)

HWB([value],[value],[value])

.demo {
	*color: hwb(60, 60%, 0)
}
CMYK
Chú ý thuộc tính này rất mới chỉ hỗ trợ CSS4

CMYK là viết tắt của từ "CYAN-MAGENTA-YELLOW-BLACK".
Xác định màu theo CMYK là sự kết hợp của 4 màu cơ bản: Màu lục lam, màu tím, vàng, đen
Cách viết: cmyk(giá trị 1, giá trị 2, giá trị 3, giá trị 4)
Với giá trị Cyan từ 0% tới 100%.
Với giá trị Magenta từ 0% tới 100%.
Với giá trị Yellow từ 0% tới 100%.
Với giá trị Black từ 0% tới 100%.
Ví dụ: cmyk(100%, 0%, 0%, 0%)

CMYK([value],[value],[value],[value])

.demo {
	*color: cmyk(100%, 0%, 0%, 0%)
}
Name

Cách viết: tên màu được viết theo tiếng anh.
Ví dụ: blue

[name]

.demo {
	*color: green
}
HomeNext
TOP