# 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:** 8\ **Page:** 1
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [April 5, 2025, 9:41am UTC](https://forums.realmacsoftware.com/t/theme-colour-math/47051/1 "2025-04-05T09:41:24Z")
The theme colour math does not appear correct. In the attached image is the default indigo that tailwind provides, and an attempt at recreating it using the built in colour math. The current colour math is shifting the hue, and getting to dark at the dark end. I know it ain’t easy. I tried it myself with chroma, but I found I got a lot closer to the desired result with RGB than Lab colours. Hope you guys can give this another look over. ![CleanShot 2025-04-05 at 10 .31.07@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/3/63357b0ec5ba90f2977b398621d418927ba754bf.png) If you try and recreate the palette from darkest down, it’s even worse, its losing a bucket load of saturation in the first step. ![CleanShot 2025-04-05 at 11 .38.13@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/8/c/8cefed54e7a9ac1dac2368b5df9d4946e113c0bf.png) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [April 5, 2025, 10:56am UTC](https://forums.realmacsoftware.com/t/theme-colour-math/47051/2 "2025-04-05T10:56:36Z")
The Tailwind gradients are handmade; it seems each colour has been carefully picked and chosen — it’s one of the reasons why all the built-in colours are so nice and “just work”. > Tailwind CSS includes a vast, beautiful color palette out of the box, carefully crafted by expert designers and suitable for a wide range of different design styles. While we could improve our algorithm (and might do so in the future), it won’t ever match the quality of the “carefully crafted” palettes found in Tailwind. You can switch the “Custom” toggle on if you need more control to generate the perfect palette 😊 ---
**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. ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [April 6, 2025, 2:06pm UTC](https://forums.realmacsoftware.com/t/theme-colour-math/47051/4 "2025-04-06T14:06:21Z")
> [@Beblebroks](#): > > [https://www.tints.dev/blue/3B82F6](https://www.tints.dev/blue/3B82F6) Absolutely spot on. ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [April 6, 2025, 5:22pm UTC](https://forums.realmacsoftware.com/t/theme-colour-math/47051/5 "2025-04-06T17:22:02Z")
> [@Beblebroks](#): > > [https://www.tints.dev/blue/3B82F6](https://www.tints.dev/blue/3B82F6) This is an excellent resource. I just used it to tweak all of my palettes, they look a lot better now. Thanks for sharing. ---
**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, 5:58pm UTC](https://forums.realmacsoftware.com/t/theme-colour-math/47051/6 "2025-04-06T17:58:20Z")
@dan shared it before with me. I have seen it before but forgot about it. 🍻 to @dan ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [April 6, 2025, 6:34pm UTC](https://forums.realmacsoftware.com/t/theme-colour-math/47051/7 "2025-04-06T18:34:12Z")
Haha, thanks @Beblebroks — [UIColors.app](https://uicolors.app/generate/) is also handy! ---
**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, 6:59pm UTC](https://forums.realmacsoftware.com/t/theme-colour-math/47051/8 "2025-04-06T18:59:19Z")
Yeah but not free to use when building a specific shade for a specific number. You shared that one too last time. But yeah missing the flexibility on that.