# Theme colour math **URL:** \ **Category:** Elements\ **Created:** [April 5, 2025, 9:41am UTC](https://forums.realmacsoftware.com/t/theme-colour-math/47051 "2025-04-05T09:41:24Z")\ **Posts on this page:** 1\ **Showing post:** 3
**Author:** ![Beblebroks](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@Beblebroks](https://forums.realmacsoftware.com/u/Beblebroks)\ **Post date:** [April 6, 2025, 1:49pm UTC](https://forums.realmacsoftware.com/t/theme-colour-math/47051/3 "2025-04-06T13:49:37Z")
In one of the other chats @dan provided the formular. I also use it in my sketch plugin for the default elements colors and it works 1:1 the same like when setting the color in Elements. > [@Elements 0.6.8 (23389)](https://forums.realmacsoftware.com/t/elements-0-6-8-23389/46819/7): > > We generate 13 colours and drop the first and last, otherwise we get a black and white on every gradient. I wouldn’t get too hung up on it; it’s just there as a means to generate gradients quickly. We’ll probably refine it further in the future. Here’s the code we currently use… and yes, we’re open to improvements blush import chroma from "chroma-js" rw.color = function(colorJS) { const brightness = colorJS.brightness const actualColor = chroma(colorJS.color) const lightColor… The problem with that approach is abit with the coloring. Specially when you try to set a 100 the 50 looks aweful. I still prefer the approach I have seen here: [https://www.tints.dev/blue/3B82F6](https://www.tints.dev/blue/3B82F6) Including the saturation and hue offset. Very good book that explains this: > **[Refactoring UI](https://www.refactoringui.com/)** > > Learn how to design awesome UIs by yourself using specific tactics explained from a developer's point-of-view. --- _[View the full topic](https://forums.realmacsoftware.com/t/theme-colour-math/47051)._