I Made a Color Scheme for Programming Using Math | Hacker News Reader

I Made a Color Scheme for Programming Using Math

draculatheme.com

19 pointszenorocha16 comments

Is there empirical research that corroborates the claim that a particular theme, mathematically symmetric or not, reliably improves productivity? Or are those claims directed more at the accompanying book and less about the theme itself?

It uses a physical model of color, not a perceptual model, and it ignores ambient light color, so it's already clearly missing the boat on scientific colors.

The example it a vomit of color where punctuated, tags, and content all scream for attention with equally loud voices.

> ...all scream for attention with equally loud voices. < This

## The problem

In 2013, my laptop was stolen, so I had to re-configure everything. At that time, there were thousands of color schemes for programming out there, but none of them were appealing to me. So I decided to create my own.

Fast forward to 2020, Dracula is one of the most popular themes in the world. Still, I felt that something was missing. I wanted to help with more than just a theme.

## My solution

I decided to create a new color scheme using mathematical concepts to normalize lightness and saturation. I also tested the contrast ratio for all colors to afford the best readability.

More than that, I built Dracula PRO to be a collection of productivity tips for developers.

I would love to hear your thoughts on this. And if you have any questions, please do comment

Could you please detail some of the math you used?

I'm not going to be able to give all the details, but I can explain the process to get there. First, I looked into different ways to represent colors (hex, rgb, hsl, etc). Then, I studied the number of colors used on a terminal emulators. With that number, I was able to plot on a color wheel all the different hues. I used different geometrical degrees for the hue, but kept the saturation and brightness the same, in order to provide harmony. My mental model was based on HSL, but the same concept can be applied in different ways.

If you're interested about the math behind how humans perceive the colors: https://en.wikipedia.org/wiki/Color_difference

You realize the importance of it when you try to calculate the difference between two colors simply by comparing lets say red green and blue in a color with rgb format.

I'd figure that for human eyes, it would make the most sense to generate pallets from colors that are equal distance in the CIELAB colorspace[0] (or similar).

I personally love the Dracula Pro examples on your webpage, and will definitely strongly consider buying it after I graduate, and recommend it to others. But I'm curious about the justification for using colors that are approximately equi-distant on a synthetic RGB-derived colorspace instead of a human-eye-derived colorspace like CIELAB.

Am I wrong? It looks like the Dracula PRO pallet is composed of points roughly equidistance in an HSL/HSV disk based on the sRGB vectors in one of your images[1]. But maybe that's a red herring; looking at the colors themselves in the IDE they look fairly CIELAB-esque to my eye at least so maybe you did use that family of colorspaces (HCL[2] or Lab, for example).

For people who want to play around with this themselves, http://hclwizard.org:64230/hclwizard/ is a great resource, although there may be other/better ones. I personally found value in seeing the points mapped to the 3D volume, and at least partially understanding how the HCL and Lab volumes map to sRGB volumes. This one doesn't show the volumetric spaces in 3D, unfortunately. But it does show some incredible visualizations under the "Spectrum" tab which show how linear the choices are in f(RGB) vs f(HCL) parameters.

Also important for readers to note that this pallet, "Dracula" is quite different from the potentially more widely seen "Darcula" pallet included in JetBrains IDE. It's easy to misread the spellings, but this one (Darcula) seems to have much, much better colors. To my eye at least.

0: https://en.wikipedia.org/wiki/CIELAB_color_space

1: https://draculatheme.com/static/img/pro/wheel-dracula-pro.pn...

2: https://en.wikipedia.org/wiki/HCL_color_space

3: http://hclwizard.org:64230/hclwizard/

I love the Dracula theme - it's always the first customisations I do after setting up a new computer in VSCode, Vim, and which ever terminal I'm using. So I'm keen to support your work even though I'd need to see some side by side comparisons to see how the Pro and non-pro themes look.

But can you explain how the licensing works with Dracula Pro? I often have more than three computers on the go, and am constantly trying out new Linux distros for a week or two before blowing away and reinstalling. How do you track the three computer limit of the licence?

Thanks.

It's great to hear that Dracula is one of the first things you do when you get a new machine!

Unfortunately, I don't have a side-by-side comparison but what I can tell you is that it's similar to the original one with several color corrections to balance the lightness and saturation. Plus, the 6 new variations.

About the license, this is mostly to prevent people from purchasing one package and then sharing with their entire company. It's totally ok if you use it in more than 3 devices as long as it's for personal use.

"available everywhere"

I guess vim and emacs are nowhere.

(it does look nice though!)

These are coming pretty soon :)

I’ve been using Dracula everywhere for years and love it. I’ll buy this purely to say thanks, getting a shiny new theme is just a bonus. Fantastic work, thank you.

That's so kind of you. Thank you so much ;D

I know this is a paid product, but is there a plan to share the colors hex codes?

Hey @abioscar, there are no plans to share the colors as of right now, but that's a good idea for the future

Reply on news.ycombinator.com