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