Tôi biết bạn có thể viết ...

background-color: #ff0000;

... Nếu bạn muốn thứ gì đó màu đỏ.

Và bạn có thể viết ...

background-color: rgba(255, 0, 0, 0.5);

... Nếu bạn muốn một cái gì đó màu đỏ và mờ.

Có cách nào ngắn gọn để viết màu trong suốt một phần thập lục phân không? Tôi muốn một cái gì đó như:

background-color: #ff000088; <--- the 88 is the alpha

... hoặc là ...

background-color: #ff0000 50%;

Tôi đang nhận được tất cả các màu của mình theo hệ thập lục phân và việc phải chuyển đổi tất cả các màu thành tỷ lệ 0-255 thập phân là khó chịu.

Mô-đun màu CSS cấp 4 có thể sẽ hỗ trợ ký hiệu RGBA thập lục phân 4 và 8 chữ số!

Ba tuần trước (ngày 18 tháng 12 năm 2014) bản nháp của trình soạn thảo CSS Mô-đun cấp 4 đã được gửi cho Nhóm làm việc CSS W3C. Mặc dù trong tình trạng đó là rất nhiều nhạy cảm với sự thay đổi, phiên bản hiện tại của tài liệu ngụ ý rằng trong phần nào tương lai CSS gần sẽ hỗ trợ cả 4 và 8 chữ số ký hiệu thập lục phân RGBA.

Lưu ý: trích dẫn sau đây có các đoạn không liên quan bị cắt bỏ và nguồn có thể đã bị sửa đổi nhiều vào thời điểm bạn đọc bài này (như đã đề cập ở trên, đó là bản nháp của biên tập viên chứ không phải tài liệu hoàn chỉnh).
Nếu mọi thứ đã thay đổi nhiều, xin vui lòng để lại một bình luận cho tôi biết để tôi có thể cập nhật câu trả lời này!

§ 4.2. Các ký hiệu thập lục phân RGB: #RRGGBB

Cú pháp của a <hex-color>là <hash-token>mã thông báo có giá trị bao gồm 3, 4, 6 hoặc 8 chữ số thập lục phân . Nói cách khác, màu hex được viết dưới dạng ký tự băm, "#", theo sau là một số chữ số 0-9hoặc chữ cái a-f(trường hợp các chữ cái không quan trọng - #00ff00giống hệt #00FF00).

8 chữ số

6 chữ số đầu tiên được hiểu theo ký hiệu 6 ký tự. Cặp chữ số cuối cùng, được hiểu là số thập lục phân, chỉ định kênh alpha của màu, trong đó 00đại diện cho một màu hoàn toàn trong suốt và ffđại diện cho một màu hoàn toàn mờ đục.

Ví dụ 3
Nói cách khác, #0000ffccbiểu thị cùng màu với rgba(0, 0, 100%, 80%)(một màu xanh hơi trong suốt).

4 chữ số

Đây là một biến thể ngắn hơn của ký hiệu 8 chữ số, "mở rộng" theo cách tương tự như ký hiệu 3 chữ số. Chữ số đầu tiên, được hiểu là số thập lục phân, chỉ định kênh màu đỏ của màu, trong đó 0biểu thị giá trị tối thiểu và fđại diện cho mức tối đa. Ba chữ số tiếp theo tương ứng là các kênh màu lục, lam và alpha.

Điều này có ý nghĩa gì đối với tương lai của màu CSS?

Điều này có nghĩa là giả sử điều này không bị xóa hoàn toàn khỏi tài liệu cấp 4, chúng tôi sẽ sớm có thể xác định màu RGBA (hoặc màu HSLA, nếu bạn là một trong số những người đó ) ở định dạng thập lục phân trong các trình duyệt hỗ trợ Màu Cú pháp cấp 4 của mô-đun.

Thí dụ

elem {
    background: rgb(0, 0, 0);           /* RGB notation (no alpha). */
    background: #000;                   /* 3-digit hexadecimal notation (no alpha). */
    background: #000000;                /* 6-digit hexadecimal notation (no alpha). */
    background: rgba(0, 0, 0, 1.0);     /* RGBA notation. */

    /* The new 4 and 8-digit hexadecimal notation. */
    background: #0000;                  /* 4-digit hexadecimal notation. */
    background: #00000000;              /* 8-digit hexadecimal notation. */
}

Khi nào tôi có thể sử dụng điều này trong các sản phẩm của khách hàng?

Bỏ qua tất cả những trò đùa: hiện tại chỉ mới bắt đầu năm 2015, vì vậy những thứ này sẽ không được hỗ trợ trong bất kỳ trình duyệt nào trong một thời gian dài - ngay cả khi sản phẩm của bạn chỉ được thiết kế để hoạt động trên các trình duyệt cập nhật nhất mà bạn có thể không được nhìn thấy điều này trong hành động sản xuất bất cứ lúc nào sớm.

Xem hỗ trợ trình duyệt hiện tại cho ký hiệu màu #RRGGBBAA

Tuy nhiên, điều đó nói rằng, cách CSS hoạt động có nghĩa là chúng ta thực sự có thể bắt đầu sử dụng những thứ này ngay hôm nay! Nếu bạn thực sự muốn bắt đầu sử dụng chúng ngay bây giờ, miễn là bạn thêm lại bất kỳ trình duyệt không hỗ trợ nào sẽ chỉ cần bỏ qua các thuộc tính mới cho đến khi chúng được coi là hợp lệ:

figure {
  margin: 0;
  padding: 4px;
  
  /* Fall back (...to browsers which don't support alpha transparency). */
  background: #FEFE7F;
  color: #3F3FFE;
  
  /* Current 'modern' browser support. */
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
  
  /* Fall... foward? */
  background: #ffff007F; /* Or, less accurately, #ff08 */
  color: #0000ffbe;      /* Or #00fc */
}

<figure>Hello, world!</figure>

Miễn là bạn đang xem câu trả lời này trên trình duyệt hỗ trợ các thuộc tính backgroundvà colorCSS, <figure>phần tử trong đoạn trích trên sẽ trông rất giống với điều này:

Sử dụng phiên bản Chrome mới nhất trên Windows (v39.0.2171) để kiểm tra <figure>yếu tố của chúng tôi , chúng tôi sẽ thấy như sau:

Các rgba()giá trị thập lục phân 6 chữ số được ghi đè bởi các giá trị và các giá trị thập lục phân 8 chữ số của chúng tôi bị bỏ qua vì chúng hiện được coi là không hợp lệ bởi trình phân tích cú pháp CSS của Chrome. Ngay khi trình duyệt của chúng tôi hỗ trợ các giá trị 8 chữ số này, các giá trị này sẽ ghi đè lên các giá trị này rgba().

CẬP NHẬT 2018-07-04: Firefox, Chrome và Safari hiện đang hỗ trợ ký hiệu này, Edge vẫn còn thiếu nhưng có thể sẽ đi theo ( https://caniuse.com/#feat=css-rrggbbaa ).

Tôi tìm thấy câu trả lời sau khi đăng bài nâng cao cho câu hỏi. Lấy làm tiếc!

MS Excel đã giúp!

chỉ cần thêm tiền tố Hex vào giá trị màu hex để thêm alpha có độ mờ tương đương với giá trị%.

(trong rbga, độ mờ phần trăm được biểu thị dưới dạng thập phân như đã đề cập ở trên)

Opacity %   255 Step        2 digit HEX prefix
0%          0.00            00
5%          12.75           0C
10%         25.50           19
15%         38.25           26
20%         51.00           33
25%         63.75           3F
30%         76.50           4C
35%         89.25           59
40%         102.00          66
45%         114.75          72
50%         127.50          7F
55%         140.25          8C
60%         153.00          99
65%         165.75          A5
70%         178.50          B2
75%         191.25          BF
80%         204.00          CC
85%         216.75          D8
90%         229.50          E5
95%         242.25          F2
100%        255.00          FF

RGB='#ffabcd';
A='0.5';
RGBA='('+parseInt(RGB.substring(1,3),16)+','+parseInt(RGB.substring(3,5),16)+','+parseInt(RGB.substring(5,7),16)+','+A+')';

Xem tại đây http://www.w3.org/TR/css3-color/#rgba-color

Không thể, hầu hết có thể là do 0xFFFFFFFF lớn hơn giá trị tối đa cho số nguyên 32 bit

Chrome 52+ hỗ trợ alpha hex:

background: #56ff0077;

Sử dụng red, green, bluechuyển đổi sang RGBA:

background-color: rgba(red($color), green($color), blue($color), 0.2);

Tôi sợ điều đó là không thể. các rgbađịnh dạng mà bạn biết là người duy nhất.

Nếu bạn có thể sử dụng LESS, có chức năng fade.

@my-opaque-color: #a438ab;
@my-semitransparent-color: fade(@my-opaque-color, 50%);

background-color:linear-gradient(to right,@my-opaque-color, @my-semitransparent-color); 

// result: 
background-color: linear-gradient(to right, #a438ab, rgba(164, 56, 171, 0.5));

Hoàng tử quyến rũ:

Chỉ có trình duyệt internet explorer mới cho phép màu hex 4 byte ở định dạng ARGB, trong đó A là kênh Alpha. Nó có thể được sử dụng trong các bộ lọc gradient chẳng hạn:

filter  : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";

Trong đó dir có thể là: 1 (ngang) hoặc 0 (dọc) Và các chuỗi màu có thể là màu hex (# FFAAD3) hoặc màu hex argb (# 88FFAAD3).

Vâng, các ký hiệu màu sắc khác nhau là những gì bạn sẽ phải học.
Kuler cung cấp cho bạn một cơ hội tốt hơn để tìm màu sắc và trong nhiều ký hiệu.
Hex không khác với RGB, FF = 255 và 00 = 0, nhưng đó là những gì bạn biết. Vì vậy, theo một cách nào đó, bạn phải hình dung nó.
Tôi sử dụng Hex, RGBA và RGB. Trừ khi cần chuyển đổi hàng loạt, làm thủ công sẽ giúp bạn nhớ một số 100 màu lẻ và mã của chúng.
Để chuyển đổi hàng loạt, hãy viết một số tập lệnh giống như tập lệnh do Alarie đưa ra. Có một vụ nổ với màu sắc.

Trong Sass chúng ta có thể viết:

background-color: rgba(#ff0000, 0.5);

như nó đã được đề xuất trong biểu diễn Hex của một màu với kênh alpha?

tại sao không sử dụng background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */

nếu bạn nhắm mục tiêu một màu cho một văn bản hoặc có thể là một yếu tố, điều này sẽ dễ thực hiện hơn nhiều.