TOP 5 mã màu trong suốt trong CSS chi tiết nhất

Bạn có biết, một trong những điều quan trọng nhất trong việc học thiết kế là mã hóa màu sắc. Vì vậy, mã màu trong suốt trong CSS là một trong những yếu tố chúng ta cần nắm rõ để tiện cho việc thiết kế. Trong bài viết hôm nay, chúng tôi sẽ tổng hợp những mã màu trong suốt cao cấp mới nhất trong năm cho các bạn.

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

màu RGBA

Mã màu trong suốt đầu tiên chúng tôi muốn tiết lộ với bạn là mã màu RGBA Colors. Nó được sử dụng theo công thức sau:

rgb (đỏ, lục, lam)

Mỗi tham số (đỏ, lục và lam) xác định cường độ của màu từ 0 đến 255.

Ví dụ: rgb(255, 0, 0) xuất hiện dưới dạng màu đỏ vì màu đỏ được đặt thành giá trị cao nhất (255) và các giá trị khác được đặt thành 0.

Để hiển thị màu đen, đặt tất cả các tham số màu thành 0, như sau: rgb(0, 0, 0).

Để hiển thị màu trắng, đặt tất cả các tham số màu thành 255, như sau: rgb(255, 255, 255).

Cụ thể hơn, giá trị màu RGBA là một phần mở rộng của giá trị màu RGB với một kênh alpha – chỉ định độ mờ cho một màu.

Giá trị màu RGBA được chỉ định bởi:

rgba (đỏ, lục, lam, alpha)

Tham số alpha là một số từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn không trong suốt).

>>> Xem ngay: Cách tạo màu Pantone cho thiết kế đẹp nhất theo xu hướng

Mã màu RGBA

màu HSL

Đây là một mã màu trong suốt khác mà bạn cần hiểu. Các giá trị màu HSL được hỗ trợ trong IE9+, Firefox, Chrome, Safari và Opera 10+. HSL là viết tắt của Hue, Saturation và Lightness. Màu sắc là một mức độ trên thang màu từ 0 đến 360. 0 là màu đỏ, 120 là màu lục, 240 là màu lam.

Giá trị màu HSL được chỉ định bằng: .hsl (màu sắc, độ bão hòa, độ sáng)

– Độ bão hòa là giá trị phần trăm, 0% có nghĩa là thang độ xám và 100% là màu đầy đủ.

– Độ sáng cũng là một giá trị phần trăm, 0% là màu đen và 100% là màu trắng.

– Độ bão hòa: Độ bão hòa có thể được mô tả là cường độ của một màu. Ví dụ: màu tinh khiết 100%, không có sắc xám. 50% là 50% màu xám, nhưng bạn vẫn có thể nhìn thấy màu sắc. 0% toàn màu xám, bạn không thấy bất kỳ màu nào khác.

Minh họa mã màu HSL

màu HSLA

HSLA cũng là mã màu trong suốt phổ biến được sử dụng trong năm 2020. Giá trị màu HSLA là phần mở rộng của giá trị màu HSL với kênh Alpha – quy định độ mờ cho một màu.

Giá trị màu HSLA được chỉ định bởi:

hsla (màu sắc, độ bão hòa, mật độ, alpha)

Tham số alpha là một số từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn không trong suốt).

ĐỘ Mờ

Khi bạn sử dụng thuộc tính Opacity để thêm độ trong suốt cho nền của phần tử, tất cả phần tử con của nó cũng trở nên trong suốt. Điều này có thể làm cho văn bản bên trong một phần tử hoàn toàn trong suốt khó đọc. Nếu bạn không muốn áp dụng độ mờ cho các phần tử con, hãy sử dụng các giá trị màu RGBA.

>>> Xem ngay: Bảng màu CMYK là gì? Chuyển đổi từ RGB sang CMYK

màu lục giác

Đây là mã màu trong suốt được rất nhiều người lựa chọn không chỉ trong CSS mà chúng ta có thể thấy nó trong bất kỳ công cụ chỉnh sửa ảnh nào như Photoshop. Bộ Color-hex cung cấp thông tin màu bao gồm các màu (RGB, HSL, HSV và CMYK). Các màu ba màu, đơn sắc và tương tự được tính toán trên trang tô màu.

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

Cách xác định giá trị của màu thông qua Chrome

Nếu bạn đang lướt Internet bằng máy tính, bạn thấy một phần nào đó của từ có màu rất đẹp và bạn muốn sử dụng giá trị màu của nó, ngay sau đây Chaolong TV sẽ hướng dẫn bạn cách lấy mã màu trong suốt của phần đó:

– Đầu tiên, bạn nhấn F12 hoặc Ctrl Shift C tại trang web chứa màu muốn xác nhận, trong menu chính chọn tab Elements, sau đó chọn tab Styles.

Chọn tab Thành phần

– Nhìn vào nhóm bên phải, bạn sẽ thấy có một số định dạng. Di chuyển con trỏ đến góc bên phải ở bất kỳ định dạng nào, nó sẽ tiếp tục hiển thị các tùy chọn. Chọn Add Color và nhấp chuột trái vào bất kỳ đâu trên trang Web, giá trị màu đặt tại vị trí bạn muốn biết sẽ xuất hiện bên trong khung.

Di chuột vào vùng khoanh tròn

Như vậy là chúng tôi đã bật mí cho các bạn mã màu trong suốt trong css và cách lấy mã màu bất kỳ trên web.

Màu lấy từ web

Chaolong TV đã giới thiệu cho bạn mã màu css trong suốt được sử dụng nhiều nhất vào năm 2021. Nếu định sử dụng màu nền trong suốt, bạn nên sử dụng hướng mà chúng tôi đã khám phá là RGBA VÀ HSLA. Tôi hy vọng bài viết này hữu ích cho bạn.

Nhãn:
thiết kế web