Nilai hex ARGB transparan


160

Warna-warna di ini tabel semua tidak transparan. Saya kira nilai untuk Adiatur ke FF.

Apa kode untuk transparansi?

Misalnya warna ini FFF0F8FF (AliceBlue), ke kode transparan seperti ??F0F8FF?


Akhirnya ada cara untuk mengatur warna transparan dengan kode hex untuk browser tertentu (fitur baru). Silakan, lihat stackoverflow.com/a/60876347/2457251
Almir Campos

Jawaban:


199

Transparansi dikendalikan oleh saluran alfa ( AAin #AARRGGBB). Nilai maksimal (255 dec, FF hex) berarti sepenuhnya buram. Nilai minimum (0 des, 00 hex) berarti sepenuhnya transparan. Nilai-nilai di antaranya semi-transparan, yaitu warnanya dicampur dengan warna latar belakang.

Untuk mendapatkan warna yang sepenuhnya transparan, atur alpha ke nol. RR, GGdan BBtidak relevan dalam kasus ini karena tidak ada warna yang akan terlihat. Ini berarti #00FFFFFF("transparan Putih") adalah warna yang sama dengan #00F0F8FF("transparan AliceBlue"). Untuk membuatnya tetap sederhana, pilih yang hitam ( #00000000) atau putih ( #00FFFFFF) jika warnanya tidak masalah.

Di tabel yang Anda tautkan ke Anda akan menemukan Transparentdidefinisikan sebagai #00FFFFFF.


2
katakanlah saya perlu opacity 50%. Apa kode untuk warna putih dengan opacity 50% / transparan?
user3332579

10
@ user3332579: 50% adalah 7F. Masukkan kalkulator Anda dalam mode hex, itu akan melakukan trik untuk Anda.
theHacker

1
@ user3332579: Jadi 50% putih adalah #7FFFFFFF.
theHacker

6
Formatnya adalah #RRGGBBAA Hex8 (atau #RGBA di Hex4) dan BUKAN #AARRGGBB (atau #ARGB) yang telah saya uji di Chrome 62,63,64 Lihat CanIUse.com , https://css-tricks.com/8- digit-hex-codes / , Status Fitur Chrome
SGS Sandhu

3
@SGSSandhu Pertanyaan ini tidak ditargetkan untuk CSS. Lihat lagi pertanyaannya, formatnya adalah ARGB.
theHacker

506

Berikut adalah tabel dari nilai% ke nilai hex:

Contoh : Untuk 85% putih, Anda akan menggunakan #D9FFFFFF. Di sini 85% = "D9" & Putih = "FFFFFF"


100% — FF
95% — F2
90% — E6

85% — D9

80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

Bagaimana cara menghitungnya?

FF adalah angka yang ditulis dalam mode hex. Angka itu mewakili 255 dalam desimal. Misalnya, jika Anda ingin menghitung 42%, Anda perlu menemukan 42% dari numbeer 255 dan mengonversi angka itu menjadi hex. 255 * 0,42 ~ = 107 107 ke hex adalah "6B - maleta


3
bagaimana Anda menghitung ini?
Saeed Jassani

35
@SaeedJassani FF adalah angka yang ditulis dalam mode hex. Angka itu mewakili 255 dalam desimal. Misalnya, jika Anda ingin menghitung 42%, Anda perlu menemukan 42% dari numbeer 255 dan mengonversi angka itu menjadi hex. 255 * 0.42 ~ = 107 107 ke hex adalah "6B"
maleta

1
@Maleta Terima kasih banyak
Saeed Jassani

10

Menambahkan ke jawaban lain dan tidak melakukan apa-apa lagi dari apa yang @Maleta jelaskan dalam komentar di https://stackoverflow.com/a/28481374/1626594 , lakukan alpha * 255 lalu bulatkan kemudian hex . Inilah konverter cepat http://jsfiddle.net/8ajxdLap/4/

function rgb2hex(rgb) {
  var rgbm = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?((?:[0-9]*[.])?[0-9]+)[\s+]?\)/i);
  if (rgbm && rgbm.length === 5) {
    return "#" +
      ('0' + Math.round(parseFloat(rgbm[4], 10) * 255).toString(16).toUpperCase()).slice(-2) +
      ("0" + parseInt(rgbm[1], 10).toString(16).toUpperCase()).slice(-2) +
      ("0" + parseInt(rgbm[2], 10).toString(16).toUpperCase()).slice(-2) +
      ("0" + parseInt(rgbm[3], 10).toString(16).toUpperCase()).slice(-2);
  } else {
    var rgbm = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
    if (rgbm && rgbm.length === 4) {
      return "#" +
        ("0" + parseInt(rgbm[1], 10).toString(16).toUpperCase()).slice(-2) +
        ("0" + parseInt(rgbm[2], 10).toString(16).toUpperCase()).slice(-2) +
        ("0" + parseInt(rgbm[3], 10).toString(16).toUpperCase()).slice(-2);
    } else {
      return "cant parse that";
    }
  }
}

$('button').click(function() {
  var hex = rgb2hex($('#in_tb').val());
  $('#in_tb_result').html(hex);
});
body {
  padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Convert RGB/RGBA to hex #RRGGBB/#AARRGGBB:<br>
<br>
<input id="in_tb" type="text" value="rgba(200, 90, 34, 0.75)"> <button>Convert</button><br>
<br> Result: <span id="in_tb_result"></span>



1

Jika Anda memiliki nilai hex, dan Anda hanya ingin tahu apa nilai alpha tersebut, cuplikan ini dapat membantu:

const alphaToHex = (alpha => {
  if (alpha > 1 || alpha < 0 || isNaN(alpha)) {
    throw new Error('The argument must be a number between 0 and 1');
  }
  return Math.ceil(255 * alpha).toString(16).toUpperCase();
})

console.log(alphaToHex(0.45));

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.