Прозрачное шестнадцатеричное значение ARGB


160

Цвета в этой таблице все не прозрачные. Я предполагаю, что значение для Aустановлено в FF.

Какой код для прозрачности?

Например, этот цвет FFF0F8FF (AliceBlue) для прозрачного кода, такого как ??F0F8FF?


Наконец, есть способ установить прозрачный цвет с шестнадцатеричным кодом для определенных браузеров (новая функция). Пожалуйста, взгляните на stackoverflow.com/a/60876347/2457251
Альмир Кампос

Ответы:


199

Прозрачность контролируется альфа-каналом ( AAв #AARRGGBB). Максимальное значение (255 dec, FF hex) означает полностью непрозрачный. Минимальное значение (0 дек, 00 гекс) означает полностью прозрачный. Значения между ними являются полупрозрачными, то есть цвет смешивается с цветом фона.

Чтобы получить полностью прозрачный цвет, установите альфа на ноль. RR, GGИ не BBимеют никакого отношения в этом случае , потому что цвет не будет виден. Это означает #00FFFFFF(«прозрачный белый») того же цвета, что и #00F0F8FF(«прозрачный AliceBlue»). Для простоты выбирается черный ( #00000000) или белый ( #00FFFFFF), если цвет не имеет значения.

В таблице, с которой вы связаны, вы найдете Transparentопределение как #00FFFFFF.


2
скажем, мне нужна прозрачность 50%. Какой код для белого цвета с прозрачностью 50% / прозрачный?
user3332579

10
@ user3332579: 50% есть 7F. Переведите калькулятор в шестнадцатеричный режим, и он поможет вам.
theHacker

1
@ user3332579: 50% белого цвета #7FFFFFFF.
theHacker

6
Формат #RRGGBBAA Hex8 (или #RGBA в Hex4) и НЕ #AARRGGBB (или #ARGB), который я тестировал в Chrome 62,63,64. См. CanIUse.com , https://css-tricks.com/8- значные-шестигранные-коды / , Chrome Feature Статус
SGS Санду

3
@SGSSandhu Вопрос не нацелен на CSS. Посмотрите вопрос еще раз, формат ARGB.
theHacker

506

Вот таблица значений в% к гексам:

Пример : для 85% белого вы бы использовали #D9FFFFFF. Здесь 85% = "D9" & White = "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

Как рассчитывается?

FF - число, записанное в шестнадцатеричном режиме. Это число представляет 255 в десятичном виде. Например, если вы хотите, чтобы 42% вычислили, вам нужно найти 42% от числа 255 и преобразовать это число в гекс. 255 * 0,42 ~ = 107 107 в шестнадцатеричном виде "6B - малета


3
как вы рассчитываете это?
Саид Джассани

35
@SaeedJassani FF - число, записанное в шестнадцатеричном режиме. Это число представляет 255 в десятичном виде. Например, если вы хотите, чтобы 42% вычислили, вам нужно найти 42% от числа 255 и преобразовать это число в гекс. 255 * 0,42 ~ = 107 107 в шестнадцатеричном виде "6B"
малета

1
@Малета Большое спасибо
Саид Джассани

10

Добавляя к другим ответам и ничего больше не делая из того, что @Maleta объяснил в комментарии на https://stackoverflow.com/a/28481374/1626594 , выполнив альфа * 255, затем округляя, затем в шестнадцатеричное . Вот быстрый конвертер 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

Если у вас есть шестнадцатеричное значение, и вам просто интересно, каким будет значение для альфы, этот фрагмент может помочь:

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.