Một trong những điều quan trọng trong thiết kế đó chính là mã màu. Vì vậy mã màu trong suốt css là một yếu tố để chúng ta có thể thuận tiện khi thiết kế. Trong bài viết này, darkedeneurope.com.com sẽ viết bài viết tổng hợp mã màu trong suốt css mới nhất 2020.Bạn đang xem: Mã màu html trong suốt

*

Tổng hợp mã màu trong suốt css mới nhất 2020

1. RGBA Colors

RGBA color là một phần mở rộng của RGB color với thành phần bổ sung là chỉ số opacity. Cú pháp của loại màu này là rgba(reg, green, blue, alpha) trong đó alpha có giá trị từ 1>, giá trị càng gần về 0 thì màu sắc càng mờ và giá trị 1 là màu đậm nhất.

Đang xem: Mã màu trong suốt css

Gợi ý: Màu đỏ có độ alpha tăng dần

HSL là chữ viết tắt của Hue, Saturation và Lightness, ký hiệu của nó là hsl(hue, saturation, lightness).

Trong đó:

Hue có trị giá từ 0 tới 360, trị giá 0 hoặc 360 là màu đỏSaturation có giá trị % (%) và cao nhất là 100% (full)Lightness cũng có giá trị phần trăm, 0% là màu đen và 100% là màu trắng.

Ví dụ: Mã màu đỏ giảm dần,

HSLA Color là một phần mở rộng của HSL color với nguyên nhân bổ sung là giá trị của alpha (opacity color).

Cú pháp của loại màu này là hsla(hue, saturation, lightness, alpha). Trong đó:

Hue có giá trị từ 0 tới 360, giá trị 0 hoặc 360 là màu đỏSaturation có giá trị phần trăm (%) và cao nhất là 100% (full)Lightness cũng có trị giá tỷ lệ, 0% là màu đen và 100% là màu trắng.Alpha alpha có trị giá từ 1>, trị giá càng gần về 0 thì màu sắc càng mờ và trị giá 1 là màu đậm nhất.

Xem thêm: Bí Quyết Học Tiếng Anh Giao Tiếp Hiệu Quả, 6 Mẹo Học Tiếng Anh Giao Tiếp Hiệu Quả

Ví dụ:

Một câu hỏi được đặt ra là trường hợp ta sử dụng mã màu dạng HSL thì làm sao để để bổ sung giá trị của alpha? Câu trả lời là bạn sẽ sử dụng thuộc tính opacity để sử dụng việc này.

tuy nhiên nó sẽ có yếu điểm là text cũng sẽ bị mờ theo, cho nên nếu trường hợp background của bạn có trong suốt thì nên sử dụng mã HSLA.

Gợi ý:

Đây là loại mã màu thông dụng nhất k chỉ ở CSS mà trong các tool thiết kế như Photoshop cũng dùng.

Cấu trúc của nó giống như sau: #xxxxxx. Trong đó dấu # là khai báo loại mã màu HEX và xxxxxx là các trị giá đủ sức chữ cái hoặc chữ số.

ví dụ điển hình nhất là mã màu trắng là #ffffff và mã màu đen là #000000.

Xem thêm: Sửa Lỗi Cleaning Web Replacement Ricoh Bã¡O LỗI Cleaning Web

Sau đây là bảng mã màu cho bạn tham khảo:

EEEEEE DDDDDD CCCCCC BBBBBB AAAAAA 999999
888888 777777 666666 555555 444444 333333
222222 111111 000000 FF0000 EE0000 DD0000
CC0000 BB0000 AA0000 990000 880000 770000
660000 550000 440000 330000 220000 110000
FFFFFF FFFFCC FFFF99 FFFF66 FFFF33 FFFF00
CCFFFF CCFFCC CCFF99 CCFF66 CCFF33 CCFF00
99FFFF 99FFCC 99FF99 99FF66 99FF33 99FF00
66FFFF 66FFCC 66FF99 66FF66 66FF33 66FF00
33FFFF 33FFCC 33FF99 33FF66 33FF33 33FF00
00FFFF 00FFCC 00FF99 00FF66 00FF33 00FF00
FFCCFF FFCCCC FFCC99 FFCC66 FFCC33 FFCC00
CCCCFF CCCCCC CCCC99 CCCC66 CCCC33 CCCC00
99CCFF 99CCCC 99CC99 99CC66 99CC33 99CC00
66CCFF 66CCCC 66CC99 66CC66 66CC33 66CC00
33CCFF 33CCCC 33CC99 33CC66 33CC33 33CC00
00CCFF 00CCCC 33CC66 33CC33 00CC99 00CC66
00CC33 00CC00 FF99FF FF99CC FF9999 FF9966
FF9933 FF9900 CC99FF CC99CC CC9999 CC9966
CC9933 CC9900 9999FF 9999CC 999999 999966
999933 999900 6699FF 6699CC 669999 669966
669933 669900 3399FF 3399CC 339999 339966
339933 339900 0099FF 0099CC 009999 009966
009933 009900 FF66FF FF66CC FF6699 FF6666
FF6633 FF6600 CC66FF CC66CC CC6699 CC6666
CC6633 CC6600 9966FF 9966CC 996699 996666
996633 996600 6666FF 6666CC 666699 666666
666633 666600 3366FF 3366CC 336699 336666
336633 336600 0066FF 0066CC 006699 006666
006633 006600 FF33FF FF33CC FF3399 FF3366
FF3333 FF3300 CC33FF CC33CC CC3399 CC3366
CC3333 CC3300 9933FF 9933CC 993399 993366
993333 993300 6633FF 6633CC 663399 663366
663333 663300 3333FF 3333CC 333399 333366
333333 333300 0033FF FF3333 0033CC 003399
003366 003333 003300 FF00FF FF00CC FF0099
FF0066 FF0033 FF0000 CC00FF CC00CC CC0099
CC0066 CC0033 CC0000 9900FF 9900CC 990099
990066 990033 990000 6600FF 6600CC 660099
660066 660033 660000 3300FF 3300CC 330099
330066 330033 330000 0000FF 0000CC 000099
000066 000033 00FF00 00EE00 00DD00 00CC00
00BB00 00AA00 009900 008800 007700 006600
005500 004400 003300 002200 001100 0000FF
0000EE 0000DD 0000CC 0000BB 0000AA 000099
000088 000077 000055 000044 000022 000011

6. Color

NameĐây là cú pháp đơn giản nhất để xác định màu trong CSS. bên cạnh đó không khuyên rằng bạn sử dụng bởi vì nó chẳng phải là một dạng phù hợp của color và nó cũng không chứa đầy đủ màu.

Gợi ý:

black : màu đenred : màu đỏpink : màu hồngwhite : màu trắngyellow : màu vàng

7. Lời kết

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *