50% — это сколько в HEX?
Для профессиональной веб-разработки (особенно при работе с CSS-цветами в формате #RRGGBBAA) часто требуется преобразование прозрачности (Alpha channel) из процентов в шестнадцатеричный код.
Диапазон 00–FF соответствует десятичному 0–255.
Формула расчета: Math.round((Процент / 100) * 255).toString(16).
Ниже приведена полная справочная таблица для всех целочисленных процентов.
Таблица прозрачности (Opacity Cheat Sheet)
| % | Hex | — | % | Hex | — | % | Hex | — | % | Hex |
|---|---|---|---|---|---|---|---|---|---|---|
| 100% | FF | 75% | BF | 50% | 80 | 25% | 40 | |||
| 99% | FC | 74% | BD | 49% | 7D | 24% | 3D | |||
| 98% | FA | 73% | BA | 48% | 7A | 23% | 3B | |||
| 97% | F7 | 72% | B8 | 47% | 78 | 22% | 38 | |||
| 96% | F5 | 71% | B5 | 46% | 75 | 21% | 36 | |||
| 95% | F2 | 70% | B3 | 45% | 73 | 20% | 33 | |||
| 94% | F0 | 69% | B0 | 44% | 70 | 19% | 30 | |||
| 93% | ED | 68% | AD | 43% | 6E | 18% | 2E | |||
| 92% | EB | 67% | AB | 42% | 6B | 17% | 2B | |||
| 91% | E8 | 66% | A8 | 41% | 69 | 16% | 29 | |||
| 90% | E6 | 65% | A6 | 40% | 66 | 15% | 26 | |||
| 89% | E3 | 64% | A3 | 39% | 63 | 14% | 24 | |||
| 88% | E0 | 63% | A1 | 38% | 61 | 13% | 21 | |||
| 87% | DE | 62% | 9E | 37% | 5E | 12% | 1F | |||
| 86% | DB | 61% | 9C | 36% | 5C | 11% | 1C | |||
| 85% | D9 | 60% | 99 | 35% | 59 | 10% | 1A | |||
| 84% | D6 | 59% | 96 | 34% | 57 | 9% | 17 | |||
| 83% | D4 | 58% | 94 | 33% | 54 | 8% | 14 | |||
| 82% | D1 | 57% | 91 | 32% | 52 | 7% | 12 | |||
| 81% | CF | 56% | 8F | 31% | 4F | 6% | 0F | |||
| 80% | CC | 55% | 8C | 30% | 4D | 5% | 0D | |||
| 79% | C9 | 54% | 8A | 29% | 4A | 4% | 0A | |||
| 78% | C7 | 53% | 87 | 28% | 47 | 3% | 08 | |||
| 77% | C4 | 52% | 85 | 27% | 45 | 2% | 05 | |||
| 76% | C2 | 51% | 82 | 26% | 42 | 1% | 03 | |||
| 0% | 00 |
JS-хелпер для расчетов
Если нужно вычислить значение программно (например, для динамической генерации стилей или работы с canvas), можно использовать эту функцию:
JavaScript
const percentToHex = (percent) => {
// Ограничиваем диапазон от 0 до 100
const value = Math.max(0, Math.min(100, percent));
// Округляем (255 * percent / 100)
const decimalValue = Math.round(value * 2.55);
// Преобразуем в hex, переводим в верхний регистр и добавляем ведущий ноль
return decimalValue.toString(16).toUpperCase().padStart(2, '0');
};
// Примеры использования:
console.log(percentToHex(0)); // "00"
console.log(percentToHex(50)); // "7F"
console.log(percentToHex(100)); // "FF"Для наглядности код есть на CodePen
codepen.ioВажные нюансы
- CSS Colors 4: В современном CSS (как указано в спецификациях на
web.dev) можно использовать синтаксисrgb(0 0 0 / 50%)или#00000080. Браузеры сами отлично понимают проценты в функцияхrgb()иhsl(), поэтому ручная конвертация в HEX нужна преимущественно для поддержки старых инструментов или строгих гайдлайнов (например, в дизайн-системах или БЭМ-библиотеках). - Точность: Значения в таблице округлены до ближайшего целого. Например, 50% от 255 — это 127.5. Стандартная практика округляет это до 128 (
0x80), а не 127 (0x7F).