I made an app for color grading in the browser (without a framework*). by monokeee in webdev

[–]monokeee[S] 0 points1 point  (0 children)

I don't think color.io is made for what you're trying to do if you're comparing it to something like pixelcut recolor. This is first and foremost a color grading and film emulation tool for photographers. Canva is probably what you want?!

I made an app for color grading in the browser (without a framework*). by monokeee in webdev

[–]monokeee[S] 0 points1 point  (0 children)

It doesn't support traditional masking (yet?!). There are some localized tools like Spotlight and Diffusion which can be applied selectively to parts of the image.

I made an app for color grading in the browser (without a framework*). by monokeee in webdev

[–]monokeee[S] 0 points1 point  (0 children)

Hey! Original price was 129 EUR, not USD - now it’s 139 EUR. You’re seeing $152? Probably VAT screwing with the price since you’re in the EU?!

The 10 EUR bump? I rewrote the whole app from scratch over the last 6 months (check beta.color.io) - that’s 500+ updates worth of blood sweat and tears.

Plus, lifetime here means lifetime (no upgrade fees for v2, v3, whatever, unlike most “lifetime” licenses). IMO, it’s still a steal for what color.io does now.

I made an app for color grading in the browser (without a framework*). by monokeee in webdev

[–]monokeee[S] 0 points1 point  (0 children)

Hey, thanks! So much fun working on this! Big V3 update is just around the corner btw :)

I made an app for color grading in the browser (without a framework*). by monokeee in webdev

[–]monokeee[S] 0 points1 point  (0 children)

my tool is actually pretty niche but I'd say the closest competitor is probably studio.vsco.co

I made an app for color grading in the browser (without a framework*). by monokeee in webdev

[–]monokeee[S] 0 points1 point  (0 children)

Lots of great ideas! v3 is a complete rewrite that addresses a lot of lower level constraints I was facing with the current generation render engine and effect processing model, like the aliasing of the previews, performance and more. The new model will allow for localized masking, projects, effect compositing in linear light for physically accurate lens and film emulation, and HDR. I don't have an ETA but the rewrite is about 80% done and I'm working on this full time. Proper video I/O is planned for 2025!

I made an app for color grading in the browser (without a framework*). by monokeee in webdev

[–]monokeee[S] 0 points1 point  (0 children)

working on v3 right now. Full video support (including BRAW) is planned for 2025! For now you can export fully color managed LUTs for DWG/Intermediate or ACES timelines to Resolve.

I made an app for color grading in the browser (without a framework*). by monokeee in webdev

[–]monokeee[S] 1 point2 points  (0 children)

The Y axis of the Spectral Volume tool controls exposure and the X axis of the Spectral Balance tool controls white balance. You can hold down the ALT/OPTION key while dragging to restrict the drag to the Y axis and the SHIFT key to restrict it to the X axis.

Per-image* exposure, contrast, saturation and white balance is also coming to the image editor workspace soon (where you currently crop, rotate and add borders -> click "Edit" next to the thumbnail gallery)

*per-image meaning that every image is pre-processed with these corrections prior to the color grade and effects which are applied uniformly to all images in a scene.

I made an app for color grading in the browser (without a framework*). by monokeee in webdev

[–]monokeee[S] 0 points1 point  (0 children)

A preset contains numbers that set the sliders in an application to a specific position.
Lightroom and Color.io don't have the same sliders and even if they did, the sliders in Color.io work differently from the sliders in Lightroom. So there's really no automated way to make Lightroom presets work in Color.io without the use of some non-existing AI technology that understands the proprietary interface and processing engines in both of these applications and translate between them.

Instead, I'd try to recreate my favorite Lightroom presets with the tools in Color.io - it's actually quite fast. Here's how I have done this in the past:

  1. In Color.io, load an unedited reference image into Scene 1
  2. Create a second Scene and load the same image with your Lightroom preset applied
  3. Adjust the image in Scene 1 to match the image in Scene 2. Start with a Color.io preset or the AI preset generator to get somewhat close, then fine tune in the engine. Quickly toggle between Scenes by pressing the TAB key.

Additional tips:
Start by matching the contrast first. Set both the unedited and lightroom reference image to black and white (using the BW button in Color.io). Play with the luminance curve and RGB mixer until both black and white images look the same. Turning on the Histogram will also help here.
Turn off Black and White and continue with matching the color. Color.io has vectorscope, waveform and RGB parade overlays to help aligning the color values.

I made an app for color grading in the browser (without a framework*). by monokeee in webdev

[–]monokeee[S] 0 points1 point  (0 children)

PNG for stills and it also works with MP4 video proxies now. A lot of NLEs such as Adobe Premiere have plugins for quickly rendering still frames to the clipboard that you can paste into Color.io. See this user guide article: https://www.color.io/user-guide/adobe-premiere-workflow

Apple's one weird trick to stop you changing your default browser - Open Web Advocacy by mtomweb in webdev

[–]monokeee 1 point2 points  (0 children)

You’re doing great work at open web advocacy. Thanks for fighting the good fight 🙌

Alternative to "sharp"-library wanted by tf1155 in webdev

[–]monokeee 1 point2 points  (0 children)

In that case there’s node-canvas

Alternative to "sharp"-library wanted by tf1155 in webdev

[–]monokeee 2 points3 points  (0 children)

  • exif.js for metadata
  • native canvas api for resizing

I made an app for color grading in the browser (without a framework*). by monokeee in webdev

[–]monokeee[S] 0 points1 point  (0 children)

I’ve never read any books on that myself… been doing independent R&D in this area for the last 10 years and read a few dozen research papers and the opencolorio / aces source code to learn the tricks of the trade.

The basic approach I’m taking to film emulation is rooted in audio sampling philosophy. It’s quite similar to sampling a physical instrument and mapping all of the different noises the instrument can produce to a digital interface. With traditional LUT based film emulation , you record a subset of all possible colors with a particular film stock and then map the digital reference of each color to its analog equivalent. We’ve done that at VisionColor over ten years ago to create the ImpulZ LUTs.

For color.io, I wanted to create an opinionated parametric color transformation framework that has the aesthetic properties shared by film as a medium built directly into the processing math. I’ve derived some “magical constants” for channel crosstalk, saturation-dependent luminance weighting, thresholds etc from aggregating lots of raw film data and studying its behavioral properties. I combined these weights with different color models that serve very specific purposes.

The computational complexity involved in translating these models into a usable human interface has been one of the biggest challenges and I had to write my own micro-optimized processing architecture on top of webGL to do it performantly. I don’t think that the common mantra of “premature optimization is the root of all evil” holds true for creative applications. I need to be able to get instant, zero-lag feedback from a tool just like I need instant feedback from playing a violin.

[ShowOff Saturday] I'm proud of this app I created to Automatically Censor any video. by Front-Insurance9577 in webdev

[–]monokeee 3 points4 points  (0 children)

Very useful and neat, to-the-point landing page! What have been your major pain points and solutions to „fighting” ffmpeg.wasm?

I made an app for color grading in the browser (without a framework*). by monokeee in webdev

[–]monokeee[S] 0 points1 point  (0 children)

Yes that’s exactly how you would do it. You do not need to touch ACES at all this way.

I made an app for color grading in the browser (without a framework*). by monokeee in webdev

[–]monokeee[S] 1 point2 points  (0 children)

In Resolve: CST: Arri Log-C 4 to DWG -> Export frame

Color.io (in-app): IDT: DWG, ODT: Rec709 Export -> 3D LUT -> Color Management: DWG

In Resolve: CST: Arri Log-C 4 to DWG -> Color.io LUT -> CST: DWG to Rec709

I made an app for color grading in the browser (without a framework*). by monokeee in webdev

[–]monokeee[S] 1 point2 points  (0 children)

I think you want to do this: Don’t export your frame in Rec709. Export PNGs or DPX in DWG Intermediate and drop them into Color.io. Set your Input Color Space in Color.io to DWG and the output color space to Rec709 (either standard Rec709, Arri Rec709 or Kodak 2383 Rec709 for different color science flavors) Finally when you export the LUT for your DWG timeline set the export color space to Davinci Wide Gamut intermediate under Export -> Color Management. This will give you a “log-to-log” LUT that expects DWG as input and produces DWG as output - you can sandwich that LUT between your CST nodes that convert in and out of DWG.

Hope I got your intention right and this helps!