Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
The Math Behind Beautiful Color: David Aerne on Building Open-Source Color Tools
265 Plays2 hours ago
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.
Keywords: color theory, color palettes, data visualization, color tools, HSL, HSV, RGB, color models, color spaces, open source, generative art, color ramps, design tools, JavaScript, web development, pixel art, PolicyViz Podcast, David Aerne
Subscribe to the PolicyViz Podcast wherever you get your podcasts.
Become a patron of the PolicyViz Podcast (https://patreon.com/policyviz) for as little as a buck a month
Follow David Aerne on Bluesky and X (@meodai) and explore his open-source projects at elastiq.ch
Follow me on Instagram, LinkedIn, Substack, Twitter, Website, YouTube
Email: jon@policyviz.com
Recommended
Transcript
Season 12 Finale Announcement
00:00:12
Speaker
Welcome back to the Policy Biz Podcast. i'm your host, Jon Schwabisch. Folks, this is the last episode of season 12 of the show. Thank you so much for tuning in each and every other week for the last nine or 10 months. We've had quite a journey, quite a ride. We've talked about a lot of stuff because there's a lot of stuff going on.
Season Topics Overview
00:00:30
Speaker
We've talked about open data. We've talked about federal data and the threats to the federal data system. We've talked about physical data. We've talked about tools from Tableau to flourish to JavaScript. We've talked about different sorts of books. We've talked about conferences, including the Viz conference. And of course, of course, we've talked about AI. We've talked about AI a lot. There's a lot we have covered in this past year. Big thanks to all of my guests who have come on the show. Big thanks to everyone who has actually listened to me. and did a little rating or review of the show on their favorite podcast provider.
00:01:03
Speaker
Very much appreciate that. And thank you for all tuning in for of these episodes each and every other week. It's been a journey. It's been a lot of fun. And yeah, I'm looking forward to a little rest and relaxation. But i already have interviews set up for next season, which will be... Yeah, the 13th season of this show. So thank you so much.
Introducing David Erne
00:01:24
Speaker
This week on the show, i am joined by David Erna. I'm sure I mispronounced his last name, but I'm going to go with it. David is a designer, a developer, and has created a whole bunch of color tools which I have found fascinating. And as you'll see, or listen to a lot of fun to play with. And I, so I do hope you will see them. I hope you'll go check them out. We talk about David's background and how we got into developing these sorts of color tools and color models and the problems that he's trying to solve with these tools. And we talked a little bit about his other work as well, his design and his development work that he does for clients and other work in his freelance practice. So, I'm going to put a long list to the tools that he has created in the show notes. Check them out. Some of them are are truly fun and some of them are truly amazing. And some you're going to learn a lot about color theory in these tools and also in this episode. So for the last episode of season 12, I am grateful to be joined by David Erne. And here is that conversation only on the PolicyViz podcast.
00:02:30
Speaker
Hi, David. Good. going to say good morning. got to catch myself again. good Good afternoon for you. Good morning for me. Yes. How are you? I'm good. Thanks, John.
00:02:41
Speaker
Thanks for coming on the show. I'm excited. 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. 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:03:08
Speaker
You know you've built a whole bunch of tools that are focusing on color, color theory, color development, color palette
David's Background in Design and Development
00:03:15
Speaker
selection. Like why has that become a passion project of yours? Sure.
00:03:19
Speaker
So, um, I started a developer mostly. So, uh, in the late nineties, I, like most people, I started to do websites and this became more than a passion. It also became my job.
00:03:39
Speaker
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, 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 Trojan Tro...
00:04:03
Speaker
Yeah, my way of getting in into a company or a position is was like as a developer. And then I ended up like doing some design as well. Right.
00:04:16
Speaker
um So then, so you've always been on your own, always a freelancer. No, I've been on and off, but now I have been doing this for 10 years. okay I've been employed in in some local agencies here in Zurich.
00:04:32
Speaker
But now since 10 years, or this is my 10th year where I'm on my own. Nice. nice um So I do want to talk about your your broader freelance work.
00:04:44
Speaker
um But let's talk about the the color tools. That's how I found your stuff. And ah I'm curious, and we can 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?
Interest in Color Tools
00:05:00
Speaker
So i always like... I love, so as a teenager, I would spray paint a lot. So I had like, you colors always like fascinated me, like the the physical side of it.
00:05:13
Speaker
And I also liked video games. I still like video games and especially like the pixel art that goes with it. Yeah. And then I got interested less in doing it, but like understanding how it was done and like,
00:05:28
Speaker
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 yeah it's a huge world yeah of of tools that is there since the 90s.
00:05:52
Speaker
Right. right That has been used by pixel artists that I found fascinating, but I haven't had a real use case then. But then at my last job, yeah, it 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.
00:06:25
Speaker
But it turned out it didn't so that's where my obsession started to like understand why and then research a bit uh right what i could do about it and yeah then i this fascination caught on with like how could you mathematically produce color palettes that look good without having to pick each individual color manually yeah Yeah. So maybe um before we we look at some of the tools, maybe it would be helpful for folks listening to understand a little bit about color
Basic Color Theory Discussion
00:07:05
Speaker
theory. And you just mentioned um HSL space.
00:07:10
Speaker
um So maybe that maybe that would be a good... 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 the shade of orange and, you know, um 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.
00:07:46
Speaker
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, 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 gametes. So these three words are are used a bit interchangeably sometimes.
00:08:21
Speaker
And so I often of news 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 and in and for for HSL, for example, but it's I refer to it as a color model.
00:08:43
Speaker
okay There is not like right or wrong. It's just to make clear what I'm i'm talking about. right 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 device can can produce. So these are these three concepts that I think are important to like understand very basically just.
00:09:10
Speaker
right So I'm going to refer to color models when talking about HSV. So that's what I mean. like this mathematical abstraction we have to navigate these spaces.
00:09:22
Speaker
Right. And so 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
HSV vs RGB Color Models
00:09:34
Speaker
relate. Yeah. So RGB would just be like the, how intensely like the three colors on your screen are stimulated to new so show a certain color.
00:09:47
Speaker
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. So there is that's why I think people came up with other models that would like be slightly differently HSL and HSB, um,
00:10:14
Speaker
they are cylindrical so the age is going all the way around so at 360 it starts again it goes from zero to 360 and then starts again and it's mostly at red zero is at red and then it turns around and that's calculated back to rgb okay so it it's mostly translating from one model to another right and the essence L is saturation lightness or V is like value and it's a bit different. it
00:10:46
Speaker
It's just like this white range, like from where to where it goes. But but these are a bit- with Within the cylinder. Exactly. It's like- Yeah.
00:10:57
Speaker
If you watch some of my visualizations that 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. And that's to me much easier to like navigate mentally, right? If I want a complimentary color, you just want to have a color that is on the other side of this ring. And all of a sudden it gets
00:11:28
Speaker
much easier to to navigate. 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.
00:11:45
Speaker
Exactly. Yeah. And most color pickers show you like a two d plane, and then they let you navigate the third dimension by showing you a slider or something. Right.
00:11:57
Speaker
Right.
Challenges of 3D Color Representation
00:11:58
Speaker
Do you, I mean, to that point, 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 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, variables.
00:12:30
Speaker
Yeah. So I think it's a, mostly about user experience because I don't know if you have used blender before or any 3d program, it might, the controls are not easy to pull off for a treaty for navigating a treaty space on a 2D plane. so I think it's mostly about that. 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.
00:12:56
Speaker
So I'm sure there are plenty of color pickers that tend to be in treaty but unless you're like an expert in using it, i I don't think for most users, it's something that would be yeah practical.
00:13:11
Speaker
Right. um So before we get into some of the tools, I did want to ask, you said that you were interested in painting, spray painting and and video games. And I'm just curious about,
00:13:23
Speaker
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 guess if there was a question like,
00:13:46
Speaker
When you work, you know working with color, I could make this a simple question, like, do you prefer digital
Digital vs Physical Color Mixing
00:13:52
Speaker
or or in person? But I think more of the question is like the feeling between working in those two different mediums.
00:13:57
Speaker
So I haven't been spray painting in 20 years. so okay So maybe after this, after this interview, you're going to go back down to the store. and i yeah I mean, I have been painting like random objects or walls in our home, but that doesn't include mixing most of the time. right But I think they're not the exact same. I mean, one is like additive, the other, subtractive. So like yeah on a screen, having all the pixels on produces white against like physical color, where all the colors together produce black or some dark color. 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.
00:14:48
Speaker
e 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.
00:14:59
Speaker
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 yeah as like a physical color. And so I think that's why in like schools it's still thought as like a ah primary color right when it comes to like physical colors right even if it might physically not be super accurate it doesn't matter it's not very practical to use a yeah a very bright green to mix colors right right um okay so into the color tools before we get into them one last question
00:15:39
Speaker
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, chooser, and I would even call some of them like good playgrounds to like explore color.
00:15:54
Speaker
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?
00:16:09
Speaker
I was just curious about if i could pull it off. So yeah there were color generators out there and then I had to do some myth busting because I was curious about how they were yeah technically working 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 tertiary or complementary colors in HSL. I don't produce colors that I find particularly pleasing, but it works on like the physical
00:16:52
Speaker
I call it the physical color wheel, but from our discussion, you get what I mean. right So i 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 generate palettes at all. They just have a very big list of color palettes and they just like yeah show you one at random. right But that made me even what it 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
Automating Color Palette Generation
00:17:32
Speaker
decisions?
00:17:32
Speaker
Right. And i also, 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. And that helps me like iterating much faster. right if 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.
00:18:03
Speaker
For sure. And then to that point, do a lot of your tools. And ah um mean, I haven't looked through all 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. So you've got this, like, you still need to get from your,
00:18:24
Speaker
your tool into my product or viz or whatever it is. Yeah. So the early tools I did, did that and they still all do, but I started to shape my tools more about how you would integrate this into your ecosystem. So they're mostly built like manuals,
00:18:46
Speaker
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. Yeah. code And often you can interact with one side and see how the code changes or in both ways.
00:19:03
Speaker
So my idea is like to educate people, how to use these tools to be able to reproduce that and, and look like to integrate that in their workflow.
00:19:14
Speaker
So they can integrate the actual system and not the outcome of the system. 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 pointing them to whatever system they're going to use it in.
00:19:34
Speaker
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, ah i guess, palette would be the right word that they can continue to ah edit and adjust. 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, you pour them over. 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.
00:20:19
Speaker
Right. So instead you know, 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. And that way, while they're working, they can continue to adjust and exactly and play around with the colors in their product. That's really interesting. yeah And often...
00:20:51
Speaker
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 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 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. right That's why most tools are open source and also to make it like visually understandable what, what happens there. So it's just, I try when possible not to just show a bunch of sliders or value that you have to enter as numbers.
Dynamic vs Static Color Palettes
00:21:43
Speaker
I, I try to represent this in some sort of UI that is going to be as easy to use as possible.
00:21:52
Speaker
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. 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.
00:22:24
Speaker
Yeah. 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. 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. 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.
00:22:58
Speaker
Some brands have other sub-brands that have ah different colors. So I think there there's like a lot of like opportunity there to integrate these directly into the tools. 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.
00:23:24
Speaker
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.
Color Names Project
00:23:36
Speaker
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...
00:23:52
Speaker
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 with what we've been talking about. You're just, you're just interested in color, but like, why was this project the first on your, on the list? Um, it, it came out of necessity. So all the tools I've I'm showing some kind of colors and I want, I wanted them to be more,
00:24:33
Speaker
J.B. A Reliable than just X value because the hex money 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. J.B.
00:24:45
Speaker
Right. J.B. And that's why I wanted color names and then I thought oh awesome there are all these lists out there, but turns out that most of these lists you're not. you aren't allowed to use them in your open source projects. Like the Pantone colors are proprietary. So it's their list, right? I can't just like ship it with whatever open source tool I'm building.
00:25:10
Speaker
So this was my first problem. And then the other is like the the second biggest list I couldn't find was Wikipedia and it had like 1,600 names, but many of these names for were, were,
00:25:23
Speaker
very problematic for a various of reasons. Some were very colonial, let's put it mildly. And some were just, yeah, plain bad. And there was a of repetition.
00:25:40
Speaker
So yeah i I cherry picked the ones I liked from Wikipedia, i 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. And I added to this list. Right.
00:25:57
Speaker
And yeah, it became like ah a fun hobby that I just whenever I see something new or something that would make a great color name, I added there. Yeah. And others caught the bug. I mean, there's, I still have a regular contributions with people. Yeah. Good idea for a color name. and then Yeah. I had to come up with rules though to explain. So that's what was going to ask. Yeah. So 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,
00:26:27
Speaker
you know, an equivalent word for red? Like how do you, what's the, what's the decision process? So there is a lot of like, first it was just by feeling I just started and yeah, but then I pretty quickly built a treaty representation of where the name land in different color models.
00:26:46
Speaker
I've linked it as well. So basically it's like treaty 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.
00:26:57
Speaker
So you have an actual red that is not instantly another color name because it's too close. So there are many tests now in there that make sure that the color that you will submit is not too close to an existing one. Uh, but that makes sure it spreads naturally.
00:27:12
Speaker
Right. and 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, and then, and then the tool does the proximal location. Uh, 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, when you do your PR, uh, the automated tests go through and then it will just no interesting let you know.
00:27:44
Speaker
Uh, if it's okay or not. And on top of that, there is like a contribution file that, that tells you what is allowed and not like, that yeah, racist names will will be rejected and and stuff like that. So like, right.
00:27:58
Speaker
Yeah, 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 in all different formats. So there's 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?
00:28:19
Speaker
um I mostly like the palm 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 yeah your names i like a lot yeah um but yeah then i mean all the ones that evoke some kind of like uh book or media i like a lot like right there's lots of pop culture reference
00:28:51
Speaker
references in there or to literature. And these are really nice 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.
00:29:08
Speaker
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 i want to dive into. so um So this one is the rampant sow.
00:29:23
Speaker
Yeah.
Rampensau Library for Color Ramps
00:29:24
Speaker
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,
00:29:41
Speaker
There's like, you have like a whole, and for most of these too, 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.
00:30:04
Speaker
Yeah, so I like that you picked that one first because that's the most traditional approach to like color ramps. Whenever you will look for how to generate nice palettes, this is the technique that you will find most commonly. It's like yeah 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.
00:30:31
Speaker
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 and it mostly involves like using some kind of color model that has a saturation and lightness and then some way of controlling the hue and then you have like increments in there and like There's so many different ways of doing these increments at like an arc or a straight line or different spaces. And I wanted to put this all into one library that I could easily reuse and that someone that would know what like a color ramp is could use. And Rampensau means stage hog in German just. Okay. And, uh, but I, I thought it, it was a fun name because it has the word ramp in it. So some yeah English speaking would, would.
00:31:28
Speaker
probably know what it is about. 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 draws me to this initially is just the the randomization piece. right like when you're just like a lot i will say a lot of your tools are fun to play with.
00:31:47
Speaker
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 in some detail, but like, there's a big color swatch at the top.
00:32:03
Speaker
Probably, i don't know if 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.
00:32:17
Speaker
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.
00:32:31
Speaker
um you know It's just like assuming everything is 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 section?
00:32:43
Speaker
choice as well. yeah 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 right journal or, right?
00:32:54
Speaker
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. So I want some kind of mechanics to be able to reproduce that and to reuse.
00:33:20
Speaker
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.
00:33:34
Speaker
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. 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. So it could give you an idea of like how this would look like in a real design.
00:34:02
Speaker
I wanted to make it not too concrete, not like a web design or something, because you might use this for whatever. I use it for generative art. Others might use it for a website or an ID for a poster or whatever. So i wanted like an yeah abstract representation or give you a good idea of like how these combination could look like and whether you like them or not, or you need to continue to tweak the settings until the randomized results looked pleasing. Right, right.
00:34:34
Speaker
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.
00:34:55
Speaker
um The other one I wanted to talk about, and I think this was the one that a friend first sent me that really ah caught my eye, is the R.Y.
Interactive Color Theory Exploration
00:35:11
Speaker
Bitten project, which is more of a explainer tool about color theory than like,
00:35:22
Speaker
A picker, right? and 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.
00:35:39
Speaker
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 moment of meditation within the color space. So anyway, um but I really like this one. I thought maybe we could talk about this one as well.
00:35:54
Speaker
So I like that you picked that one as well because it it weaves in a bit into the physical color thing. So i I really like colors that look physical, especially on the screen. I think it has something pleasing. It it it makes something look real.
00:36:14
Speaker
to me. And I was wondering if there was like a way to do this without me having to explicitly pick colors that look that way. But I just wanted basically to be able to pick a random color and it would look natural.
00:36:33
Speaker
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 so you have to imagine ah 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 the ones that you obviously need a lot to be produced by lights to look that bright so what this does is like
00:37:08
Speaker
It creates a subset of RGB and switches around some of the RGB corner colors. So for example, white and black are inversed to simulate like this.
00:37:21
Speaker
Hey, when you have all the colors together, you get black and you don't get white, for example. And some of the RGB colors are switched out.
00:37:32
Speaker
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 e and it would look printy somehow.
00:37:46
Speaker
And yeah 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, like Goethe or there are many, many books out there that are accessible over archive.org, for example, were just picked colors to create these custom profiles. So I built this website over the past four or five years. It took me forever to build this website because yeah it was mostly a pretext to just have a pretty website. is I loved how these colors looked. And I like to design these little modules. So I just wanted, and just, this was my playground to like yeah 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. It's not
00:38:50
Speaker
the best tool to do anything with it. Yeah, yeah. Like a toy, basically. 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.
00:39:09
Speaker
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 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. So yeah, it's a super fun. But also it explains like what's going on, which is the other the other part of it. I mean, I had to find texts to write with these. Yeah, i be yeah right. it's Mostly like, OK, this is the general ID. And then I had like all these visual components. And then like I kind of like brought
00:39:49
Speaker
the text around it. So it's probably not the best educational material. It's really a toy in the first place. And I i needed some, something to say with all these and I moved it around a thousand times. I reviewed 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. And then it turns again to this manual mode where it explains how to use the library to produce this these colors. 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. and then
00:40:47
Speaker
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? and then it lets you, there is like a ramp editor as well there that lets you export it in various formats.
00:41:04
Speaker
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 working in?
Using Vanilla JavaScript in Projects
00:41:22
Speaker
So I'm working in JavaScript, and I try to make everything as vanilla as possible. so yeah 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. I want it to be very concise and small. When I do use a library, there's a JavaScript library called Coolory that i I use a lot for like color model conversion from one model to another. But most of the stuff I do is like completely self-contained.
00:42:02
Speaker
OK. OK. So for folks who are interested in in grabbing the code, they can do that. OK. Before I let you go, um we've we've talked a all lot about your color tools, but you also do a lot of other development, a lot of other projects.
00:42:16
Speaker
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? yeah, so mayor maybe, uh, there's one called charcuterie or shark cootery. I think it's pronounced. in english is Yeah, we're gonna, I'm gonna try not to butcher your name, but okay. Um, yeah, it's, uh, um, is a tool to explore, uh, Unicode characters by visual similarity.
00:42:51
Speaker
So it's basically a map of like all the Unicode characters out there rendered in font that Google develops. The name escapes me, but the idea is that you can click one character and it will show you which characters are similar. So I built this one out necessity because I often I'm lazy to draw like icons for my project. So often I misuse Unicode characters as icons. yeah I'm often interested in finding something that looks like a cross for a close icon or yeah right stuff like that.
00:43:25
Speaker
So it was an interesting project to kind of explore that and to explore models for similarity that ai also uses for ehe or their memory, basically.
00:43:39
Speaker
Right. Yeah, that's that's the last project I worked on. And maybe color wise, Poline another one that that is pretty popular, where the idea is that you um just can basically drag a line over a certain color representation. And the colors look good most of the time. So I think that's the one that most people or the most popular of my tools Okay.
00:44:06
Speaker
Well, I'll make sure to put them all up on the on the
Contact Information and Other Projects
00:44:08
Speaker
show notes. um If folks are interested in learning more about the tools or connecting with you for project work, like what's the best way to to to get in touch? So I'm on Blue Sky and on X under the name Miodai, M-E-O-D-A-I.
00:44:30
Speaker
And otherwise, i have a website called Elastic. just with a queue at the end,.ch, where there is a list of the projects, ah 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.
00:44:54
Speaker
And other fun stuff. I mean, I'll also say like other, like, but I will put links to your site and obviously these tools that we've talked about, but I would say your site is also just fun to kind of like poke around and play with because there's a lot of stuff on there.
00:45:10
Speaker
So yeah. All right, David, thanks so much for coming on the show. This has been really fun. I feel like I learned more about color theory in 40 minutes than maybe I have known before.
00:45:21
Speaker
So I appreciate you coming on the show. And yeah, we'll talk soon. Yeah, thanks so much for having me. Thanks everyone for tuning in to this last episode of the season. i hope you enjoyed that. i hope you check out David's work. I hope you check out a lot of those color tools. I learned a lot about color from reading and playing around with his tools and they're now bookmarked in my browser so that when I'm developing color palettes, I head over to a few of those tools to iron out some wrinkles as I work with color.
00:45:50
Speaker
So that's all I've got on this season, on this episode of the podcast. If you have some time this summer, please rate or review the show on your favorite podcast provider, be Spotify or iTunes or wherever you listen to the show.
00:46:02
Speaker
And if you are looking for something to read, don't forget, I've got a whole bunch of books out there, including better presentations and better data visualizations. And of course, I have a new book coming out later this year, deep into the fall, Thoughtful Data with my colleague and longtime collaborator, Alice Fang. That book is now available for pre-order wherever you get your books, including Amazon.
00:46:25
Speaker
So that's all I've got until next time until the fall, this has been the policy business podcast. Thanks so much for listening.