Tổng Hợp Mã Màu Trong Suốt Css Mới Nhất 2020

Rate this post

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ổ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

123456789101112131415

#redbackground-color: rgba(255,0,0,1);#greenbackground-color: rgba(0,255,0,1);#bluebackground-color: rgba(0,0,255,1);#graybackground-color: rgba(192,192,192,1);#yellowbackground-color: rgba(255,255,0,1);

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ị 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,

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

123456

#green background-color:hsl(120,100%,50%);#light-green background-color:hsl(120,100%,75%);#dark-green background-color:hsl(120,100%,25%);#pastel-green background-color:hsl(120,60%,70%);#violet background-color:hsl(290,100%,50%);#pastel-violet background-color:hsl(290,60%,70%);

3. HSLA Colors

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ừ [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

123456

#green background-color:hsla(120,100%,50%,0.3);#light-green background-color:hsla(120,100%,75%,0.3);#dark-green background-color:hsla(120,100%,25%,0.3);#pastel-green background-color:hsla(120,60%,70%,0.3);#violet background-color:hsla(290,100%,50%,0.3);#pastel-violet background-color:hsla(290,60%,70%,0.3);

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 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 ý:

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

123456

#green background-color:hsl(120,100%,50%); opacity: 0.3#light-green background-color:hsl(120,100%,75%); opacity: 0.3#dark-green background-color:hsl(120,100%,25%); opacity: 0.3#pastel-green background-color:hsl(120,60%,70%); opacity: 0.3#violet background-color:hsl(290,100%,50%); opacity: 0.3#pastel-violet background-color:hsl(290,60%,70%); opacity: 0.3

5. HEX Colors

Đâ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.

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 đ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 là nếu dùng màu background có trong suốt thì nên sử dụng định hướng 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 bởi vì nó khó cai quản và ko đúng phù hợp.

>> Top 10 website thiết kế logo online mới nhất 2020

>>> Cách thiết kế logo online bằng canvas mới nhất 2020

Nguồn: https://freetuts.net/

Tags: background trong suốtbảng mã màu trong excelbảng màu chuẩncode mau trong htmllấy mã màu rgbMã màu trong suốt cssmã màu trong suốt rgbmã màu trong suốt rgbamàu chữ trong css