Bug 234011

Summary: REGRESSION (Safari 15.1?): Hex values in <meta name="theme-color"> not rendering correct rgb color, used to affect etsy.com
Product: WebKit Reporter: Katie Sylor-Miller <ksylor>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ap, heycam, hi, karlcow, sam, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: iPhone / iPad   
OS: iOS 15   
See Also: https://bugs.webkit.org/show_bug.cgi?id=224509
Attachments:
Description Flags
Screenshot of the incorrect theme color from using a hex value
none
Screenshot of the correct theme color when using an rgb value in the meta tag none

Katie Sylor-Miller
Reported 2021-12-08 08:41:54 PST
Created attachment 446370 [details] Screenshot of the incorrect theme color from using a hex value After updating to iOS 15.1, I noticed that the tab background color that is set via `<meta name="theme-color" content="#f1614e">` looked different than the same hex value applied as a background color on the Etsy.com SVG logo. I've attached an image showing the difference - you can see that the theme color looks more pinkish than the logo orange. The rgb value for the correct orange in the logo is `rgb(241, 100, 30)`, while the incorrect rgb for the theme color that is being displayed is `rgb(240, 98, 78)`. When using the direct rgb value in the theme-color meta tag instead of hex, the color renders correctly `<meta name="theme-color" content="rgb(241, 100, 30)">` I've attached a screenshot created by manually editing the meta tag value in developer tools. Note that I am going to push up a code change to the production site to use an rgb value in our markup shortly, so I would expect this to no longer happen on https://www.etsy.com so it won't be reproducible.
Attachments
Screenshot of the incorrect theme color from using a hex value (8.97 KB, image/jpeg)
2021-12-08 08:41 PST, Katie Sylor-Miller 		no flags
Details
Screenshot of the correct theme color when using an rgb value in the meta tag (11.10 KB, image/jpeg)
2021-12-08 08:42 PST, Katie Sylor-Miller 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Katie Sylor-Miller
Comment 1 2021-12-08 08:42:51 PST
Created attachment 446371 [details] Screenshot of the correct theme color when using an rgb value in the meta tag
Alexey Proskuryakov
Comment 2 2021-12-09 09:56:41 PST
Thank you for the report! For anyone trying this, this is indeed already worked around on etsy.com.
Radar WebKit Bug Importer
Comment 3 2021-12-09 13:14:49 PST
<rdar://problem/86287478>
Katie Sylor-Miller
Comment 4 2021-12-09 13:29:52 PST
Since I've now fixed it on Etsy.com, I was curious if this was something that happened just with us or if it was more widespread, so I checked my open tabs for other sites that use a hex value for the theme-color and I noticed it happening on: https://landsend.com https://llbean.com but for some reason the difference wasn't nearly as drastic as it was with our hex color.
Karl Dubost
Comment 5 2025-04-15 00:34:45 PDT
to note that https://caniuse.com/meta-theme-color is not supported everywhere.
Note You need to log in before you can comment on or make changes to this bug.