Repository navigation
hsl() with a slash alpha, and an alpha given as a percentage, are rejected as colours #59602
Description
Description
normalizeColor returns null for two spellings CSS Color 4 accepts, so a View painted with either is not painted:
hsl(H S L / A): thehslmatcher iscall(NUMBER, PERCENTAGE, PERCENTAGE)alone (L282), whilehslatakes the slash form (L283-L288), andrgbandrgbashare one pattern with it. CSS Color 4 makeshsl()andhsla()the same function.- An alpha given as a percentage,
rgb(0 128 0 / 50%): every alpha in the matchers is aNUMBER(L273-L277), andparse1reads a number.
Steps to reproduce
- Clone the reproducer,
yarn installinReproducerApp, and run it on an Android device (yarn android, or a release build). - The white screen holds four boxes painted
hsl(120 100% 25% / 0.5),hsla(120 100% 25% / 0.5),rgb(0 128 0 / 50%)andrgb(0 128 0 / 0.5).
Expected: all four the same half-transparent green.
Seen: the hsla() and rgb(… / 0.5) boxes are green, and the hsl(… / 0.5) and rgb(… / 50%) boxes are not painted.
React Native Version
0.88.1, and 0.89.0-nightly-20261027-7225d43c3
Affected Platforms
Runtime - Android
Output of npx @react-native-community/cli info
System:
OS: Windows 11 10.0.26300
CPU: "(32) x64 AMD Ryzen 9 9950X3D 16-Core Processor "
Memory: 200.62 GB / 255.67 GB
Binaries:
Node:
version: 26.12.1
path: C:\Program Files\nodejs\node.EXE
Yarn:
version: 1.22.22
path: C:\Users\yevhe.YEVHENII\AppData\Roaming\npm\yarn.CMD
npm:
version: 12.2.1
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels:
- "33"
- "35"
- "35"
- "35"
- "36"
- "37"
Build Tools:
- 35.0.0
- 36.0.0
- 36.1.0
- 37.0.0
System Images:
- android-26 | Google APIs Intel x86_64 Atom
- android-28 | Google APIs Intel x86_64 Atom
- android-29 | Google APIs Intel x86_64 Atom
- android-30 | Google APIs Intel x86_64 Atom
- android-31 | Google APIs Intel x86_64 Atom
- android-32 | Google APIs Intel x86_64 Atom
- android-33 | Google APIs Intel x86_64 Atom
- android-34 | Google APIs Intel x86_64 Atom
- android-35 | Google APIs Intel x86_64 Atom
- android-36.1 | Google Play Intel x86_64 Atom
- android-36.1 | Pre-Release 16 KB Page Size Google Play Intel x86_64 Atom
- android-37.0 | Google APIs Intel x86_64 Atom
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-262.9437.185.2621.16467767
Visual Studio: Not Found
Languages:
Java:
version: 17.0.20.1
path: C:\Program Files\Microsoft\jdk-17.0.20.101-hotspot\bin\javac.EXE
Ruby: Not Found
npmPackages:
"@react-native-community/cli":
installed: 20.2.0
wanted: 20.2.0
react:
installed: 19.3.0
wanted: 19.3.0
react-native:
installed: 0.88.1
wanted: 0.88.1
react-native-windows: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Stacktrace or Logs
The colour at the centre of each box on a Galaxy S23 (Android 14), read from a screenshot (adb exec-out screencap):
{"device":"SM-S911B, Android 14","screen":"1080x2340"}
{"testId":"hsl-slash-alpha","bounds":"[144,144][432,432]","centre":"#ffffff","alpha":255}
{"testId":"hsla-slash-alpha","bounds":"[144,480][432,768]","centre":"#7fbf7f","alpha":255}
{"testId":"rgb-percentage-alpha","bounds":"[144,816][432,1104]","centre":"#ffffff","alpha":255}
{"testId":"rgb-number-alpha","bounds":"[144,1152][432,1440]","centre":"#7fbf7f","alpha":255}
normalizeColor from @react-native/normalize-colors on the nightly, in Node:
react-native 0.89.0-nightly-20261027-7225d43c3, __DEV__ true
normalizeColor('rgb(1 2 3 / 0.5)') -> 16909184
normalizeColor('hsl(1 2% 3% / 0.5)') -> null
normalizeColor('hsla(1 2% 3% / 0.5)') -> 134743936
normalizeColor('rgb(1 2 3 / 50%)') -> null
normalize-color/index.js on main at c12d0b3 differs from 0.88.1 only by #59103, which anchors the matchers; the nightly above, built from main on 2026-10-27, gives the same results, and no commit has touched the file since.
MANDATORY Reproducer
https://github.com/YevheniiKotyrlo/rn-normalize-colors-modern-alpha
Screenshots and Videos
The reproducer's release build on a Galaxy S23 (Android 14): the hsl(… / 0.5) and rgb(… / 50%) boxes are not painted.
Activity
Accept slash alpha in hsl() and percentage alphas in normalize-colors