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, cachthietkeweb.vn sẽ viết bài viết tổng hợp mã màu trong suốt css mới nhất 2020.
Tóm Tắ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ừ [0->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.
Gợi ý: Màu đỏ có độ alpha tăng dần
rgba ( 255, 0, 0, 0.1 ) ;
rgba ( 255, 0, 0, 0.2 ) ;
rgba ( 255, 0, 0, 0.3 ) ;
rgba ( 255, 0, 0, 0.4 ) ;
rgba ( 255, 0, 0, 0.5 ) ;
rgba ( 255, 0, 0, 0.6 ) ;
rgba ( 255, 0, 0, 0.7 ) ;
rgba ( 255, 0, 0, 0.8 ) ;
rgba ( 255, 0, 0, 0.9 ) ;
rgba ( 255, 0, 0, 1.0 ) ;
Gợi ýRUN
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
2. HSL Colors
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ị Tỷ Lệ, 0% là màu đen và 100% là màu trắng.
Ví dụ: Mã màu đỏ giảm dần,
hsl ( 0, 100 %, 10 % ) ;
hsl ( 0, 100 %, 20 % ) ;
hsl ( 0, 100 %, 30 % ) ;
hsl ( 0, 100 %, 40 % ) ;
hsl ( 0, 100 %, 50 % ) ;
hsl ( 0, 100 %, 60 % ) ;
hsl ( 0, 100 %, 70 % ) ;
hsl ( 0, 100 %, 80 % ) ;
hsl ( 0, 100 %, 90 % ) ;
hsl ( 0, 100 %, 100 % ) ;
ví dụRUN
1 2 3 4 5 6 |
|
3. HSLA Colors
HSLA Color là một phần lan rộng ra của HSL color với nguyên do bổ trợ 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ị Tỷ Lệ (%) và cao nhất là 100% (full)
- Lightness cũng có trị giá tỷ suất, 0% là màu đen và 100% là màu trắng.
- Alpha alpha có trị giá từ [0->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.
Ví dụ:
hsla ( 0, 100 %, 10 %, 0.3 ) ;
hsla ( 0, 100 %, 20 %, 0.3 ) ;
hsla ( 0, 100 %, 30 %, 0.3 ) ;
hsla ( 0, 100 %, 40 %, 0.3 ) ;
hsla ( 0, 100 %, 50 %, 0.3 ) ;
hsla ( 0, 100 %, 60 %, 0.3 ) ;
hsla ( 0, 100 %, 70 %, 0.3 ) ;
hsla ( 0, 100 %, 80 %, 0.3 ) ;
hsla ( 0, 100 %, 90 %, 0.3 ) ;
hsla ( 0, 100 %, 100 %, 0.3 ) ;
Gợi ýRUN
1 2 3 4 5 6 |
|
4. Opacity
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 thế nào để để bổ trợ giá trị của alpha ? Câu vấn đáp 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 vì thế 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 ý:
hsl ( 0, 100 %, 10 % ) ; opacity : 0.3 ;
hsl ( 0, 100 %, 20 % ) ; opacity : 0.3 ;
hsl ( 0, 100 %, 30 % ) ; opacity : 0.3 ;
hsl ( 0, 100 %, 40 % ) ; opacity : 0.3 ;
hsl ( 0, 100 %, 50 % ) ; opacity : 0.3 ;
hsl ( 0, 100 %, 60 % ) ; opacity : 0.3 ;
hsl ( 0, 100 %, 70 % ) ; opacity : 0.3 ;
hsl ( 0, 100 %, 80 % ) ; opacity : 0.3 ;
hsl ( 0, 100 %, 90 % ) ; opacity : 0.3 ;
hsl ( 0, 100 %, 100 % ) ; opacity : 0.3 ;
ví dụRUN
1 2 3 4 5 6 |
|
5. HEX Colors
Đây là loại mã màu thông dụng nhất k chỉ ở CSS mà trong những tool phong cách 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
.
Sau đây là bảng mã màu cho bạn tìm hiểu thêm :
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 đen
- red : màu đỏ
- pink : màu hồng
- white : màu trắng
- yellow : màu vàng
7. Lời kết
Qua bài này mình đã giới thiệu đa số các định hướng màu sắc có thể sử dụng trong CSS nói chung và trong CSS3 nói riêng.
Qua bài này ta cũng rút được kinh nghiệm tay nghề là nếu dùng màu background có trong suốt thì nên sử dụng xu thế màu RGBA hoặc HSLA. Thứ hai nữa là không nên dùng màu theo tên tiếng anh chính bới nó khó quản lý và ko đúng tương thích .
>> > Cách phong cách thiết kế logo trực tuyến bằng canvas mới nhất 2020
Nguồn : https://freetuts.net/
Source: https://final-blade.com
Category: Kiến thức Internet