Прозоре значення шестигранника ARGB


160

Кольори в цій таблиці - непрозорі. Я здогадуюсь, що значення для параметра Aвстановлено на FF.

Що таке код для прозорості?

Наприклад, цей колір FFF0F8FF (AliceBlue), до прозорого коду, наприклад ??F0F8FF?


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

Відповіді:


199

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

Щоб отримати повністю прозорий колір, встановіть альфа на нуль. RR, GGі BBв цьому випадку вони не мають значення, оскільки жоден колір не буде видно. Це означає #00FFFFFF("прозорий білий") того ж кольору, що і #00F0F8FF("прозорий AliceBlue"). Щоб зробити це просто, вибирайте чорний ( #00000000) або білий ( #00FFFFFF), якщо колір не має значення.

У таблиці, яку ви зв'язали, ви знайдете Transparentяк #00FFFFFF.


2
скажімо, мені потрібна непрозорість на 50%. Який код білого кольору з непрозорістю 50% / прозорим?
користувач3332579

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
SGS Sandhu

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 по шістнадцятковій
точці

1
@Maleta Дякую велике
Saeed Jassani

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.