it-swarm.com.ru

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

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

Я хочу установить прозрачность с помощью шестнадцатеричного цвета, скажем, мой шестнадцатеричный идентификатор цвета "# 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%) вылетает.

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

1153
SweSnow

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

  • 100% - FF
  • 95% - F2
  • 90% - E6
  • 85% - D9
  • 80% - СС
  • 75% - BF
  • 70% - B3
  • 65% - А6
  • 60% - 99
  • 55% - 8C
  • 50% - 80
  • 45% - 73
  • 40% - 66
  • 35% - 59
  • 30% - 4D
  • 25% - 40
  • 20% - 33
  • 15% - 26
  • 10% - 1А
  • 5% - 0D
  • 0% - 00

( источник )

3395
Ben Clayton

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

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

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

Процент к шестнадцатеричным значениям

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

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

  1. преобразовать шестнадцатеричное значение в десятичное. например: D6 = 13 * 16ˆ1 + 6 = 214
  2. процент = (значение в десятичном виде) * 100/255. Например: 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

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

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

116
Raymond Chenon

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

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

Сначала вы должны посмотреть, как шестнадцатеричный работает. Вы можете написать не более FF.

34
erkangur

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

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

21
Tanis.7x

Я создал этот небольшой вспомогательный метод для приложения 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;
}
17
dwbrito

enter image description here

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

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

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

16
amalBit

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

255 * .2 to hex

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

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

6
chjarder

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

Используя SASS, у вас есть очень элегантный способ конвертировать RGBA в шестнадцатеричный 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;
}
2
fontophilic

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

hex(round(256*0.50))

:)

1
Geng Jiawen