Skip to content
Gallery
Dynamic Conditional Formatting
Welcome
The Demos
The Formula
Defining Colors
Meet Jono
More
Share
Explore
Defining Colors

icon picker
Coda Colors

This page shows you how to use Coda's internal colors for Conditional Formatting.
Coda’s internal color library consists of eight colors in five shades (as far as I know... there could be more). Using these colors means your row colors will match with other colors in your doc. You can see a preview of what each of these shades looks like in the table below.
To use Coda’s Colors for your formatting, you have to pass a Color Object into the _GRADIENT() formula. Because you can’t natively reference table cells from there, it seems like it’s just easier to use the ParseJSON() formula, passing in the relevant ColorId and Shade.

Here’s an example:

_GRADIENT(
thisRow.[Row ID],
1, ParseJSON('{"colorId":"Red", "shade":"Medium"}'),
5, ParseJSON('{"colorId":"Orange", "shade":"Medium"}'),
10, ParseJSON('{"colorId":"Yellow", "shade":"Medium"}'),
)

Generator

Let’s generate the Conditional Formatting formula for you:
Copy the below Coda Colors table across to your doc. Make sure you include the Color Shade select above it.
In your table, add a new LOOKUP column and choose Coda Colors as the table to look up to.
Name your new column Color LU.
Select a Color Shade from the dropdown below, and click Generate Formula.
Open your target table’s Options panel, click Conditional Format
Click Add Rule and select the Formula option. Paste the code in there. You can see a video guide at the bottom of
The Formula
⁠

* Note if you make any changes to the Color Shade dropdown, you’ll need to regenerate the Conditional Format formula, and update it on the destination table.
1
Clear
Generate Formula
_GRADIENT(
thisRow.[Color LU].[Row ID],
1⁠
, ParseJSON('{"colorId": "Red", "shade":"Medium"}'),
2⁠
, ParseJSON('{"colorId": "Orange", "shade":"Medium"}'),
3⁠
, ParseJSON('{"colorId": "Yellow", "shade":"Medium"}'),
4⁠
, ParseJSON('{"colorId": "Green", "shade":"Medium"}'),
5⁠
, ParseJSON('{"colorId": "Blue", "shade":"Medium"}'),
6⁠
, ParseJSON('{"colorId": "Purple", "shade":"Medium"}'),
7⁠
, ParseJSON('{"colorId": "Pink", "shade":"Medium"}'),
8⁠
, ParseJSON('{"colorId": "Gray", "shade":"Medium"}')
)
No results from filter
⁠

⁠
Coda Colors
Name
*
Light
Medium
Dark
Chart
Gradient
**
JSON
Row's Color Stop
Row ID
1
Red
​
​
​
​
​
​
​
{"colorId": "Red", "shade":"Medium"}
1, ParseJSON('{"colorId": "Red", "shade":"Medium"}')
1
2
Orange
​
​
​
​
​
​
​
{"colorId": "Orange", "shade":"Medium"}
2, ParseJSON('{"colorId": "Orange", "shade":"Medium"}')
2
3
Yellow
​
​
​
​
​
​
​
{"colorId": "Yellow", "shade":"Medium"}
3, ParseJSON('{"colorId": "Yellow", "shade":"Medium"}')
3
4
Green
​
​
​
​
​
​
​
{"colorId": "Green", "shade":"Medium"}
4, ParseJSON('{"colorId": "Green", "shade":"Medium"}')
4
5
Blue
​
​
​
​
​
​
​
{"colorId": "Blue", "shade":"Medium"}
5, ParseJSON('{"colorId": "Blue", "shade":"Medium"}')
5
6
Purple
​
​
​
​
​
​
​
{"colorId": "Purple", "shade":"Medium"}
6, ParseJSON('{"colorId": "Purple", "shade":"Medium"}')
6
7
Pink
​
​
​
​
​
​
​
{"colorId": "Pink", "shade":"Medium"}
7, ParseJSON('{"colorId": "Pink", "shade":"Medium"}')
7
8
Gray
​
​
​
​
​
​
​
{"colorId": "Gray", "shade":"Medium"}
8, ParseJSON('{"colorId": "Gray", "shade":"Medium"}')
8
There are no rows in this table
⁠



Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.