Chuyển đổi màu RGBA thành mã màu HTML

Question

Tôi có bộ chọn màu trong ứng dụng của mình mà người dùng có thể sử dụng để chọn màu của các đối tượng nhất định mà ứng dụng xuất ra. Bộ chọn màu xuất ra màu được chọn theo định dạng RGBA. Tuy nhiên, tôi cần mã màu HTML. Tôi cần để có thể chuyển đổi RGBA, mà không biết màu trước, HTML và sử dụng nó như một chuỗi sau đó. Tôi sẽ đi đâu để tới đó?

Answer 1

RGBA được natively hỗ trợ bởi CSS3:

div { 
    background: rgba(200, 54, 54, 0.5); 
} 

Firefox, Safari, Chrome, IE9 và Opera trình duyệt tất cả các hỗ trợ RGBA. IE cũ hơn không hỗ trợ nó.

May mắn thay, bạn có thể chỉ định màu RGBA cho các trình duyệt hỗ trợ nó và thay thế cho các trình duyệt không sử dụng. Kiểm tra này link cho một howto tuyệt vời.

Đây là hai lựa chọn: - từ liên kết -

1. té ngửa ra COLOR RẮN: Cho phép trình duyệt để quay lại sử dụng một màu khi opacity là không có sẵn. Các

h1 { 
    color: rgb(127, 127, 127); 
    color: rgba(0, 0, 0, 0.5); //for modern browsers only 
} 

2. té ngửa ra Một PNG: Trong trường hợp bạn đang sử dụng tính minh bạch trên background-color (mặc dù không phải trên biên giới hoặc văn bản) nó có thể quay lại sử dụng một PNG với alpha kênh để có được hiệu ứng tương tự. Điều này ít linh hoạt hơn việc sử dụng CSS vì bạn sẽ cần phải tạo một PNG mới cho mỗi mức độ minh bạch cần thiết, nhưng nó có thể là một giải pháp hữu ích.

h1 { 
    background: transparent url(imageName.png); 
    background: rgba(0, 0, 0, 0.5) none; //for modern browsers only 
} 

Những gì tôi đang cố gắng để nói là bạn không cần mã màu HTML, bạn chỉ cần thêm css tài sản rgba - với javascript hoặc jquery - sau khi bạn nhấc màu sắc và tôi nghĩ rằng bạn đang làm xong.

Hy vọng điều đó sẽ hữu ích.

Answer 2

Nếu bạn đang tìm kiếm một chuyển đổi thực tế (trong đó nội dung của câu hỏi của bạn theo nghĩa đen yêu cầu) từ rgb (a) để hex trong JavaScript:

red = green = blue = 255; 
hex = '#' + 
    ("0" + (red).toString(16)).slice(-2) + 
    ("0" + (green).toString(16)).slice(-2) + 
    ("0" + (blue).toString(16)).slice(-2); 

Có tất nhiên không có alpha tương đương, nhưng bạn có thể đặt độ mờ (và/hoặc giá trị cụ thể của trình duyệt -opacity cho hỗ trợ trình duyệt cũ hơn).