I’ll pay $50 to the first person who can figure out how to predict the color of the calendar component grouping based off of the primary app color.
I dug into this today and I learned a few things.
It appears that Glide generates a color palette of 20 colors that are used for the calendar. That color palette is determined based on the accent color chosen for the app. What I haven’t been able to determine is how Glide builds that color palette. (If someone from Glide could clue me in on that or provide some javascript, that would be awesome.) However, that color palette can’t be modified by us in any way, so it’s just a matter of determining how to reliably pick one of those pre-set colors from the palette.
Here is what I found:
- Glide gets the column value in each row that is used for the calendar Grouping.
- Then they hash that text string to convert it from text to a numerical representation of that text.
- Using that hashed numeric value, they then do a modulus calculation with 20.
- That calculation returns a numerical index between 0 and 19.
- It then uses that index value to choose one of the colors from the color palette array.
I threw together some javascript that takes a column value as input, determines the hash number and converts it to an index value. I also grabbed the color palette that was set for my app based on my current accent color and created an array in my javascript with those hex colors. Then using the index I was able to pick one of the 20 colors from the palette based on the input value.
So based on the above information, I did a quick test and I can pretty confidently say that if you use single character values from ‘A’ through ‘T’ for your calendar groups, you should get one of each of the 20 colors that are available in your app’s color palette. Depending on your accent color, you will have to play around with each of the group letters to determine which of those 20 colors you want to use.
Here I create 20 calendar entries. Each one has a group with a different letter (A-T). You can see that it gave me different colors which represent each of the 20 colors in the color palette. While it doesn’t appear that we can choose any color we want, we can at least choose one of the 20 colors by using A-T for your groups. At least it’s somewhat predictable.
Edit: I added an updated screenshot above after a refresh of my browser. Seems that Glide does some weird caching of group values when you change them in the builder, so it caused some weird results with the colors and it kept compounding group values to an array without clearing it first. I was seeing repeat colors which didn’t make sense to me. After the browser refresh, the colors corrected themselves and match what was expecting.
8 Likes
Interesting (and amazing)!
The fact that it’s only 20 colors makes finding the right color more approachable, I assumed it was some sort of mod (I had seen colors repeat), but I thought the array of available colors was a much larger set.
The issue becomes determining which color i need based on the accent color of the app. For instance, I had finally found a pink and green to distinguish two different groups, but then the color of the app was changed and now the colors are more like a gold and blue. This makes me think the relation between the accent color and the grouping is complimentary.
If I could find a way to calculate “green” based on a hex code (more likely rgb), then we’re cooking!
3 Likes
Yeah I tried to decipher how the color palette was determined, but it was a little too much for my brain today. All I know is that it’s somehow related to the accent color. You’re probably right with the complimentary colors, but it’s not clear to me what the pattern is. If I can figure out how that palette is created then I can pretty much plug in an accent color and a group value to return what the calendar group color would be.
Here is what I have so far. The color palette in the code matches what I have in my test app and what’s in the images above. The p1 parameter is the Group value (A-T). The p2 parameter is the type of result you want back (rgb or hex). If you leave it blank, it will return hex. You can use an Image from Color column to visualize the color in the table.
function stringToHashCode(str) {
let hash = 0;
if (str.length === 0) return hash;
for (let i = 0; i < str.length; i++) {
const char = str.charCodeAt(i);
hash = (hash << 5) - hash + char;
hash |= 0; // Convert to 32-bit integer
}
return Math.abs(hash);
}
function hashToColor(index, format) {
let colorPalette = [
"#7648FF",
"#0090ff",
"#d17600",
"#00aa9a",
"#fd4482",
"#00a1ff",
"#9d8f00",
"#00a657",
"#f45844",
"#00a8d8",
"#73125f",
"#00428f",
"#673000",
"#004f47",
"#820038",
"#004b89",
"#484000",
"#004e1c",
"#7c1711",
"#004f6e"];
if (format == 'rgb') {
return hexToRGB(colorPalette[index]);
} else {
return colorPalette[index]
}
}
function hexToRGB(h) {
let r = 0, g = 0, b = 0;
// 3 digits
if (h.length == 4) {
r = "0x" + h[1] + h[1];
g = "0x" + h[2] + h[2];
b = "0x" + h[3] + h[3];
// 6 digits
} else if (h.length == 7) {
r = "0x" + h[1] + h[2];
g = "0x" + h[3] + h[4];
b = "0x" + h[5] + h[6];
}
return "rgb("+ +r + "," + +g + "," + +b + ")";
}
function generateColor(group, format) {
const hash = stringToHashCode(group);
return hashToColor(hash%20, format);
}
return generateColor(p1, p2)
4 Likes
Repeats every 20 characters? Same thing for lowercase and numeric characters? I imagine that it’s going through some sort of Unicode modulus?
It repeats every 20 characters if it’s a single character and those characters are sequential. It just so happens that the hash number ends up being sequential in that case. Once you start to have multiple characters, then it gets a little more random due to the way the hashing works. I figure that if you use A-T, the result are predictable and each one is unique while still being a sequential value. The same would be true for lower case letters. However for numbers, there are only 10 single digit numbers, so that wouldn’t be a good choice because 10 and above become 2 digits and the results of the hashing are less predictable. Any Unicode characters would work, as long as they are sequential.
I’m handling the modulus in the code. Look for this in the code.
hash%20
when using lowercase letters, d or x is the primary color
Oh!, I might be able to reverse engineer that then. Looks like it’s uppercase P as well.
This thread summarizes why Glide should be investing engineering talent into creating the industry’s best NoCode calendaring functionality.
IT DOES NOT EXIST. And everyone could/would/should use it.
It is hard - but your team has solved harder.
And it would excite new/existing corporate NoCode champions with a use cause they would be able to use immediately within their company/organization to optimize a simple yet challenging problem - calendaring.
Bonus - integrating with existing Glide AI functionality to bring new capability to organizing meetings and results.
My $.02 worth
1 Like
Did Jeff earn the money? 
- Yes
- No
0
voters