Saya tahu Anda dapat menulis ...

background-color: #ff0000;

... jika Anda menginginkan sesuatu yang berwarna merah.

Dan Anda dapat menulis ...

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

... jika Anda menginginkan sesuatu yang merah dan transparan.

Apakah ada cara singkat untuk menulis warna transparan sebagian dalam heksadesimal? Saya menginginkan sesuatu seperti:

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

... atau ...

background-color: #ff0000 50%;

Saya mendapatkan semua warna saya dalam heksadesimal, dan harus mengubah semuanya menjadi skala 0-255 desimal sangat mengganggu.

Modul Warna CSS Level 4 mungkin akan mendukung notasi RGBA heksadesimal 4 dan 8 digit!

Tiga minggu yang lalu (18 Desember 2014) draft editor Modul Warna CSS Level 4 diserahkan ke Kelompok Kerja CSS W3C. Meskipun dalam keadaan yang sangat rentan terhadap perubahan, versi dokumen saat ini menyiratkan bahwa dalam agak dekat CSS masa depan akan mendukung kedua 4 dan 8-digit notasi heksadesimal RGBA.

Catatan: kutipan berikut memiliki potongan yang tidak relevan dan sumbernya mungkin telah banyak dimodifikasi pada saat Anda membaca ini (seperti yang disebutkan di atas, itu adalah rancangan editor dan bukan dokumen yang diselesaikan).
Jika banyak hal berubah, silakan tinggalkan komentar untuk memberi tahu saya agar saya dapat memperbarui jawaban ini!

§ 4.2. Notasi heksadesimal RGB: #RRGGBB

Sintaks a <hex-color>adalah a<hash-token> token yang nilainya terdiri dari 3, 4, 6, atau 8 digit heksadesimal . Dengan kata lain, warna heksa ditulis sebagai karakter hash, "#", diikuti oleh sejumlah digit 0-9atau huruf a-f(huruf tidak penting - #00ff00identik dengan #00FF00).

8 digit

6 digit pertama ditafsirkan secara identik dengan notasi 6 digit. Pasangan digit terakhir, ditafsirkan sebagai angka heksadesimal, menentukan saluran alfa warna, di mana00 mewakili warna yang sepenuhnya transparan dan ffmewakili warna yang sepenuhnya buram.

Contoh 3
Dengan kata lain, #0000ffccmewakili warna yang sama dengan rgba(0, 0, 100%, 80%)(biru yang sedikit transparan).

4 digit

Ini adalah varian yang lebih pendek dari notasi 8-digit, "diperluas" dengan cara yang sama seperti notasi 3-digit. Digit pertama, ditafsirkan sebagai angka heksadesimal, menentukan saluran warna merah, di mana0 mewakili nilai minimum dan fmewakili maksimum. Tiga digit berikutnya masing-masing mewakili saluran hijau, biru, dan alfa.

Apa artinya ini untuk masa depan warna CSS?

Ini berarti bahwa dengan asumsi ini tidak sepenuhnya dihapus dari dokumen Level 4, kami akan segera dapat mendefinisikan warna RGBA kami (atau warna HSLA, jika Anda salah satu dari mereka ) dalam format heksadesimal di browser yang mendukung Warna Sintaks modul Level 4.

Contoh

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. */
}

Kapan saya bisa menggunakan ini dalam produk yang saya hadapi klien?

Semua lelucon samping: saat ini baru awal tahun 2015, jadi ini tidak akan didukung di browser apa pun untuk beberapa waktu - bahkan jika produk Anda hanya dirancang untuk bekerja pada browser yang paling mutakhir, Anda mungkin akan tidak melihat ini beraksi di browser produksi dalam waktu dekat.

Lihat dukungan browser saat ini untuk notasi warna #RRGGBBAA

Namun, yang mengatakan, cara kerja CSS berarti bahwa kita benar-benar dapat mulai menggunakannya hari ini! Jika Anda benar-benar ingin mulai menggunakannya sekarang, selama Anda menambahkan kembali, browser yang tidak mendukung akan mengabaikan properti baru sampai dianggap valid:

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>

Selama Anda melihat jawaban ini di peramban yang mendukung backgrounddan colorproperti dalam CSS, <figure>elemen dalam hasil potongan di atas akan terlihat sangat mirip dengan ini:

Menggunakan versi Chrome terbaru di Windows (v39.0.2171) untuk memeriksa <figure>elemen kami , kita akan melihat yang berikut:

Nilai heksadesimal 6 digit mundur dengan ditimpa oleh rgba()nilai, dan nilai heksadesimal 8 digit kami diabaikan karena saat ini dianggap tidak valid oleh parser CSS Chrome. Segera setelah browser kami mendukung nilai 8-digit ini, ini akan menimpanya rgba().

UPDATE 2018-07-04: Firefox, Chrome dan Safari mendukung notasi ini sekarang, Edge masih hilang tetapi mungkin akan mengikuti ( https://caniuse.com/#feat=css-rrggbbaa ).

Saya menemukan jawabannya setelah memposting peningkatan ke pertanyaan. Maaf!

MS Excel membantu!

cukup tambahkan awalan Hex ke nilai warna hex untuk menambahkan alpha yang memiliki opacity setara dengan nilai%.

(dalam rbga persentase opacity dinyatakan sebagai desimal seperti yang disebutkan di atas)

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+')';

Lihat di sini http://www.w3.org/TR/css3-color/#rgba-color

Itu tidak mungkin, kemungkinan besar karena 0xFFFFFFFF lebih besar dari nilai maksimum untuk bilangan bulat 32bit

Chrome 52+ mendukung alpha hex:

background: #56ff0077;

Gunakan red, green, blueuntuk mengkonversi ke RGBA:

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

Saya khawatir itu tidak mungkin. yang rgbaformat yang Anda tahu adalah satu-satunya.

Jika Anda dapat menggunakan KURANG, ada fungsi 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));

Pangeran menawan:

Hanya internet explorer yang memungkinkan warna hex 4 byte dalam format ARGB, di mana A adalah saluran Alpha. Ini dapat digunakan dalam filter gradien misalnya:

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

Di mana dir dapat berupa: 1 (horizontal) atau 0 (vertikal) Dan string warna dapat berupa warna hex (# FFAAD3) atau warna hex argb (# 88FFAAD3).

Di Sass kita bisa menulis:

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

seperti yang disarankan dalam representasi Hex warna dengan saluran alpha?

Nah, notasi warna yang berbeda adalah apa yang harus Anda pelajari.
Kuler memberi Anda kesempatan lebih baik untuk menemukan warna dan dalam beberapa notasi.
Hex tidak berbeda dari RGB, FF = 255 dan 00 = 0, tetapi itulah yang Anda ketahui. Jadi, Anda harus memvisualisasikannya.
Saya menggunakan Hex, RGBA dan RGB. Kecuali konversi massal diperlukan, melakukan ini secara manual akan membantu Anda mengingat beberapa 100 warna aneh dan kode-kodenya.
Untuk konversi massal, tulis beberapa skrip seperti yang diberikan oleh Alarie. Selamat bersenang-senang dengan Warna.

mengapa tidak digunakan background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */

jika Anda menargetkan warna untuk teks atau elemen, ini seharusnya lebih mudah dilakukan.