Màu mã hex CSS với giá trị alpha
Trong CSS, có một số định dạng cho màu sắc được dùng . Những cái phổ biến bao gồm RGB, RGBA, mã hex và HSL. Ở đây, ta sẽ xem xét các mã màu hex (thập lục phân) và đặc biệt xem xét việc thay đổi độ trong suốt của màu bằng cách đưa vào giá trị alpha.
Số thập lục phân là gì?
Trước khi đến với các mẹo dành riêng cho CSS, trước tiên, ta hãy xem lại ý nghĩa của giá trị thập lục phân.
Từ “hệ thập lục phân” dùng để chỉ một giá trị số sử dụng 16 làm cơ số thay vì 10. Sử dụng cơ số 10 là điều mà hầu hết mọi người quen dùng; sau 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 là 10. Nói cách khác, một chữ số chỉ có 10 giá trị có thể có (0 đến 9), và sau đó nó phải tăng lên hai chữ số (10).
Một giá trị thập lục phân có thể có 16 giá trị cho mỗi chữ số trong một số:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F Trên thực tế, nó nghĩa là các số có nhiều chữ số có nhiều sự kết hợp có thể hơn. Giá trị hai chữ số trong cơ số 10 có thể có 100 kết hợp khả dĩ (00, 01, 02… 66, 67, 68… 98, 99).
Tuy nhiên, việc sử dụng giá trị thập lục phân có hai chữ số có nhiều cách kết hợp hơn. Vì mỗi chữ số có thể có 16 giá trị có thể có, nên tổng số kết hợp có thể có cho một số có hai chữ số là 16 x 16 hoặc 256 giá trị có thể.
Ví dụ: đây là tất cả các giá trị thập lục phân hợp lệ:
00, 01, 1D, 9D, F5, 99, E4, CC Ta sẽ để nó ở đó cho phần toán học. Hãy chuyển sang CSS.
Sử dụng giá trị thập lục phân trong CSS
Khi tạo kiểu một phần tử trong CSS, ta thường cần cập nhật các màu liên quan đến nó. Điều đó có thể bao gồm color phông chữ, color background-color border-color , v.v.
Để tạo màu tùy chỉnh, ta có thể sử dụng kết hợp các số thập lục phân được mô tả ở trên để tạo mã hex, đại diện cho các màu cụ thể.
Mã hex CSS không phân biệt chữ hoa chữ thường, vì vậy bạn có thể sử dụng các giá trị viết hoa hoặc viết thường. Thường thì sẽ có một ưu tiên trong cơ sở mã để có tính nhất quán.
Nhưng Đầu tiên, Màu được Đặt tên trong CSS
Cách đơn giản nhất để đặt màu là chỉ sử dụng các màu được đặt tên. Màu được đặt tên trong CSS là tên màu hợp lệ được dùng trực tiếp trong các kiểu CSS của bạn. Ví dụ: nếu ta muốn văn bản tiêu đề của bạn có màu đỏ, theo nghĩa đen, ta có thể viết red như vậy:
h1 { color: red; } Có khoảng 140 màu được đặt tên trong CSS (như red , blue , lavender , v.v.) được dùng để tránh tìm ra những thứ như mã hex.
Vì vậy, tại sao sử dụng mã hex? Đơn giản, có nhiều tùy chọn khác nếu bạn muốn thực sự tùy chỉnh bảng màu của ứng dụng của bạn ! Ngoài ra, bạn có thể thay đổi độ trong suốt dễ dàng hơn.
Mã Hex (Hệ thập lục phân) trong CSS không có giá trị Alpha
Định dạng của mã hex CSS là #RRGGBB . Các chữ cái đề cập đến màu đỏ ( RR ), màu xanh lá cây ( GG ) và màu xanh lam ( BB ), do đó bạn có thể nghĩ giá trị 6 ký tự là ba số thập lục phân có hai chữ số; một cho mỗi màu trong ba màu.
Đừng quên: trong CSS, bạn cần sử dụng ký hiệu bảng Anh / băm (#) trước mã hex của bạn để mã hợp lệ.
Bây giờ ta đã biết định dạng của bạn ( #RRGGBB ), hãy xem một số ví dụ về màu CSS ở định dạng thập lục phân của chúng.
Mỗi màu bạn chọn sẽ là sự kết hợp của một giá trị đỏ, lục và lam. Giá trị thấp nhất ( 00 ) sẽ là version màu tối nhất (gần với màu đen nhất) và giá trị cao nhất ( FF ) sẽ gần với màu trắng nhất. Nếu ta muốn chỉ có một trong những màu đó được thể hiện trong mã hex của bạn , ta có thể đặt các màu khác thành giá trị thấp nhất ( 00 ).
Giả sử ta muốn màu đỏ tươi nhất mà không có màu xanh lá cây hoặc xanh lam trong đó. Ta có thể đặt giá trị màu đỏ ( RR ) của bạn thành giá trị cao nhất có thể ( FF ). Vì ta không muốn bất kỳ màu xanh lá cây hoặc xanh lam nào trong đó, ta có thể đặt các giá trị xanh lục ( GG ) và xanh lam ( BB ) mỗi giá trị thành 00 (giá trị thấp nhất).
h1 { color: #FF0000; // bright red } Điều này sẽ giống như:
Tôi đỏ tươi!
Vì các số thập lục phân ở cơ số 16 nên giá trị thấp nhất của số có hai chữ số là 00 và giá trị cao nhất là FF. Giá trị thấp nhất sẽ có nhiều màu đen nhất trong đó.
Tương tự, ta có thể nói rằng ta không muốn có màu nào, trong trường hợp này sẽ làm cho màu đen.
h1 { color: #000000; // black } Nếu ta đặt tất cả các màu ở giá trị cao nhất của chúng, ta nhận được màu trắng.
h1 { color: #FFFFFF; // white } Từ đó, bất kỳ sự kết hợp nào khác sẽ cung cấp cho bạn toàn bộ phổ tùy chọn màu sắc.
Đừng lo lắng về việc học cách tự chọn các giá trị thập lục phân. Có rất nhiều tài nguyên để chọn màu sẽ thực hiện chuyển đổi hệ thập lục phân cho bạn!
Thêm giá trị Alpha vào mã Hex của bạn
Bây giờ ta đã biết mã hex là gì, hãy xem xét việc thay đổi độ trong suốt của màu sắc của ta .
Giả sử ta muốn có màu xanh lam khá trong suốt. Đầu tiên ta có thể chọn màu xanh lam:
h1 { color: #0080FF; // cornflower blue } Màu này sẽ giống như sau:
Tôi màu xanh!
Bây giờ, giả sử ta muốn văn bản của bạn là nửa trong suốt, ta có thể thay đổi độ trong suốt bằng cách thêm hai số nữa vào giá trị thập lục phân ( còn gọi là giá trị alpha).
h1 { color: #0080FF80; // transparent blue } Bây giờ màu của ta sẽ giống như sau:
Tôi trong suốt màu xanh!
Chờ đã, cái gì?
Vậy, chuyện gì đang xảy ra ở đây? Hãy phá vỡ nó.
Sử dụng giá trị alpha để cập nhật độ trong suốt của màu sẽ thay đổi định dạng mã hex từ #RRGGBB thành #RRGGBBAA (đỏ, lục, lam, alpha). Sáu giá trị đầu tiên (màu đỏ, xanh lục và xanh lam) giữ nguyên hoàn toàn. Sự khác biệt duy nhất là hai giá trị cuối cùng ( AA ).
Giá trị AA trong #RRGGBBAA có thể nằm trong repository ảng từ giá trị thấp nhất có thể ( 00 ) đến giá trị cao nhất có thể ( FF ). Mức thấp nhất sẽ làm cho màu trong suốt hoàn toàn, nghĩa là bạn sẽ không nhìn thấy nó nữa. Giá trị cao nhất sẽ làm cho nó hoàn toàn không trong suốt, đây là giá trị mặc định cho mã hex.
Giá trị alpha ở định dạng thập lục phân có thể hơi khó hiểu vì thật khó để hình dung giá trị cơ sở 16 cho độ trong suốt thực sự sẽ như thế nào. Tuy nhiên, lợi ích là nếu bạn đã sử dụng mã hex trong cơ sở mã của bạn , bây giờ bạn có thể cập nhật chúng để thay đổi độ trong suốt! Không cần thay đổi định dạng màu.
So sánh mã Hex + Định dạng Alpha với RGBA
Nếu bạn đã phải đặt độ trong suốt của một màu trước đây, bạn có thể biết có một số tùy chọn khác nhau. Ví dụ: định dạng màu RGBA là một tùy chọn thay vì mã hex có giá trị alpha. Định dạng RGBA trông giống như sau:
h1 { color: rgba(256, 0, 0, 0.5); // transparent red } Mỗi giá trị màu (đỏ, lục, lam) ở định dạng RGBA (Đỏ, Xanh lục, Xanh lam, Alpha) có thể nằm trong repository ảng từ 0 đến 256. Tuy nhiên, không giống như mã hex, chỉ có 10 số cơ sở là hợp lệ (0, 1, 2… 255 (256). Đối với giá trị alpha, bất kỳ số nào từ 0 đến 1 đều hợp lệ. Hãy coi nó như một tỷ lệ phần trăm trong suốt: 0,5 là 50% trong suốt, 0,75 là 75% trong suốt, v.v. Con số này càng gần 1, màu sẽ càng mờ.
Nếu số 256 trông quen thuộc ở đây, hãy nhớ có 256 giá trị hợp lệ cho mỗi số thập lục phân có hai chữ số ( 16 x 16 ). Định dạng RGBA cũng chấp nhận 256 số hợp lệ (cộng với 0) cho mỗi giá trị màu đỏ, xanh lục và xanh lam. Điều đó làm cho mã hex và giá trị RGB / RGBA dễ dàng chuyển đổi!
Mẹo dành cho nhà phát triển của Chrome dành cho bộ chọn màu
Định dạng màu có thể đã đủ khó hiểu trước khi thêm giá trị alpha. Một mẹo nhanh để xem màu sắc của bạn ở các định dạng khác nhau là với Công cụ dành cho nhà phát triển của Chrome.
Sau khi bảng DevTools của bạn mở, hãy tìm màu mà bạn kiểm tra trong phần kiểu. Khi bạn tìm thấy nó, bạn có thể nhấp vào hộp bên trái của màu để chơi trực tiếp với nó. Bạn cũng có thể giữ SHIFT và nhấp vào hộp để chuyển qua các tùy chọn định dạng khác nhau với các giá trị được chuyển đổi chính xác.
(Ví dụ ở trên đang kiểm tra trang kết quả tìm kiếm của Google.)
Tài nguyên màu CSS
Đây là một công cụ tuyệt vời để chuyển đổi màu sắc sang tất cả các định dạng khác nhau. Nếu bạn tò mò về mã hex cho các màu có tên CSS là gì, hãy xem chúng tại đây .
tính tương thích của trình duyệt web
Hỗ trợ trình duyệt cho mã hex #RRGGBBAA là rất tốt. IE không hỗ trợ nó nhưng nếu không thì bạn nên được bảo hiểm. Kiểm tra Tôi có thể sử dụng để biết chi tiết nếu bạn tò mò.
Các tin liên quan
Thay đổi con trỏ chuột trong CSS bằng thuộc tính con trỏ2020-09-08
image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03
Tùy chỉnh gạch chân với trang trí văn bản trong CSS
2020-09-03
Giải thích về đơn vị CSS
2020-09-03
Cải thiện khả năng phản hồi bằng cách bọc linh hoạt trong CSS
2020-09-03
