Geek Culture
Published in

Geek Culture

From RGB to HEX in Coda

It started when I was looking into a color scheme to get some inspiration for a project. I came across the html() sheet below and felt the need to translate these values into HEX values to see the colors they represent.

The challenge I set myself up to was to first strip the RGB part from the rest and next to isolate the color notion like red gradient.

My first step was to create a table with the raw data. In Coda that is easy and goes fast. I created a table and pasted the values in a column.

Next I wrote an easy formula to only get the RGB values in a separate column. The starting point was to find an element to define the split. This is the “;”

thisRow.source.Split(“:”).Last().Substitute(“;”,””).Split(“,”)

Next I took the last part via Last() and since at the end of the last part I found a “;” I got rid of that via a Substitute().

It did not work yet, I needed to split the numbers as well using an often applied logic in lists: Split(“,”)

The name of the color

Before we dive into the translation from RGB to Hex first how I got the name.

I needed to get rid of the first part and the last part. Making that work in one column you need to apply a FormulaMap() Why is that?

thisRow.source.Substitute("--kr-","").FormulaMap(CurrentValue.Slice(1,CurrentValue.find("-rgb:")-1))

The first step is to get rid of the first part via Substitute() We use in the SearchFor part the text and in the replacement parts only " ". Easy peasy. Next we have the last part, this is a bit more tricky because we see variation in the length of the total string caused by the name. We need to know the target point to set our second Slice() value right.

Using a FormulaMap() I could base the second part of the formula on the result of the fist part via CurrentValue

I applied Find() to get the position of “-rgb:” and I added minus 1 to get the position before the start as the endpoint for my Slice(). More about the richness of the Find() function in this article.

By now we have the name of the color and the RGB value. It is time to turn the RGB into a Hex value.

From RGB to HEX

I knew that RGB referred to Red Green and Blue, but I did not know how. So when I came across notations like (10) and (16) I asked a friend (who studied engineering) what this was about. He wrote me: “Hex numbers, that is a while ago for me’ . That got me started and I found out that instead of a list of 10 numbers we have a list of 16 items and instead of 10 * 10 we have 16 * 16 which makes sense when we see 255 (when adding a zero, we have 256 items).

What I needed was a list of items from 0 to 255 to translate each group of three numbers into a two digital HEX format. I thought about writing a formula to create a table with these values, but instead I went the easy way and copied a list into a table that contained Hexadecimal and decimal numbers. So far so good.

Concatenate("#",Sequence(1,thisRow.RGB.Count()).FormulaMap(CurrentValue.WithName(Postion,[Hex - Decimal].Filter(Decimal = thisRow.RGB.Nth(Postion)))).WithName(Outcome,Sequence(1,Outcome.Count()).FormulaMap(Outcome.Nth(CurrentValue).ListCombine().LeftPad(2,0))))

I needed a filter for each of the items and again we needed a FormulaMap() this time to grab each item and filter it to get a Hexadecimal value. So first item 1 via Nth(CurrentValue), then item 2 and last item 3. The result is a list of three hexadecimal values we finally brought together via ListCombine() Then I thought I was done, but not yet. Some outcomes did not show as a valid value I could translate into a color.

I started reading about the applied logic and learned that the notation is always in two digits thus 01 if the outcome is 1. Via LeftPad(2,0)I added that I needed a double digit outcome per Hexadecimal and all values translated well.

I finished the table by adding a URL that helps to understand better the color:

concatenate("https://www.colorhexa.com/",Lower(Slice(thisRow.Hex,2,99))).Hyperlink()
table with colors

I hope you enjoyed this article. If you have questions feel free to reach out. Though this article is for free, my work (including advice) won’t be, but there is always room for a chat to see what can be done. Besides you find my (for free) contributions to the Coda Community and on Twitter

My name is Christiaan Huizer and I am the owner of Huizer Automation. A company specialized in serving SME in harvesting data and keeping it aligned. I mainly rely on Coda, Mailjet, Zapier & Paperform to get the job done.

Huizer Automation on using Coda to turn RGB into HEX

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Christiaan Huizer

Christiaan Huizer

I use Coda mainly for planning & calculations of all sorts. Follow me to learn how to Coda with numbers. I blog at least once per week.