Skip to content

Dynamic Conditional Formatting

Defining Colors

More

Share

Explore

The Demos

Let's take a look at what's possible...

Custom Colors. Format rows with any color.

By using Hex Values for color stops, you can format your table using any colors you want, not just the ones available in the Conditional Formatting editor. In this example, we map each row on the color lookup table with a color stop.

👀 See the formula

Give it a try! Click the button to add a card with a random color.

⁠

Add Card

⁠

⁠

⁠

Turquoise has a Hex Value of #45b5aa

Turquoise

Living Coral has a Hex Value of #ff6f61

Living Coral

Greenery has a Hex Value of #88b04b

Greenery

Fushcia Rose has a Hex Value of #c74375

Fushcia Rose

Marsala has a Hex Value of #964f4c

Marsala

Tangerine Tango has a Hex Value of #dd4124

Tangerine Tango

Mimosa has a Hex Value of #f0c05a

Mimosa

Serenity has a Hex Value of #91a8d0

Serenity

Sand Dollar has a Hex Value of #decdbe

Sand Dollar

Rose Quartz has a Hex Value of #f7cac9

Rose Quartz

Radiant has a Hex Value of #ad5e99

Radiant

Ultimate Grey has a Hex Value of #939597

Ultimate Grey

⁠

⁠

Hundreds of Rules. Without pulling an all-nighter.

In this example, we have 148 unique colors, one for each of the available HTML Named Colors. You don’t have to use Hex Values, color stops also support HTML named colors like “Blue”, “Red”, “Tomato” or “HotPink”. You can see the named color at the top of each card.

Imagine setting that up in the editor one rule at a time 🤯

👀 See the formula

Give it a try! Drag the slider on each card to update the card’s color.

MediumSeaGreen

Drag the slider below to select a color. The card's background will update live.

000

25

Tomato

Drag the slider below to select a color. The card's background will update live.

000

123

LightPink

Drag the slider below to select a color. The card's background will update live.

000

129

BlanchedAlmond

Drag the slider below to select a color. The card's background will update live.

000

137

Orange

Drag the slider below to select a color. The card's background will update live.

000

128

LightSkyBlue

Drag the slider below to select a color. The card's background will update live.

000

55

HotPink

Drag the slider below to select a color. The card's background will update live.

000

124

DarkSalmon

Drag the slider below to select a color. The card's background will update live.

000

99

DarkGray

Drag the slider below to select a color. The card's background will update live.

000

69

MistyRose

Drag the slider below to select a color. The card's background will update live.

000

136

LightSalmon

Drag the slider below to select a color. The card's background will update live.

000

127

Tan

Drag the slider below to select a color. The card's background will update live.

000

86

⁠

⁠

Color Scales. Adding meaning with color

The default Color Scales are great, but being able to fully control color stops means we can create really meaningful formatting. In this table, cards are formatted based on the city’s annual rainfall. We emphasize cities that have dramatically high or low annual rainfall with bold colors.

What we’re trying to achieve.

A useful application for this technique is to smoothly gradate the color of rows when their values are within an expected range, but dramatically highlight rows that are “outliers”.

For this example, Cities with low rainfall are light blue, and cities with higher rainfall are darker blue. To highlight cities that have dramatically high or low annual rainfall, we add bold color stops at either end of the spectrum.

Cities with rainfall below 10 inches have a color stop that is a sandy brown color.

On the other end of the scale, cities with more than 70 inches of rainfall are navy blue, and cities over 80 inches are highlighted purple.

The result is that the user is able to easily see outliers by their card color alone.

Here’s an illustration of what we’re going for. The numbers at the top of the gradient bar are the color stops we’ve got setup. We use the Rainfall in inches column to determine the card’s color relative to the color stops.

⁠

⁠

⁠

👀 See the formula

Europe

Asia

Americas

Africa

Bergen, Norway

81.7 inches

London, England

29 inches

Madrid, Spain

17 inches

Paris, France

25 inches

Zurich, Switzerland

42.5 inches

Dubai, UAE

4 inches

shanghai.jfif

Shanghai, China

47 inches

Tokyo, Japan

60 inches

Los Angeles, USA

15 inches

New York, USA

55 inches

Phoenix, USA

7.6 inches

Vancouver, Canada

44 inches

cairo.jfif

Cairo, Egypt

12 inches

cape town.jfif

Cape Town, RSA

36 inches

⁠

⁠

Coda Colors... Applying Coda’s own colors to your table

Coda’s internal colors consist of eight colors in five shades (as far as I know... there could be more). Using these colors in your conditional formatting means your row colors will match up with other colors in your doc, but this can also be used to yield quite interesting results...

What we’re trying to achieve.

Users can select a Preferred Color and their row will be highlighted in that color. The Actions Bar on the right then adopts these colors for its buttons, so you end up with quite a cool look where the buttons fade into the rest of the row’s color and you just see the icon.

To achieve this, we use Coda’s Medium shade, which is the shade used on buttons.

👀 See the formula

Give it a try! Change a user’s preferred color using the dropdown at the end of each row, and watch the row’s color and the button colors both change to suit their preferences.

Note the button’s don’t actually do anything, they’re just there as a demo.

1

Jono Bouwmeester

Jono

⁠

⁠

⁠

⁠

⁠

Red

2

Jono Bouwmeester

Kalem

⁠

⁠

⁠

⁠

⁠

Green

3

Jono Bouwmeester

Carol

⁠

⁠

⁠

⁠

⁠

Orange

4

Jono Bouwmeester

Ed

⁠

⁠

⁠

⁠

⁠

Blue

5

Jono Bouwmeester

Bianca

⁠

⁠

⁠

⁠

⁠

Pink

6

Jono Bouwmeester

Carl

⁠

⁠

⁠

⁠

⁠

Yellow

There are no rows in this table

⁠

⁠

Next Up. The Formula

⁠

The Formula This info has just been discovered, so this page is a write-up of everything I know so far. As we find out new info together, I’ll update this doc.⁠

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.