Explore Readable Hex Codes

About this Tutorial

Welcome to the captivating world of Readable Hex Codes! In this video, we dive into the intriguing realm of colors represented by hex codes. You'll witness the magic unfold as we explore the delightful hues of "Coffee," "Decade," and many more. With a click, we'll reveal the true essence of these hex codes and bring them to life on a Google Sheet.

Video Transcript

0:00 Hello, welcome. So I found this list of readable hex codes. I thought this was such a delight that I wanted to figure out what they actually looked like and see them.
0:09 So I created a Google Sheet here and I did a little bit of Apps Script to actually change the background of the cell, the exact hex code that it is.
0:20 I really wanted to see what they are. Here's coffee, here's Decade, and that's what I saw. I saw on Twitter Decade, D-E-C-A-D-E is a full English word, and it is also a hex code.
0:32 That's what it means by readable hex codes. There's coffee with a zero as the O, here's dabbed, here's deface, deeded.
0:40 There's facade, a face, doodad with zeros as o's, bedded, beaded, we have Akadia, Bobby, Debbie, So beefed, I thought that would be funny, I thought that was funny.
0:57 So yeah, I found these on a gist. Someone produced this, someone created this on, or not created this, but shared this on Twitter.
1:07 And now here's the code to sort of do this. And I thought this would be really interesting to show you how I did this.
1:13 So I'm gonna go to Apps Script. And what I mean by did this is when I click on a cell, A5, this AB1D.
1:21 Is a hex code. All I have to do is go up here, set background, and it'll take the value of the text and then set the background as that hex code.
1:32 So now we get to see all of these hex codes and what they actually look like. So I'm going to edit this a little bit to make it easier to read.
1:41 OK, so I just deleted all the unnecessary rows and columns, added a couple more here to give it a little space, a little bit.
1:50 And then now we see this debbie, debbie, 1e. If we go up here, set background, it will change the background color.
1:57 So we now see all of these colors. We can do each one if we want. I had to do each one.
2:01 Coffee decade. But again, I wanted to show you, and in this video share with you this app script. Super simple, it's called readable hex codes.
2:09 If you're a BetterSheets member and you're watching this right now on BetterSheets.co, download, you can get this sheet exactly downloaded.
2:15 You can download it right away down below. If you're watching this on YouTube, go become a BetterSheets member and get this.
2:22 And over 350 videos, two epic courses, one to create a Google Sheet add-on. I show you literally every step to create a Google Sheet add-on.
2:33 And then also learn how to code. I have Learn How to Code, which is a 40-minute crash course. But I also have a three-hour course that takes you from knowing nothing to sending emails automatically, automate your spreadsheets, automation, spreadsheet automation 101.
2:49 But let me go into this readable hex code. So again, we have a hex code, and we just want to set the background color of this text.
2:57 So what we do is we create a function called change background. The hex by just going to spreadsheetapp.get inside of the cell.
3:23 And then the range is going to be pretty much the same. SpreadsheetApp.getActiveRange because we're using our mouse. And the only code I have to actually execute here is range.setBackground.hex.
3:35 So this hex is the variable here for spreadsheet getValue. Range is where. We're going to do this, we could actually, sometimes this is easier to see if it's set up like this.
3:49 We have spreadsheet app.getactive, set background, and then the value in here is this hex. But I do, I also can separate these things.
4:02 We have repeated this range. So I can do something like this, variable range equals. And then this is hex. Yeah.
4:13 And then I can do range as well. And that I could do as well. But I did want to show that this spreadsheet dot get active range was repeated here.
4:25 It's sometimes a little difficult to see that. So I did want to do that. Oh, there we go. And now the last thing is this hex code menu up here, which you might find really exciting or interact.
4:42 If you've never seen this before, it's a custom menu that we can create. And we create that with a function on open.
4:47 On open is something we have to type ourselves, but it is something we have to type explicitly the same. This change background is just us typing some text anything we want, but on open is very specific.
4:59 It has to have a capital O as the open. But a lowercase O on on. And what it does is this executes the moment that you open a spreadsheet.
5:11 And what we're doing is we're getting the UI, which is spreadsheet app dot get UI. We're then going dot create menu.
5:17 We're naming the menu. This name hex code menu. Is the name. Of the menu. So if I change this to set hex code, we'll change that menu title.
5:28 Then we add item and we create first an argument that says here's the text that will show up. But then we do comma and we have text of the actual function name.
5:39 So this change background, if I actually change this to set hex code, we'll change that to set hex code. So this set background, I would have to come here to line 10 and change this to set background.
5:49 So I'm going to save that. I'm going to do command S to save, but you can also press the save project button here.
5:54 Now we have set background. We have a function on open and then we're going to execute that based on this button and all of this is The only thing we need to create that this hex code menu, but right now it's this set background, which is right here.
6:10 But we need to update it to this new name, set hex code. So what I'm gonna do is I'm gonna close the app script.
6:17 I'm going to refresh the sheet, which reopens it. And then you'll see. See. Here there's a blank right away next to help, but it'll load set hex code.
6:28 See now we have the correct one and we can go back to acidic here. See what that looks like. There we go, wow, that's really cool.
6:38 And we can set this background again and again for all of these it's gonna set. The background based on the hex code in here.
6:46 I thought that was really cool. And I think, one, check out these hex codes, right? They're really funny and fun.
6:52 But two, I hope you learned something from this App Script that we created here. Just a little tool, really quick tool to do this instead of having to, to take this text, command C, what was it?
7:08 Command C, fill color, custom color, hex code, doodad. OK, that replaces all of that. Now we have one button, well, two buttons to check off.
7:22 Doft. Oh, that's. Oh, doff this nice. What else do you cite? What is decided? Yeah, the five, I wanna see what the face looks like.
7:32 Nice, the face is like very pew-key color. What is facade? What is the facade of facade? That's pretty cool. What?
7:43 What? Office with the one is the eye. Wow that is sweet. These are all really cool. Hopefully you enjoyed this.
7:52 If you're a better sheets member and you're watching this on bettersheets.co get the sheet down below. If you're not go become a better sheets member today.
7:58 Bye.