Шестнадцатеричная прозрачность в цветах [копия]

979

Я работаю над реализацией опции прозрачности виджета для виджета моего приложения, хотя у меня возникли проблемы с правильной оценкой значений шестнадцатеричного цвета. Будучи совершенно новой для прозрачности шестнадцатеричного цвета, я искал немного, хотя я не мог найти конкретного ответа на мой вопрос.

Я хочу установить прозрачность по шестнадцатеричному цвету, так что скажем, мой идентификатор шестнадцатеричного цвета "# 33b5e5", и я хочу, чтобы он был прозрачным на 50%. Тогда я буду использовать "# 8033b5e5", потому что 80 - 50%.

Здесь я нашел полезную диаграмму: http://www.dtp-aus.com/hexadeci.htm. С этими данными мне удалось придумать следующее:

0% = #00
10% = #16
20% = #32
30% = #48
40% = #64
50% = #80
60% = #96
70% = #112
80% = #128
90% = #144

Теперь проблемы возникают, когда я получаю больше, чем 100 в шестнадцатеричном формате. Коды цвета хеширования могут иметь длину 8 символов в длину? Например, сбой # 11233b5e5 (80%).

Что я могу сделать, чтобы позволить мне использовать более высокие номера?

  • 163
    Прошли годы и годы, и я продолжаю возвращаться сюда :)
  • 35
    Android Материал Дизайн : 100%: FF , 87%: DE , 70%: B3 , 54%: 8A , 50%: 80 , 38%: 61 , 12%: 1F
Показать ещё 2 комментария
Теги:
colors
hex
transparency

10 ответов

3084
Лучший ответ

Здесь приведена правильная таблица процентов к шестнадцатеричным значениям. Например. для 50% белых вы используете # 80FFFFFF.

  • 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

(источник)

  • 126
    давайте не забывать переходить по ссылке на источник и ставить оригинальный ответ тоже, это другой автор
  • 192
    Прошло уже почти 2 года, как я использую StackOverflow, и я прихожу сюда время от времени. Этот ответ должен быть на главном экране.
Показать ещё 12 комментариев
93

Короткий ответ

Вы можете увидеть полную таблицу процентов до шестнадцатеричных значений и запустить код на этой игровой площадке в https://play.golang.org/p/l1JaPYFzDkI.

Краткое объяснение в псевдокоде

Процент от шестнадцатеричных значений

  1. decimal= процент * 255/100. ex: decimal = 50 * 255/100 = 127,5
  2. преобразовать десятичное значение в шестнадцатеричное. ex: 127,5 в десятичном = 7 * 161 + 15 = 7F в шестнадцатеричном

Значения шестнадцатеричных значений в процентах

  1. конвертировать шестнадцатеричное значение в десятичное. ex: D6 = 13 * 161 + 6 = 214
  2. % = (значение в десятичном значении) * 100/255. ex: 214 * 100/255 = 84%

Дополнительная информация для преобразования десятичного числа <=> шестнадцатеричный

Длинный ответ: как рассчитать в голове

Проблема может быть решена в общем случае путем кросс-умножения.

У нас есть процент (от 0 до 100) и другое число (от 0 до 255), а затем преобразованное в шестнадцатеричное.

  • 100 <==> 255 (FF в шестнадцатеричном формате)
  • 0 <==> 0 (00 в шестнадцатеричном порядке)

Для 1%

  • 1 * 255/100 = 2,5
  • 2,5 в гекса - 2, если вы округлите его.

Для 2%

  • 2 * 255/100 = 5
  • 5 в гекса 5.

Таблица в лучшем ответе дает процентный шаг 5%.

Как рассчитать числа между вами в голове? Из-за 2,5 приращения добавьте 2 к первому и 3 к следующему

  • 95% - F2//начало
  • 96% - F4//добавьте 2 к F2
  • 97% - F7//добавить 3. Или F2 + 5 = F7
  • 98% - F9//добавить 2
  • 99% - FC//добавить 3. 9 + 3 = 12 в гекса: C
  • 100% - FF//добавить 2

Я предпочитаю учить, как найти решение, а не передавать таблицу

Дайте человеку рыбу, и вы накормите его на день; научить человека ловить рыбу, и вы кормите его на всю жизнь

  • 5
    Я предпочитаю объяснять, как найти решение, а не давать результаты таблицы. Как говорится, «дай человеку рыбу, и ты накормишь его на день; научи человека ловить рыбу, и ты накормишь его на всю жизнь»
27

Обозначение цвета шестнадцатеричной формы выглядит следующим образом: #AARRGGBB

  • A: alpha
  • R: красный
  • G: зеленый
  • B: синий

Вы должны сначала посмотреть, как работает hexadecimal. Вы можете написать не более FF.

  • 0
    Таким образом, шкала АА составляет 16 шагов и идет от 0-F, где FF - 100%, а 00 - 0%?
  • 0
    @ Да, да, верно.
22

Эта диаграмма не показывает проценты. "# 90" не "90%". Этот график показывает шестнадцатеричное преобразование с десятичной точностью. Шестнадцатеричный номер 90 (обычно представленный как 0x90) эквивалентен десятичному числу 144.

Шестнадцатеричные числа - это base-16, поэтому каждая цифра имеет значение от 0 до F. Максимальное значение для шестибайтового значения в два байта (например, прозрачность цвета) равно 0xFF или 255 в десятичной форме. Таким образом, 100% равно 0xFF.

  • 0
    Если это не вопрос шестнадцатеричного в десятичное преобразование, каков правильный способ измерения прозрачности? 0xFF - это еще больше, чем два числа. Есть ли какая-то правильная схема системы, о которой я не знаю?
  • 1
    Это вопрос шестнадцатеричной в десятичную. Проблема в том, что вы не можете просто взять десятичное число и назвать его процентом (например, 50 в десятичной системе - это не процент). Поскольку максимальное десятичное значение, которое вы можете представить в шестнадцатеричном формате, равно 255, значение 0x7F (десятичное 127) составляет приблизительно 50%. Десятичное число 50 (0x32) составляет всего около 20%.
Показать ещё 1 комментарий
16

Изображение 2848

Это может быть очень поздний ответ. Но эта диаграмма убивает его.

Все процентные значения отображаются в шестнадцатеричные значения.

http://online.sfsu.edu/chrism/hexval.html

16

Я построил этот небольшой вспомогательный метод для приложения для Android, может пригодиться:

 /**
 * @param originalColor color, without alpha
 * @param alpha         from 0.0 to 1.0
 * @return
 */
public static String addAlpha(String originalColor, double alpha) {
    long alphaFixed = Math.round(alpha * 255);
    String alphaHex = Long.toHexString(alphaFixed);
    if (alphaHex.length() == 1) {
        alphaHex = "0" + alphaHex;
    }
    originalColor = originalColor.replace("#", "#" + alphaHex);


    return originalColor;
}
6

попробуйте это в поиске Google (или нажмите здесь)

255 * .2 to hex

в результате он сгенерирует 0x33.

Однако Google не округляет значения, поэтому вы можете использовать только 1-значные множители. если вы хотите использовать say.85, сначала вы должны получить округленное значение 255 *.85, а затем введите (rounded-value here) to hex в поиске Google.

3

Я понимаю, что это старый вопрос, но я наткнулся на него, когда делаю что-то подобное.

Используя SASS, у вас очень элегантный способ преобразования RGBA в hex ARGB: ie-hex-str. Я использовал его здесь в микшинге.

@mixin ie8-rgba ($r, $g, $b, $a){
    $rgba: rgba($r, $g, $b, $a);
    $ie8-rgba: ie-hex-str($rgba);
    .lt-ie9 &{
      background-color: transparent;
      filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#{$ie8-rgba}', endColorstr='#{$ie8-rgba}');
  }
}

.transparent{
    @include ie8-rgba(88,153,131,.8);
    background-color: rgba(88,153,131,.8);
}

выходы:

.transparent {
  background-color: rgba(88, 153, 131, 0.8);
}
.lt-ie9 .transparent {
  background-color: transparent;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#CC589983', endColorstr='#CC589983');
  zoom: 1;
}
  • 0
    Вопрос имеет ярлык Android.
1

Используя python для вычисления этого, например (написанный на python 3), прозрачность 50%:

hex(round(256*0.50))

:)

-1

Я всегда прихожу сюда, чтобы проверить значение int/hex alpha. Итак, создайте простой метод в моем классе java utils. Этот метод преобразует процент в шестнадцатеричное значение и добавит к значению строки цветового кода.

 public static String setColorAlpha(int percentage, String colorCode){
    double decValue = ((double)percentage / 100) * 255;
    String rawHexColor = colorCode.replace("#","");
    StringBuilder str = new StringBuilder(rawHexColor);

    if(Integer.toHexString((int)decValue).length() == 1)
        str.insert(0, "#0" + Integer.toHexString((int)decValue));
    else
        str.insert(0, "#" + Integer.toHexString((int)decValue));
    return str.toString();
}

Итак, Utils.setColorAlpha(30, "#000000") даст вам #4c000000

Ещё вопросы

Сообщество Overcoder
Наверх
Меню