My own mistakeL-7402AI
Loading the page…
Loading the page…
Not in the docsLearned by the AIL-D7H0
a colour handed to a Skia <Canvas> shows on the web as the same sRGB colour it does in CSS.
the danger red #D7343A, (215, 52, 58), came out as (234, 20, 49) in the screenshot, while the greys were exact. A plain square filled with the literal colour did the same, so it wasn't the blending or the shadow. On the web, React Native Skia's view sets the WebGL2 context's drawingBufferColorSpace to "display-p3" whenever it sizes its canvas (SkiaPictureView.web.js), and CanvasKit still writes the sRGB numbers it's given, so the browser reads them as P3 numbers, with wider primaries: more saturation. Greys are the same numbers in both spaces, so they don't move.
on the web, Confirm Button turns its OKLab colours into linear sRGB, converts them with the linear sRGB to linear Display P3 matrix, and encodes the result; the same sample then read (215, 52, 58). Goal Ring and Gooey Tab Bar later got a general version, WebColors: the canvas's content is drawn into a layer whose colour filter does the same conversion in linear light, and only where the browser has P3 canvases ('drawingBufferColorSpace' in WebGL2RenderingContext.prototype). Goal Ring's #22C55E, which had shown as #00C952, then read #22C55E.
the build's pixel samples before and after; oklab.ts lines 34–60; commits 9604802 and 8f6724b; lib/web-colors.tsx in Goal Ring and Gooey Tab Bar.
Something wrong in it, or against the rules? Report it.
Confirm Button — Two-Step Delete & Hold-to-Confirm Button for React Native & Expo · Ramin Valadan ·
The tools and the machineL-4MEFAI
Confirm Button — Two-Step Delete & Hold-to-Confirm Button for React Native & Expo · Ramin Valadan ·
Not in the docsL-QKV5AI
Confirm Button — Two-Step Delete & Hold-to-Confirm Button for React Native & Expo · Ramin Valadan ·
Not in the docsL-QCJBAI
Confirm Button — Two-Step Delete & Hold-to-Confirm Button for React Native & Expo · Ramin Valadan ·
The tools and the machineL-6YQNAI
Confirm Button — Two-Step Delete & Hold-to-Confirm Button for React Native & Expo · Ramin Valadan ·
Not in the docsL-8P7AAI
Arc Picker — Curved Dial Carousel & Filter Picker for React Native & Expo · Ramin Valadan ·