CSS RGBad heksadesimal?

199

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.

Li Haoyi
sumber
1
Anda dapat bereksperimen dengan notasi yang berbeda, tetapi saya tidak berhasil. rgb(0xff,\x80,#44)Representasi oktober yang mengejutkan tampaknya sedikit rgb(0100, 0200,0300)#4080C0
mengganggu
Anda mungkin ingin menggunakan ColorPic, yang menunjukkan angka desimal untuk ikonic
yunzen
2
Seperti yang Slomojo sarankan, dalam KURANG Anda dapat melakukan warna latar belakang: # ff0000 + rgba (0, 0, 0, .8); yang akan mengonversi hex untuk Anda dan masih menerapkan transparansi tetapi ini tidak dapat dilakukan menggunakan CSS asli.
fl3x7
1
Untuk kelengkapan, seperti yang dibahas oleh Slomojo dan fl3x7, ini dapat dilakukan dengan mudah di Sass : background-color: opacify(#ff0000, 0.5);atau background-color: transparentize(#ff0000, 0.5);Anda dapat menyediakan variabel warna hex hex ke fungsi Sass tersebut juga.
Adam Caviness

Jawaban:

112

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?

Tumble weed adalah satu-satunya respons nyata ...

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:

Gambar Hasil Cuplikan Kode

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

Contoh Inspektur Elemen

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 ).

James Donnelly
sumber
1
Saya ingat melihat ini dibesarkan di mailing list setahun atau yang lalu paling lambat (gagasan memiliki hex 4/8 digit bukanlah hal yang baru). Senang melihat itu masuk Warna 4 untuk saat ini.
BoltClock
@BoltClock semoga akan tetap di sini juga!
James Donnelly
Firefox Nightly baru saja menerapkan ini :)
Florrie
/* Fall... foward? */»Saya sarankan lompat ke depan. Fallback and jumpforward: ^ p
WoodrowShigeru
Hanya menambahkan tautan yang bermanfaat. Tautan berisi daftar nilai opacity dalam hex. gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
Ashish Kumar
33

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
T9b
sumber
Jangan benar-benar mengerti. Apakah maksud Anda #FF00000Csetara dengan rgba(255,0,0,0.05)?
yunzen
ini awalan bukan akhiran. Berarti Anda menambahkannya ke depan nilai warna hex 6 digit Anda #000000menjadi #7F000000.
T9b
8
@ T9b: CSS3 tidak mendukung notasi ini. Akhir dari cerita.
PointedEars
@PointedEars salah dalam kedua hal. OP tidak secara spesifik menyebutkan CSS3, dan pertanyaan ini saya pikir cenderung lebih terkait dengan masalah spesifik IE yang kita semua tahu sulit. Tidak ada yang kurang yaitu IE menggunakan nilai transparansi CSS dan Hex dalam CSS itu.
T9b
4
@ T9b Omong kosong. OP memiliki pertanyaan CSS tentang nilai-nilai RGBA. Tidak ada dukungan RGBA di CSS sebelum CSS3. Jika IE / MSHTML mendukung notasi Anda, maka itu adalah hak milik , tidak kompatibel, dan secara inheren tidak dapat diandalkan. Dan tentunya Anda tidak menyarankan untuk menggunakan skrip sisi klien untuk membuat notasi itu berfungsi, bukan? Untuk itu tidak akan kompatibel dan tidak dapat diandalkan juga.
PointedEars
22
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+')';
James Alarie
sumber
var rgb = '#ffabcd'; var a = '0.5'; var matches = rgb.match(/#([\da-f]{2})([\da-f]{2})([\da-f]{2})/i); var rgba = 'rgba(' + matches.slice(1).map(function(m) { return parseInt(m, 16); }).concat(a) + ')';
PointedEars
2
Jika Anda berasal dari dunia Bereaksi:<div style={ { backgroundColor: `rgba(${ parseInt(color.substring(1,3),16) }, ${ parseInt(color.substring(3,5),16) }, ${ parseInt(color.substring(5,7),16) }, 0.5)` } }></div>
Atul Yadav
14

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

Grifon
sumber
28
#ffffff(enam hex-digit) sebenarnya adalah nilai warna 24-bit ; 0xFFFFFFFF sebenarnya 2³² − 1, dan dapat direpresentasikan sebagai integer 32-bit yang tidak ditandatangani . Saya pikir alasan mengapa #ffffffff(delapan hex-digit) tidak ditentukan adalah karena warna CSS di-root dalam ruang warna sRGB dan notasi delapan-hex-digit akan ambigu dengan perangkat tampilan yang mendukung kedalaman warna 32 bit. Ingat bahwa masih #fffada artinya rgb(100%, 100%, 100%)- putih - keduanya dengan kedalaman warna 8 bit (256 warna) dan 16 bit (65536 atau 64 ribu warna).
PointedEars
5
Sebenarnya itulah yang bisa dimiliki oleh integer 32bit. 2 digit hex dapat menyimpan nilai sebanyak 8 digit biner. Atau ... 8 digit hex dapat menampung sebanyak 32 digit biner.
Pijusn
Meskipun tidak ada alasan utama fungsi CSS seharusnya tidak dirancang dengan cara ini sejak awal (dan juga rgba (0,0, 0,5, 1,0) mengapung untuk normals agar sesuai dengan fungsi warna lainnya). Adapun dukungan warna tampilan 32-bit, ini tidak ada dengan 6-digit RGB untuk memulai dan benar-benar kasus tepi. Saya tidak memiliki masalah dengan mempelajari format yang berbeda, tetapi ada beberapa kasus di mana Anda mungkin mendapatkan warna dinamis dalam hex dan perlu membuat CSS dari itu saat runtime. Ini membutuhkan langkah ekstra untuk mengubah dari hex ke desimal jika Anda ingin menambahkan alpha, yang kikuk.
Beejor
13

Chrome 52+ mendukung alpha hex:

background: #56ff0077;
Oded Breiner
sumber
4
Saya senang melihat ini, dan kemudian mencobanya di devtools di Chrome 55. Tidak ada dadu, itu kesalahan sebagai nilai properti yang tidak valid ...¯\_(ツ)_/¯
ericsoco
1
Sepertinya telah mengalami berbagai masalah di sini adalah halaman status untuk fitur tersebut.
Billy
Chrome telah menghapus dukungan, Safari dan Firefox memiliki dukungan. Jangan gunakan ini.
Kasus
5
Pada Juli 2019, ada 84,5% dari semua browser yang mendukung fitur ini secara global. caniuse.com/#search=rrggbbaa
André Kuhlmann
10

Gunakan red, green, blueuntuk mengkonversi ke RGBA:

background-color: rgba(red($color), green($color), blue($color), 0.2);
Jeremy Lynch
sumber
4
SASS mendukung warna latar belakang: rgba ($ color, .2);
djibe
itu bukan metode css yang valid - Anda harus menyebutkan bahwa
Piotr Karbownik
7

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

Hantu Madara
sumber
1
@ mdmullinax: Tapi siapa yang menentukan warna hex dalam notasi HSL?
BoltClock
1
Saya mengasosiasikan segala sesuatu dalam hidup dengan notasi HSLA, ini adalah versi sinestesia :)
MikeM
@mdmullinax: Oh, itu sebenarnya cukup luar biasa!
BoltClock
6
@mdmullinax: Ini mungkin menyenangkan Anda jika Anda belum melihatnya: mothereffinghsl.com
BoltClock
@BoltClock Saya suka situs itu, Paul Irish menang
MikeM
5

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));
Julian Mann
sumber
dan sass / scss memiliki fungsi yang setara:rgba(base-color, 0.5)
LocustHorde
2

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).

Lajos Meszaros
sumber
0

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.


sumber
-2

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.

Pangeran yang menawan
sumber
9
-1 opacity mempengaruhi semua konten, bukan hanya warna latar belakang
yunzen
maka objek dapat digandakan, satu harus mengandung elemen, yang lain harus menjadi satu di dalam wadah yang memiliki opacity. karena dari pertanyaan tersebut pengguna menginginkan metode lain selain rgba konvensional.
Prince Charming
1
Dia masih menginginkan hasil yang sama, dan saya lebih baik menggunakan rgba () atau notasi lain daripada memodifikasi HTML.
FelipeAls
ini adalah jawaban yang saya cari, tinggalkan warna hex sendirian dan ubah opacity menggunakan opacityproperti css.
sini