Plugin này tính toán các màu chủ đạo trong hình ảnh và thay đổi lớp cho thành phần văn bản tương ứng. http. //www. kennethcachia. com/kiểm tra lý lịch/

Tôi đang tìm cách phát hiện màu CSS của nền. Cụ thể, tôi có một vị trí. đã sửa;

Tương phản. js là thư viện thao tác màu JavaScript thuần túy giúp có thể tự động thay đổi màu phông chữ dựa trên nền của trang hoặc thành phần – bao gồm cả hình nền phản hồi

Bạn cũng có thể đặt giá trị bw thành true như invertColor(hex, true) và trong trường hợp này, màu phông chữ sẽ chuyển đổi giữa đen/trắng hoặc bất kỳ cặp màu nào bạn đặt dựa trên nền phía sau phần tử đích

Kích thước tập tin. 2. 74 KBViews Total. 3633Cập nhật lần cuối. 18/09/2020 00. 10. 00 UTC Ngày Xuất bản. 09/03/2020 01. 04. 23 UTCTrang web chính thức. Tới trang webGiấy phép. MIT

Tải xuống bản trình diễn

Thêm trong danh mục này

Xem các plugin được đề xuất

TOP 100 Plugin jQuery 2022

Chrome, IE10+, FireFox, Opera, Safari#màu#nền

Một plugin jQuery thông minh dành cho Khả năng truy cập Độ tương phản và Màu sắc tự động thay đổi màu văn bản dựa trên độ sáng của màu nền

Đặc trưng

• Thay đổi màu phông chữ thành Trắng khi màu nền tối
• Thay đổi màu phông chữ thành Đen khi màu nền sáng

Làm thế nào nó hoạt động

• Tính độ sáng của màu nền để biết màu đó sáng hay tối
• Kiểm tra xem độ sáng là >50% hay <50%
• Nếu >50% thì đổi màu chữ thành màu đen
• Nếu không, hãy đặt màu văn bản thành màu trắng

Xem thêm

• Plugin jQuery để thay đổi màu văn bản dựa trên hình nền - invertImgText. js
• Khác văn bản và màu nền với jQuery - AutoTextColor
• Tự động thay đổi màu phông chữ dựa trên nền – Độ tương phản. js
• Đảo ngược màu văn bản dựa trên màu nền – TEXTColor

Làm thế nào để sử dụng nó

1. Chỉ định màu nền bằng mô hình màu RGB

  
Text here



  
Text here

2. Tải tập lệnh adjust-text-to-background.js sau jQuery và plugin sẽ thực hiện phần còn lại

Plugin jQuery tuyệt vời này được phát triển bởi Hkozacz. Để biết thêm Cách sử dụng nâng cao, vui lòng kiểm tra trang demo hoặc truy cập trang web chính thức

Với bất kỳ màu nền nào, màu nền trước cung cấp tỷ lệ tương phản cao nhất sẽ là màu trắng hoặc đen và không có một số màu xám ở giữa

Phải nói rằng, màu đen hoặc trắng thuần túy có vẻ hơi gắt và không dễ chịu cho mắt - quá nhiều độ tương phản có thể gây mất tập trung cho một số người dùng. Vì vậy, giả sử cho mục đích của câu trả lời này rằng màu đen có nghĩa là màu đen nhạt (ví dụ: #101010) và màu trắng có nghĩa là màu trắng nhạt (ví dụ: #f0f0f0), thì câu hỏi sẽ trở thành "màu đen hay màu trắng tốt hơn cho màu nền của tôi"?

Trong một câu trả lời khác, tôi đi vào chi tiết hơn với một số ảnh chụp màn hình ví dụ điển hình về tỷ lệ tương phản thay đổi như thế nào đối với các phạm vi nền

Tóm lại, đối với hai màu đã cho bất kỳ, có một công thức tính tỷ lệ tương phản

Tỷ lệ tương phản được tính là (L1 + 0. 05) / (L2 + 0. 05), ở đâu

L1 là. độ chói tương đối của màu sáng hơn, và

L2 là độ sáng tương đối của màu đậm hơn

Trong trường hợp của bạn, bạn chỉ cần tính tỷ lệ tương phản cho màu trắng và màu bg của bạn;

Lấy cảm hứng từ bài đăng tuyệt vời này của @dailydevtips1 về cách tạo màu ngẫu nhiên với Vanilla Javascript, tôi quyết định viết một bài tiếp theo để đảm bảo rằng, màu ngẫu nhiên cũng có màu phông phù hợp

Tạo màu nền ngẫu nhiên

Xin nhắc lại, chúng tôi đang tạo số thập lục phân ngẫu nhiên với chức năng này

môn Toán. tầng (Toán. ngẫu nhiên()*10000000). toString(16)

Trên thực tế, chúng ta cũng có thể sử dụng 16777215 làm hệ số nhân, đây là số thập phân tối đa có thể có cho một màu (có nghĩa là 16777215 === #FFFFFF)

Kết quả của công thức này là một số thập lục phân có 6 chữ số. Giống như màu RGB, nó bao gồm ba phần

• Hai chữ số đầu tiên đại diện cho màu đỏ
• chữ số ba và bốn đại diện cho màu xanh lá cây
• hai chữ số cuối đại diện cho màu xanh

Xác định màu phông chữ

Để xác định đâu là màu phông chữ tốt nhất có thể cho một nền nhất định, chúng ta có thể làm theo thuật toán được đề xuất trên www. w3. tổ chức

Độ sáng màu được xác định theo công thức sau.
((Giá trị đỏ X 299) + (Giá trị xanh X 587) + (Giá trị xanh X 114)) / 1000

Chuyển đổi công thức này sang Javascript có thể trông giống như thế này

const red = parseInt(color.substring(0,2),16)
const green = parseInt(color.substring(2,4),16)
const blue = parseInt(color.substring(4,6),16)
const brightness = red*0.299 + green*0.587 + blue*0.114

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ chúng ta có một giá trị số nguyên cho độ sáng cảm nhận được của màu nền

Chúng tôi lấy từng màu từ màu ngẫu nhiên được tạo trước đó bằng cách sử dụng substring và chuyển đổi hệ thập lục phân thành số thập phân bằng cách sử dụng parseInt()

Vì biến brightness của hàm đại diện cho độ sáng của màu nên bây giờ chúng ta có thể sử dụng nó để xác định màu phông chữ. Tôi thấy rằng 180 là ngưỡng tốt để chuyển từ trắng sang đen, nhưng có lẽ tốt nhất bạn nên thử nghiệm một chút