DEV Community

Cover image for Colors with Rio's oklab color space
Peter Shinners
Peter Shinners

Posted on

1 1 1

Colors with Rio's oklab color space

While browsing the Rio source I noticed it manages colors in the Oklab color space which I hadn't heard of. I also wasn't expecting the technique it used in the Color.brighter and Color.darker methods.

I've been impressed with Rio in the past for allowing minimal Python code to create user interfaces. Curious with how these color operations felt in practice, I created a quick 50 line demo to interact with a simple color wheel.

It looks like the Oklab color space excels at color gradients by giving a natural range through each hue. Unfortunately I don't immediately like how Rio is adjusting brightness with these methods. In the video, see how the outer light colors change through their range of brightness separately from the inner dark colors. This means Color.lighter(0.1) will have a drastic affect on dark colors and minimal change to lighter colors. This could still be a desirable quality, so I'm unwilling declare this as good or bad.

Separately; points to Rio once again for making small and lightweight tools fun to develop. The community has been lightning quick on my wild questions and ideas. Also points to Oklab for their impressive gradient examples.

Quadratic AI

Quadratic AI – The Spreadsheet with AI, Code, and Connections

  • AI-Powered Insights: Ask questions in plain English and get instant visualizations
  • Multi-Language Support: Seamlessly switch between Python, SQL, and JavaScript in one workspace
  • Zero Setup Required: Connect to databases or drag-and-drop files straight from your browser
  • Live Collaboration: Work together in real-time, no matter where your team is located
  • Beyond Formulas: Tackle complex analysis that traditional spreadsheets can't handle

Get started for free.

Watch The Demo 📊✨

Top comments (1)

Collapse
 
shredwheat profile image
Peter Shinners

Minus 100 points to Youtube for forcing my video into a "Shorts" format.

Image of DataStax

AI Agents Made Easy with Langflow

Connect models, vector stores, memory and other AI building blocks with the click of a button to build and deploy AI-powered agents.

Get started for free