Welcome to the final episode of Season #12 of the PolicyViz Podcast! Thanks so much for checking out the show this season and I hope you enjoy your summer. I’ll be back this fall with more great episodes.
On this episode of the show, I’m joined by David Aerne, a freelance developer and designer based in Zurich who has spent years building a remarkable collection of open-source color tools. We dig into the difference between color models, color spaces, and gamuts, and David explains why thinking about color in three dimensions—like navigating a cylinder—can make choosing palettes so much more intuitive. We talk through several of his projects, including Color Names (a curated list of nearly 32,000 community-contributed color names), Rampensau for generating color ramps, and the playful RYB-inspired explainer that simulates how physical, “printy” colors look on screen. David shares his philosophy that we should integrate the systems that generate colors into our work, rather than freezing a static palette and losing the creativity along the way. Whether you build dashboards, design slides, or just love playing with color, this conversation will change how you think about picking your next palette.
Resources
Website (project list): Elastic
David won the Swiss Design Award 2026 in the Interaction & Media Design category!!
Guest Bio
David Aerne is a freelance developer and designer based in Zurich, Switzerland, who has worked in the field for more than 25 years and on his own for the past decade. He builds open-source tools focused on color theory, color generation, and color palette creation, including widely used projects such as Color Names, Rampensau, and Poline. Drawing on early passions for spray painting and pixel-art video games, David explores how color systems can be made transparent, reusable, and integrated directly into design and development workflows. You can find his work at elastiq.ch and follow him on Bluesky and X at @meodai.
Different Ways to Listen to the Show!
New Ways to Support the Show!
With more than 300 guests and 12 seasons of episodes, the PolicyViz Podcast is one of the longest-running data visualization podcasts around. You can support the show by downloading and listening, following the work of my guests, and sharing the show with your networks. If you’re interested in financially supporting the show, you can sign up for my Patreon platform, make a one-time payment via PayPal, or shop one of the show’s sponsors.
Transcript
00:01.66
Jon
Hi, David. Good. going to say good morning. i got to catch myself again. good not Good afternoon for you. Good morning for me. How are you?
00:08.28
David Aerne
Yes, I’m good. Thanks, John.
00:13.54
Jon
Thanks for coming on the show. I’m excited. ah So we’ve got, don’t know, like we could talk about like a dozen of your color tools. um This would probably be like a 12 hour interview. So maybe we we won’t talk in detail about each one, um but there’s some amazing stuff here.
00:31.19
Jon
um I thought maybe we’d start with like your background, like, you know, your training and then, you know, and then, you know, how’d you get to where you are now? And then maybe just go into like,
00:42.94
Jon
you know You’ve built a whole bunch of tools that are focusing on color color theory, color development, color palette selection. like Why has that become a passion project of yours?
00:53.09
David Aerne
Sure. So I started as developer, mostly. So in the late 90s, I, like most people, I started to do websites. And this became more than a passion. It also became my job.
01:13.66
David Aerne
And because it was really easy to find work as a developer back then, that’s what I mostly did. I also had a passion for design.
01:20.91
Jon
Mm-hmm.
01:23.19
David Aerne
But it was like harder to get jobs as a designer. But I never had like to look for a job as a developer. So it was mostly my
01:33.64
Jon
Mm-hmm.
01:36.67
David Aerne
tojan
01:40.79
David Aerne
yeah my way of getting into a company or a position as a developer. And then I ended up like doing some design as well.
01:53.61
Jon
Right. um So then, so you’ve always been on your own, always a freelancer.
02:01.72
David Aerne
No, I’ve been on and off, but now i have been doing this for 10 years. yeah So I’ve been employed in in some local agencies here in Zurich, but now since 10 years, or this is my 10th year where I’m on my own.
02:05.43
Jon
Oh, okay. Okay.
02:10.77
Jon
Mm-hmm.
02:14.93
Jon
Tenth year. Nice.
02:15.56
David Aerne
Yeah.
02:16.47
Jon
Nice. um So I do want to talk about your your broader freelance work, um but let’s talk about the the color tools. that’s what the That’s how I found your stuff. And I’m curious, and we get to, we should, I have this list that you sent me, this list of all these products, but like, where where did that come from? Like, what was the inspiration to to build these kinds of tools?
02:40.60
David Aerne
So I always like, I love, so as a teenager, I would spray paint a lot.
02:47.22
Jon
Yeah.
02:47.54
David Aerne
So I had like, yeah colors always like fascinated me, like the the physical side of it. And I also liked video games. I still like video games and especially like the pixel art that goes with it.
03:02.17
Jon
yeah
03:02.90
David Aerne
And then I got interested less in doing it, but like understanding how it was done and like, having these restricted color palettes and then how these color were chosen was always like fascinating to me. So I researched a lot as like a young adult already, like how are these palettes made? What are the tools used? that And like yeah it’s a huge world of of tools that is there since the 90s that has been used by pixel artists that I found
03:29.37
Jon
Yeah. Yeah.
03:34.39
Jon
Right.
03:38.74
David Aerne
fascinating, but I haven’t had a real use case then. But then at my last job, yeah was about 15 years ago. don’t I was, oh yeah, there was HSL where h is like the hue and I expected it to work in a way where I could just like rotate around this hue and just keep the other two values the same and the colors would look good.
03:55.30
Jon
Mm-hmm.
04:05.46
David Aerne
But turned out
04:05.67
Jon
Right.
04:06.84
David Aerne
It didn’t. So that’s where my obsession started to like understand why and then research a bit ah what I could do about it.
04:17.88
Jon
right
04:20.89
David Aerne
And yeah then i this fascination caught with how could you mathematically produce color palettes that look good without having to pick each individual color manually.
04:34.58
Jon
Yeah. Yeah. So maybe before we look at some of the tools, maybe would be helpful for folks listening to understand a little bit about color theory. And you just mentioned HSL space. So maybe that would be good tool.
04:53.27
Jon
starting point to help people understand like, what are the three values and then how do they relate to one another? And we don’t need to get into the high level math, but um I do think, I mean, I put myself in this bucket. I do think many people, including myself, think about choosing colors as I have a blue color. What’s going to look good with that. And it’s not from any mathematical or, you know, objective perspective. It’s, I like this shade of green and this shade of orange and, you know, um But there’s more, but there’s a math and there’s a science behind it. So maybe you could talk a little bit about that, about that math and that science.
05:28.04
David Aerne
I’m not sure if there is math about what you are going to like, but there is definitely math about like in which relation the colors you like are.
05:39.35
David Aerne
And these depend a lot on the color model. But let’s make a step back. So you mentioned, so maybe we we should make like establish a wording so there is a bit of confusion about like color models color spaces what this means and like gametes so these three words are are used a bit interchangeably sometimes and so i use often use the word color model to refer to hsp because it’s the model we choose to mathematically navigate a space so the space would still be rgb in
05:50.87
Jon
Mm-hmm.
06:01.95
Jon
Mm-hmm.
06:17.94
Jon
Mm-hmm.
06:18.39
David Aerne
and for for HSL, for example, but it’s I refer to it as a color model.
06:25.03
Jon
Okay.
06:25.66
David Aerne
There is no like right or wrong. It’s just to make clear what I’m talking about.
06:29.91
Jon
Right.
06:29.90
David Aerne
And the gamut is more like what can this setting produce? It’s like how wide is the color gamut of of colors that your screen or the device can produce?
06:39.79
Jon
Mm-hmm.
06:43.18
David Aerne
So these are these three concepts that I think are important to
06:43.89
Jon
Okay.
06:48.81
David Aerne
to understand very basically just.
06:51.51
Jon
Right.
06:52.54
David Aerne
So I’m going to refer to color models when talking about HSV.
06:52.83
Jon
Right.
06:56.26
David Aerne
So that’s what I mean. It’s like this mathematical abstraction we have to navigate these spaces.
06:58.74
Jon
Okay.
07:03.42
Jon
Right. And so HSV, so maybe maybe you could describe or define HSV for folks. We’ve got the the three elements and then we don’t need to do the exact mathematical equations, but how they how they relate.
07:15.80
David Aerne
Yeah, sure.
07:17.72
Jon
Yeah.
07:18.55
David Aerne
So RGB would just be like the how intensely like the three colors on your screen are stimulated to to so show a certain color.
07:30.49
David Aerne
But I think, or at least to me, it’s very unnatural to think in that way. I don’t usually think in like how three colors are mixing together to produce ah another color.
07:40.98
Jon
Yeah.
07:42.46
David Aerne
So there is that’s why I think people came up with other models that would like be slightly differently. And HSL and HSB, um they are cylindrical. So the H is going all the way around. So at 360, it starts again. It goes from 0 to 360 and then starts again. And it’s mostly at red. 0 is at red, and then it turns around. And that’s calculated back to RGB.
08:15.19
Jon
Okay.
08:15.64
David Aerne
So it’s mostly translating from one model to another.
08:20.14
Jon
Right.
08:20.98
David Aerne
And the S and L is saturation lightness, or V is like value, and it’s a bit different. it It’s just like this wide range like from where to where it goes.
08:35.06
David Aerne
But but these are a bit exactly.
08:35.83
Jon
Within, with, within the cylinder.
08:39.03
David Aerne
It’s like if you watch some of my visualizations that
08:39.55
Jon
Yeah.
08:44.05
David Aerne
You might link in the description. It might make it clearer, but it’s it’s a cylinder where like one end is is ah dark, the other one is light, and the center has like full saturated ring of hue.
08:57.26
Jon
Right.
08:58.14
David Aerne
And that’s, to me, much easier to like navigate mentally. right If I want a complementary color, you just want to have a color that is on the other side of this ring, and and all of a sudden, it gets
09:03.26
Jon
Yeah.
09:08.98
Jon
Right.
09:12.12
David Aerne
much easier to to navigate.
09:15.26
Jon
Right. Because you can just imagine working in these three, in this three dimensional space, moving inside versus outside the cylinder and then along the cylinder and then, you know, outside.
09:28.82
David Aerne
Exactly.
09:29.78
Jon
Yeah.
09:30.14
David Aerne
And most color pickers show you like a 2D plane, and then they let you navigate the third dimension by showing you a slider or something.
09:31.06
Jon
Uh,
09:41.08
Jon
Right, right. Do you, I mean, to that point, do you, do you think the reason why the standard is that 2D representation is because creating or generating a 3D models is just too complicated to create in a, in like a little color picker in PowerPoint, or that it’s too complicated? Or like, is it just a user experience that, that we’ve,
10:03.58
Jon
sort of navigated to this like 2D representation. Cause I agree with you, like the three d thinking of imagining the cylinder in my head, it is really easy to just imagine those three ah variables.
10:14.71
David Aerne
Yeah. So I think it’s ah mostly about user experience because I don’t know if you have used Blender before or any 3D program.
10:19.74
Jon
Yeah. e
10:23.17
David Aerne
it might The controls are not easy to pull off for a treaty for navigating a 3D space on a 2D plane.
10:28.05
Jon
Yeah.
10:31.94
David Aerne
so I think it’s mostly about that.
10:32.82
Jon
Right.
10:33.54
David Aerne
it’s just making it accessible. Like you have this one plane that is X and Y, and then you have this third dimension that you change in another way. So I’m sure there there are plenty of color pickers that tend to be in 3D.
10:41.72
Jon
Right.
10:48.25
David Aerne
But unless you’re like an expert in using it, i I don’t think for most users, it’s something that would be practical.
10:55.06
Jon
Yeah. Right. um So before we get into some of the tools, I did want to ask you, you you said that you, you were interested in and painting, um spray painting and and video games. And I’m just curious about,
11:10.81
Jon
you know, your experience or feeling about colors on a screen versus colors that you paint on a wall. And like, it’s different when you’re painting on a wall. You can’t like, you know, move this cylinder around and pick where you want to be. You sort of have to like paint the colors to find what you want. So like, I don’t really know what the question is there, but I i guess if there was a question like,
11:33.62
Jon
When you work, you know, working with color, I could make this a simple question, like, do you prefer digital or in-person? But I think more of the question is like the feeling between working in those two different mediums.
11:45.18
David Aerne
So I haven’t been spray painting in 20 years. so
11:48.79
Jon
Yeah. Okay.
11:49.62
David Aerne
So, yeah.
11:49.92
Jon
So maybe after this, after this interview, you’re going to go back down to the store and pick up some spray paint. Yeah.
11:55.93
David Aerne
I mean, I have been painting like random objects or walls in our home, but that doesn’t include mixing most of the time.
11:59.99
Jon
yeah
12:03.90
Jon
Right.
12:04.86
David Aerne
But I think they’re not the exact same. I mean, one is like additive, the other, um, uh, subtractive. So like on a screen,
12:12.44
Jon
Yeah.
12:14.84
David Aerne
having all the pixels on produces white against like physical color, where all the colors to get together produce black or some dark color.
12:26.36
David Aerne
So I’d say this is the biggest difference. And one of the tools I’ve shared with you, I try like to simulate this for the screen, actually.
12:29.69
Jon
Yeah.
12:36.50
Jon
Mm-hmm.
12:37.66
David Aerne
um And the other main difference is that often yellow is used as a primary instead of green because it’s just easier to mix.
12:46.06
Jon
Mm-hmm.
12:47.58
David Aerne
It’s just easier to mix with yellow physically than it is to mix with green because it’s really hard to get like a very pure bright green as like a physical color.
12:48.18
Jon
Oh.
12:50.84
Jon
Right.
12:58.10
Jon
Yeah.
12:59.82
David Aerne
And so I think that’s why in like schools, it’s still thought as like a ah primary
13:00.70
Jon
Right.
13:07.03
David Aerne
color when it comes to like physical colors, even if it might physically not be super accurate, it doesn’t matter.
13:07.38
Jon
Right, yeah. Right, right.
13:15.52
David Aerne
It’s not very practical to use a a very bright green to mix colors.
13:17.43
Jon
Yeah. Right, right. um Okay, so um into the color tools, before we get into them, one last question.
13:28.50
Jon
When you started building these and we have some in an order here, so we’ll get to that in a second. But when you started building more of the color picker, a chooser, and I would even call some of them like good playgrounds to like explore color.
13:43.54
Jon
were Were you trying to solve a particular problem that you saw on some of the existing tools or were you just like, I could just take another perspective or another approach to um to this task of creating palettes?
13:58.74
David Aerne
I was just curious about if I could pull it off. So there were color generators out there.
14:03.24
Jon
Yeah.
14:07.22
David Aerne
And then i had to do some myth busting because I was curious about how they were technically working.
14:12.34
Jon
Yeah.
14:13.40
David Aerne
And some were quite transparent about it. Like some just use like traditional color theory that doesn’t apply too well to HSL, I have to say, or at least it doesn’t produce like
14:21.11
Jon
Right.
14:29.82
David Aerne
tertiary complementary colors in HSL. I don’t produce colors that I find particularly pleasing, but it works on like the physical, i call it the physical color wheel, but from our discussion, you get what I mean.
14:45.66
Jon
Right. Right.
14:46.39
David Aerne
So i was I was trying to explore that. And while doing this myth busting, i found out that many of these platforms that claim that they generate palette, they actually don’t,
14:58.18
Jon
Yeah.
14:58.23
David Aerne
generate palettes at all they just have a very big list of color palettes and they just like show you one at random but that made me even wanted to try it harder right it’s like how how can we get palettes that look good without having a human to pick to make too many decisions and also
15:03.99
Jon
Yeah.
15:06.65
Jon
Right.
15:12.34
Jon
Yeah.
15:22.06
Jon
Right.
15:24.09
David Aerne
I, since i i ah you I design a lot in the browser, I like systems to produce colors for me. So I don’t have to like pick every individual color.
15:35.50
David Aerne
And that helps me like iterating much faster, right?
15:36.23
Jon
Right.
15:38.82
David Aerne
If I have a system that has like two or three knobs that I can change to dramatically change the outcome, it’s much more efficient and also much more creative than having to pick each color individually and then replace it.
15:45.72
Jon
who
15:53.05
Jon
For sure. And then to that point, do a lot of your tools, and ah i mean I haven’t looked through all of them, but do a lot of your tools enable the user to like you know, grab the code or download the XML file or whatever they need to like pop it into their tools.
16:07.38
Jon
So you’ve got this, like, you still need to get from your, uh, your tool into my product or Viz or whatever it is.
16:16.98
David Aerne
Yeah, so the early tools I did did that and they still all do, but I started to shape my
16:22.88
Jon
Mm.
16:25.78
David Aerne
tools more about how you would integrate this into your ecosystem. So they’re mostly built like manuals where it’s often like one side showing you the code and the the right side, for example, shows you an actual example of what would happen when you do this in code.
16:35.61
Jon
is he
16:44.86
Jon
Yeah.
16:45.50
David Aerne
And often you can interact with one side and see how the code changes or in both ways.
16:51.06
Jon
Interesting. Right.
16:52.15
David Aerne
so My idea is like to educate people how to use these tools to be able to reproduce that and and to to integrate that in their workflow so they can integrate the actual system and not the outcome of the system.
17:07.20
David Aerne
And I think that’s the biggest problem that most people have is like they generate a palette, then they almost cut off their color-making decisions by taking these values out and porting them to whatever system they’re going to use it in.
17:07.61
Jon
Right.
17:20.71
Jon
That’s right.
17:23.61
Jon
Right. And then that’s kind of the end. And then they never go back and like, it becomes a static thing and not a living, breathing Uh, I guess palette be the right word that they can continue to ah edit and adjust.
17:39.90
David Aerne
Yeah, and it’s almost like you’re taking away creativity that you had in the first place just by this translation step almost where you poured them over.
17:40.97
Jon
Yeah.
17:44.47
Jon
Yeah. Yeah.
17:50.27
David Aerne
So I still do it because most people want that. They want to copy paste these colors, but I try not not to promote it too much because my ideal idea is like that you would integrate the system that produces these colors to whatever you’re building.
17:56.87
Jon
Mm-hmm.
18:00.17
Jon
Mm-hmm.
18:08.82
Jon
Right, so instead of um instead of grabbing a fixed palette of six colors and popping it into Microsoft and having that’s your branded colors, um your approach and your tools enables people to actually grab a snippet of code, drop it into whatever they’re building, presumably in JavaScript or Svelte or whatever they’re they’re building.
18:26.23
David Aerne
Exactly.
18:31.04
David Aerne
Yeah.
18:31.27
Jon
And that way, while they’re working, they can continue to adjust and and play around with the colors in their product.
18:35.45
David Aerne
Exactly. Yeah.
18:38.48
Jon
That’s really interesting. Yeah.
18:39.67
David Aerne
And often, these are not even bound to code, but it’s more about the methodology. So I try to like visually explain how these techniques work in my libraries.
18:45.51
Jon
Mm-hmm.
18:49.55
David Aerne
So you could even reproduce this physically, as long as you reproduce that and use the system as an input and not the value it produces, I think you are keeping a lot of creativity that you would otherwise just give away.
19:00.15
Jon
he
19:05.38
David Aerne
And that’ that’s the main difference between the tools I’m trying to build and the ones that are already out there is I wanted to make as transparent as possible how this works.
19:06.14
Jon
Right.
19:17.05
Jon
Right.
19:17.20
David Aerne
That’s why most tools are open source.
19:17.78
Jon
Right.
19:20.03
David Aerne
And also to make it like visually understandable what what happens there.
19:23.64
Jon
Yeah.
19:24.18
David Aerne
so it’s just I try when possible not to just show a bunch of sliders or a value that you have to enter as numbers.
19:29.85
Jon
Yeah.
19:32.16
David Aerne
I try to represent this in some sort of UI that is going to be as easy to use as possible.
19:41.32
Jon
Right. But I also think you said, like, i can’t think of any of the color tools that I use. I mean, think they all basically. you play around with sliders and doggles and whatever, and then you have a set of colors and then you you, know, the many of them, you have to write down the color, the color code or you like copy and paste it somewhere, but then it’s done.
20:00.18
David Aerne
Exactly.
20:02.30
Jon
It’s like the task is to create the colors, but not integrate it into any, into not integrate that, that journey, that process, that work into a project that you can continually sort of develop.
20:13.18
David Aerne
Yeah.
20:13.50
Jon
Um,
20:13.88
David Aerne
So, but I think that that has a lot to do with like the history of the tools we’ve been using. Let’s take, i don’t know, Photoshop, for example, they were made for a print product.
20:19.29
Jon
easy
20:24.21
David Aerne
So there it makes sense that you make like a color decision and this day is the same forever, right? Because you’re going to print that at some point.
20:30.71
Jon
Right.
20:32.40
David Aerne
But in this exploration phase, it would be useful to have something where you can change it already. And in the digital tools, I think now it it starts to make a lot of sense of having something that you can switch because, I don’t know, we have dark modes.
20:42.95
Jon
Yeah.
20:47.09
David Aerne
Some brands have other sub brands that have ah different colors. So I think there’s there’s like a lot of like opportunity there to integrate these directly into the tools.
21:00.17
David Aerne
I’ve tried so by doing plugins, but ah luckily some of my clients are people building these tools. So I hope that I can bring some of that idea to these tools.
21:08.04
Jon
Mm-hmm.
21:14.17
Jon
Right, right. um Well, why don’t we talk about a few of these? um And I want to start with the first one you sent me, which I actually hadn’t seen and is super fun, is Color Names.
21:26.01
Jon
I’ll read the tag for folks here. A meticulously curated collection of 31,906 unique color names built from many sources and thousands of community contributions. now I think if I scroll back here in the GitHub, the…
21:41.46
Jon
last or the most recent commit was, you know, last week. But I think the first one, the initial commit was like nine years ago. So this is this is a project that’s been going on for while. So first off, I’m impressed that like, you know, either you or someone else is still doing commits on this on this project. So that that is impressive. um But can you talk about like, I mean, it’s very much in line of what we’ve been talking about.
22:04.99
Jon
You’re just, you’re just interested in color, but like, why was this project the first on your, on the list? Um, well,
22:14.11
David Aerne
It came out of necessity. So all the tools I’ve built, I’m showing some kind of colors and I want I wanted them to be more ah reliable than just a hex value because the hex value doesn’t I mean it looks nice and I can recognize that it is a color value but it doesn’t tell me anything about how it looks like and that’s why I wanted color names and then I thought oh awesome there are all these lists out there it turns out that most of these lists you’re not
22:25.85
Jon
mm-hmm.
22:34.62
Jon
Right.
22:44.44
David Aerne
you aren’t allowed to use them in your open source projects. Like the Pantone colors are proprietary, so it’s their list, right?
22:50.62
Jon
he Right.
22:53.00
David Aerne
I can’t just like ship it with whatever open source tool I’m building.
22:56.73
Jon
Right. right
22:59.35
David Aerne
So this was my first problem. And then the other is like the second biggest list I could find was Wikipedia and it had like 1,600 names.
23:09.50
David Aerne
But many of these names were very problematic for a various reasons some were very colonial let’s put it mildly and some were were just yeah plain bad and there was like a lot of repetition so I think I cherry picked the ones I liked from Wikipedia started from there and then just became a hobby my partner and I when we are on vacation at a new place we’re like We try a new dish and we think, oh, that’s an awesome color name.
23:26.74
Jon
Right.
23:34.65
Jon
Right.
23:43.46
David Aerne
And I added to this list.
23:45.37
Jon
Right.
23:46.33
David Aerne
And it became like a fun hobby that I just, whenever I see something new or something that would make a great color name, I add it there.
23:50.58
Jon
Right.
23:55.84
Jon
Yeah.
23:56.12
David Aerne
And others caught the bug. I mean, there’s I still have regular contributions where people have a good idea for a color name.
23:59.54
Jon
Yeah. Yeah.
24:03.24
David Aerne
And then I had to come up with rules, though, to explain what is OK.
24:03.86
Jon
yeah
24:06.84
Jon
So that’s what was going to ask.
24:08.38
David Aerne
Yeah.
24:08.66
Jon
that’s what was going to ask. So how do you, yeah, so if you’ve got like, I mean, there’s infinite shades of red, right? So like, how do you say that like, you know, an equivalent word for red?
24:19.10
Jon
Like, how do you, what’s the what’s the decision process?
24:22.65
David Aerne
So there is a lot of like, first it was just by feeling. I just started. and
24:27.15
Jon
Yeah.
24:27.64
David Aerne
But then I pretty quickly built a 3D representation of where the name land in different color models. i I’ve linked it as well.
24:34.37
Jon
Mm-hmm.
24:36.59
David Aerne
So basically it’s like 3D plane and you see every name as a little dot. And I just wanted to make sure that these dots are not too close together.
24:41.73
Jon
Yeah.
24:46.72
Jon
Mm-hmm.
24:46.65
David Aerne
So you have an actual red that is not instantly another color name because it’s too close. So there are automated tests now in there that make sure that the color that you will submit is not too close to an existing one.
24:52.47
Jon
Yeah.
24:58.52
Jon
Ah, great.
24:58.68
David Aerne
But that makes sure it spreads naturally. And
25:03.13
Jon
And so people submit, do people submit like when they, when they want to work on this or submit something, they submit the name and the code, the, the, the, the code.
25:12.37
David Aerne
the color value, yeah.
25:14.30
Jon
And then, and then the tool does the proximal location.
25:19.16
David Aerne
So it will just tell you that’s a name, that’s a unique name, yes, no, and it will also tell you if it’s too close to another name.
25:21.27
Jon
Okay. Right.
25:27.04
David Aerne
When you do your PR, ah the automated tests go through, and then it will just let you know if it’s okay or not.
25:31.47
Jon
Oh, interesting.
25:35.70
David Aerne
And on top of that, there is like a contribution file that that tells you what is allowed and not like, yeah, racist names will will be rejected and and stuff like that.
25:35.99
Jon
Right. Uh,
25:44.92
Jon
Right.
25:45.66
David Aerne
So like,
25:46.36
Jon
Right. Yeah. um Do you have a, so I’ll just for folks who I’ll put all the links, all these tools on the, on the show notes. So people should check them out, but like there’s the full list here and you can get these ah in all different formats. So there’s a JSON and CSV and XML and all this, but there’s the full list. There’s a best of names. There’s a short name. So there’s all sorts of different curated lists, but I’m curious, like, do you have a couple of favorite color names?
26:14.07
David Aerne
I mostly like the pun ones. So there’s like the 24 carrots that I like a lot or, or, uh, testosterone or like all the, all the fun twists on existing names.
26:17.88
Jon
Yeah. yeah ah yeah
26:28.95
Jon
Yeah.
26:29.80
David Aerne
I like a lot.
26:30.39
Jon
Yeah.
26:32.02
David Aerne
Um, but yeah, then I mean all the ones that evoke some kind of like, uh, or media. I like a lot, like,
26:42.10
Jon
Right.
26:42.86
David Aerne
There’s lots of pop culture reference references in there or to literature.
26:43.29
Jon
Right.
26:47.10
Jon
Yeah.
26:47.53
David Aerne
And and these are really nice.
26:48.50
Jon
Yeah.
26:49.01
David Aerne
is when you can like When you read a title and it evokes a color, i don’t know, Poseidon is a good example because you know it will be some kind of blue without having the word blue in there.
26:57.05
Jon
Yeah.
27:03.00
Jon
Right. Right. um I mean, there’s there there’s too many tools in here for us to go through each one. But but I think there are like maybe two or three that I want to i want to dive into. so um So this one is the the ah the rampant cell, right? um So this is a color generation library, but it’s a really interesting approach to it um because it’s got like, well, I’ll let you describe it. um so So why don’t you describe this one? And then also, I just want to point out for folks that like,
27:37.53
Jon
there’s like, you have like a whole, for most of these two, a whole documentation going on sort of scrolling down to the page. So there’s like the tool at the part, and then there’s documentation that sort of gives you like what you can do with it. But then it like, there’s a lot to scroll through. And then of course it links back to the, to the GitHub and the code. But maybe we could start with this one just and just talk a little bit about what, what this one does for folks.
28:00.94
David Aerne
Yeah, so I like that you picked that one first because that’s the most traditional approach to like color ramps.
28:07.74
Jon
e
28:07.89
David Aerne
Whenever you will look for how to generate nice palettes, this is the technique that you will find most commonly. it’s like There’s lots of like YouTube tutorials about like how to create good palettes or or on forums about pixel art where it’s about palette creation.
28:17.85
Jon
Yeah.
28:28.60
David Aerne
they often talk about how to create these ramps. And it’s pretty methodical. So I thought, ah, there is a an easy way there to like create a library.
28:41.61
David Aerne
And it mostly involves like using some kind of color model that has ah saturation and lightness, and then some way of controlling the hue. And then you have like increments in there.
28:54.34
David Aerne
and like There’s so many different ways of doing these increments at like an arc or a straight line or different spaces.
29:01.37
Jon
Right.
29:02.42
David Aerne
And I wanted to put this all into one library that I could easily reuse and that someone that would know what a color ramp is could quite use.
29:14.98
David Aerne
And Rampensau means stagehog in German. just
29:18.78
Jon
Okay.
29:19.26
David Aerne
and But I thought it it was a fun name because it has the word ramp in it.
29:19.74
Jon
if
29:24.62
David Aerne
So someone English speaking would would probably know what it is about.
29:25.21
Jon
Yeah.
29:29.40
Jon
Yeah, yeah, right, right. um So I don’t know how much we want to go into the to the details here, but I guess what i so what I like, what drew me, what draws me to this initially is just the the randomization piece, right? Like when you’re just like a lot, will say a lot of your tools are fun to play with.
29:50.81
Jon
Like, and there’s one more I want to i want to talk about that that’s also just fun. Like um you can randomize all these colors, but you also have, so I want folks to just imagine this for a second. So I’ll describe it in some detail, but like there’s a big color swatch at the top.
30:06.62
Jon
Probably, i don’t know what this is like 10 colors, nine colors. There’s a randomized button on the left and you can see sort of the the 3D representation of the color path. Below all that though, you’ve got, don’t know, 20 little boxes.
30:21.37
Jon
with different backgrounds combined with the color palettes. and And I’m curious about that because I would say that’s, I think one of the biggest things that’s missing from a lot of the standard color tools is they just ignore the background colors.
30:34.52
Jon
um you know It’s just like assuming everything’s going to be sitting on white on a white background and that’s clearly not true. um Do you want to talk a little bit about that about that that background selection choice as well?
30:46.82
David Aerne
Yeah, sure.
30:47.99
Jon
Yeah.
30:48.38
David Aerne
So the idea of creating a ramp most of the time is that one end is the light one and the other one is the dark one. So either either or, right?
30:55.86
Jon
Right.
30:57.78
David Aerne
You flip it, you have a dark mode, basically. And so these color systems are meant, not exclusively, but in my case, they’re meant to be self-contained. So i ideally, I would want to use only the color produced by one of these tools because i wanted like I might want to change them in the future.
31:15.63
Jon
hmm.
31:18.00
David Aerne
So I want some kind of mechanics to be able to reproduce that and to reuse. I don’t know. If I know I’m having eight colors, then I’m going to use these eight steps in various ways in my design. But I want like to be able to just generate a bunch of new colors and then just see how it applies to my design.
31:37.46
David Aerne
And so what I tried in the boxes you mentioned is just like showing random combinations of the color that you produced with colors that would be non-repeating.
31:46.31
Jon
Mm-hmm.
31:50.17
David Aerne
So unique color, a set of, I think it’s four colors of the palette you generated that are just unique and in different combinations.
31:54.96
Jon
Mm-hmm. Yeah.
31:59.61
David Aerne
So it could give you an idea of like how this would look like in a real design. it I wanted to make it not too concrete, not like a web design or something, because you might use this for whatever.
32:09.37
Jon
Yeah.
32:11.86
David Aerne
I use it for generative art.
32:14.53
Jon
Mm-hmm.
32:14.46
David Aerne
Others might use it for a website or ID for a poster or whatever. So I wanted like an abstract representation or give you a good idea of like how these combinations could look like and whether you like them or not, or you but need to continue to tweak the settings until
32:23.06
Jon
Yeah.
32:34.01
David Aerne
the randomized results looked pleasing you.
32:36.89
Jon
Right. Right. Yeah. I mean, I think it’s something that’s really important that often gets either omitted or is just an assumption that you are using white background or black background. And that’s kind of it. And like you’re on your own to do the testing. But what this allows you to do is actually do that test explicitly within the, within the tool.
32:59.06
Jon
um The other one I wanted to talk about, and I think this was the one um that a friend first sent me that really ah caught my eye is the,
33:13.82
Jon
R Y bitten, uh, project, which is more of a explainer tool about color theory than like a, a picker.
33:15.70
David Aerne
Yes.
33:27.07
Jon
Right. Um, And I will just say that there’s a part in this tool. So this is like, um well, I’ll let you explain in a second, but i will I will just say there’s a part in here and I’m trying to scroll to find it that when I first read this, I was just sat here and played.
33:43.35
Jon
um It was just, it was like one of those things that you just like, like to move your mouse around. It just like, it’s just a joyful like moment of meditation within the color space. So anyway, um but I really liked this one.
33:54.35
Jon
I thought maybe we could talk about this one um as well.
33:56.66
David Aerne
Sure. So I like that you picked that one as well because it weaves in a bit into the physical color thing. So I ah really like…
34:05.21
Jon
Yeah.
34:10.97
David Aerne
colors that look physical, especially on the screen. I think it has something pleasing. It it it makes something look real to me.
34:18.71
Jon
Mm-hmm.
34:19.38
David Aerne
And I was wondering if there was a way to do this without me having to explicitly pick colors that look that way.
34:29.62
David Aerne
But I just wanted basically to be able to pick a random color and it would look natural.
34:36.80
Jon
Mm-hmm.
34:36.69
David Aerne
And I researched a bit what methods were out there to do so and the most practical way to like bake that was to create some sort of subset of RGB.
34:50.30
David Aerne
So you have to imagine rgb being this large cube and let’s say you want to like restrict yourself by not allowing the very bright colors to be used.
34:55.48
Jon
Mm-hmm.
35:03.93
David Aerne
The ones that you obviously need a lot to be produced by light to look that bright So what this does is like it creates a subset of RGB and switches around some of the RGB corner colors.
35:10.56
Jon
Yeah.
35:18.90
David Aerne
So for example, white and black are inversed to simulate like this, hey, when you have all the colors together, you get black and you don’t get white, for example.
35:19.67
Jon
Okay.
35:22.74
Jon
Okay.
35:29.06
Jon
Mm hmm.
35:30.55
David Aerne
And some of the RGB colors are switched out. And I created a library with that that would do that. And I found it very pleasing to use because all of the sudden I could just math random any color and it would look printy somehow.
35:45.91
Jon
Mm-hmm.
35:50.33
Jon
ah Yeah.
35:50.26
David Aerne
And um then I started to create different RGB subset profiles, if you want so, like based on books about color that are 100 or 200 years old,
35:58.14
Jon
Mm-hmm.
36:05.02
David Aerne
like do it or There are many, many books out there that are accessible over archive.org, for example, where just picked colors to create these custom profiles.
36:12.86
Jon
Mm-hmm. Mm-hmm.
36:17.40
David Aerne
And the website, so I built this website over the past four or five years. It took me forever to build this website because it was mostly a pretext to just have a pretty website.
36:26.00
Jon
Yeah.
36:32.14
David Aerne
is I loved how these colors looked.
36:32.92
Jon
Yeah.
36:35.42
David Aerne
And I like to design these little modules.
36:36.86
Jon
and
36:40.26
David Aerne
So I just wanted, i just, this was my playground to like try something with these colors and coincidentally explain a bit what I did with this library, but it’s mostly a huge playground for color.
36:44.41
Jon
yeah
36:55.87
David Aerne
It’s not the best tool to do anything with it, but like a toy basically.
37:00.57
Jon
Yeah, yeah, yeah. It’s it’s definitely, it definitely feels like a ah playground. I mean, i found the one is that is the is the pigment mixing part where it’s like a grid of color squares.
37:15.83
Jon
And when you put your mouse over it, it’s sort of like the square gets a fills the space and it’s just fun to just play around. There’s um there’s ah basically a Venn diagram of red, yellow, blue squares circles that you can move around and match and see how they, they basically mix kind of like, yeah, and in real life.
37:33.82
David Aerne
yeah
37:34.89
Jon
So um yeah, it’s a super fun, but also it explains like what’s going on, which is the other, the other part of it. um
37:43.32
David Aerne
I mean, I had to find texts to write with these components.
37:46.78
Jon
Yeah, I bet. Yeah, right.
37:48.26
David Aerne
So it’s mostly like, okay, this is the general ID.
37:48.64
Jon
Yeah. Yeah.
37:51.98
David Aerne
And then I had like all these visual components and then like I kind of like brought the text around it.
37:52.47
Jon
Yeah.
37:59.62
David Aerne
So it’s probably not the best educational material. It’s really a toy in the first place.
38:05.72
Jon
Right.
38:07.19
David Aerne
And I i needed some something to say with all these. And I moved it around a thousand times. i
38:13.47
Jon
I bet. Yeah.
38:13.66
David Aerne
I reviewed the the text a lot until it kind of clicked. And i didn’t I don’t know if you saw, but on the lower left, there is a button that lets you switch to a code view.
38:26.39
David Aerne
And then it turns again to this manual mode where it explains how to use the library to produce this these colors.
38:27.64
Jon
Oh.
38:35.57
David Aerne
And the idea is just to give you and a feeling for how the colors that this library can produce will look in different situations. So you can pick a a profile that you like, or the website lets you create your own profile based on a picture, or just by moving the colors around by yourself.
38:51.81
Jon
Mm
38:55.23
David Aerne
And then the idea is that you can scroll through the website, see the the colors in different situations, and that you can get a feel of, hey, will this work for what I’ll be using it for.
39:07.05
David Aerne
And then it lets you, there is like a ramp editor as well there that lets you export it in various formats.
39:07.86
Jon
hmm.
39:10.97
Jon
Yeah.
39:13.50
Jon
Right. um For folks who are really interested, um what are the coding libraries you use to build a lot of these? And I know people can go in and explore the code, but just for folks who are listening, like what are you primarily ah working in?
39:31.42
David Aerne
So I’m working in JavaScript, and I try to make everything as vanilla as possible. So when whenever possible, I don’t use any third-party libraries because I wanted to make it as easy as possible to integrate it somewhere else without any restrictions about licenses or even by its size.
39:37.24
Jon
Mm-hmm.
39:52.39
David Aerne
I want it to be very concise and small.
39:54.13
Jon
Yeah.
39:55.11
David Aerne
when I do use a library, there’s a JavaScript library called coolLaurie that i I use a lot for like color model conversion from one model to another.
40:04.36
Jon
Mm-hmm.
40:05.68
David Aerne
But most of the stuff I do is like completely self-contained.
40:11.16
Jon
Okay. Okay. So for folks who are interested in in grabbing the code, they can do that. um Okay. Before I let you go, um we’ve we’ve talked a lot about your color tools, but you also do a lot of other development, a lot of other projects. um ah Maybe you could just like, is there a project or two that like you really, i mean a recent project maybe that you really like is a good example of the kind of work that you do?
40:38.97
David Aerne
Yeah, so mayor maybe there’s one called charcuterie or charcuterie. I think it’s pronounced in English.
40:45.50
Jon
Yeah, yeah
40:46.69
David Aerne
is
40:49.10
Jon
I’m going to try not to butcher your name, but okay. um Yeah.
40:53.68
David Aerne
It um is a tool to explore Unicode characters by visual similarity.
41:02.97
Jon
e
41:02.81
David Aerne
So it’s basically a map of like all the Unicode characters out there rendered in the font that Google develops. The name escapes me. But the idea that you can click one character and it will show you which characters are similar.
41:19.65
David Aerne
So I built this one out of necessity because I often am lazy to draw like icons for my project. So often I misuse Unicode characters as icons.
41:26.14
Jon
Yeah.
41:29.66
Jon
Yeah.
41:29.94
David Aerne
I’m often interested in finding something that looks like a cross for a close icon or stuff like that.
41:35.10
Jon
Right. Right.
41:37.08
David Aerne
So it was an interesting project to kind of explore that and to explore models for similarity that ai also uses for or their memory, basically.
41:48.09
Jon
ehi
41:51.03
Jon
Right.
41:51.38
David Aerne
Yeah, that’s that’s the last project I worked on. And maybe color-wise, Poline is another one that that is pretty popular.
41:54.68
Jon
Nice.
42:00.47
David Aerne
where the idea is that you you just can basically drag a line over a certain color representation. And the colors look good most of the time. So I think that that’s the one that most people, or the most popular of my tools,
42:16.60
Jon
Okay. Well, I’ll make sure to put them all up on the, on the show notes. um If folks are interested and learning more about the tools or connecting with you for project work, like what’s the best way to, to, to get in touch?
42:32.79
David Aerne
So I’m on Blue Sky and on X under the name of Miodai, M-E-O-D-A-I. And otherwise i have a website called Elastic, just with a Q at the end,.ch, where there is a list of the projects, the open source projects I made. And yeah, I’m a freelance developer, so I’m happy to hear about your project if it involves generating colors.
43:05.47
Jon
Yeah. And other fun stuff. I mean, I’ll also say like other, like, but I will put links to ah to to your site and obviously these these tools that we’ve talked about, but um I would say your site is also just fun to kind of like poke around and play with because there’s a lot of lot of stuff on on there. So…
43:22.68
Jon
All right, David, thanks so much for coming on the show. This has been really fun. um i feel like I learned more about color theory in 40 minutes than maybe I have known before. So I appreciate you coming on the show. And yeah, hope we talk soon.
43:37.34
David Aerne
Yeah, thanks so much for having me.