Dynamic Conditional Formatting

The Demos

The Formula

Defining Colors

Meet Jono

Explore

Defining Colors

HTML Colors

You don't have to use Hex Values for conditional formatting, you can use the standard set of HTML Named Colors if you'd prefer.

Coda’s gradient formula supports HTML Colors for color stops. You don’t have to use Hex Values, the standard list of 148 different color names all seem to work just fine. If you’re not familiar with HTML Named Colors, they can be really garish. Use the table on this page to find suitable colors rather than using “Blue” or “Red”.

Here’s an example

_GRADIENT(

thisRow.[Row ID],

1, "Blue",

2, "Red",

3, "Yellow"

)

What are HTML Named Colors?

Taken from

this link⁠

W3C color names are names assigned by the W3C to specify colors in web pages or files. These names can be used instead of their corresponding hexadecimal value to refer to that color in an HTML file or CSS stylesheet. These names are supported by all modern web browsers and used because it's easier to remember color names than color codes.

Important Caveat!

HTML Named Colors Don’t Transition

If you define colors using HTML Named Colors, they don’t seem to transition when the row’s number column is between two color stops. In

Example Three⁠

, we’ve used HTML Named Colors instead of Hex Values, and rows seem to just “Round Down” to the color stop lower than their Position column.

Generator

Let’s generate the Conditional Formatting formula for you:

Copy the below HTML Colors table across to your doc.

In your target table, add a new LOOKUP column and choose Custom Hex Values as the table to look up to.

Name your new column Color LU.

Click the Generate Formula button below

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 HTML Colors table, you’ll need to regenerate the Conditional Format formula, and update it on the destination table.

Clear

Generate Formula

No results from filter

⁠

HTML Colors

HTML Colors

Name

Hex Value

Preview

Row ID

Black

#000000

■

Navy

#000080

■

DarkBlue

#00008b

■

MediumBlue

#0000cd

■

Blue

#0000ff

■

DarkGreen

#006400

■

Green

#008000

■

Teal

#008080

■

DarkCyan

#008b8b

■

DeepSkyBlue

#00bfff

■

DarkTurquoise

#00ced1

■

MediumSpringGreen

#00fa9a

■

Lime

#00ff00

■

SpringGreen

#00ff7f

■

Aqua

#00ffff

■

Cyan

#00ffff

■

MidnightBlue

#191970

■

DodgerBlue

#1e90ff

■

LightSeaGreen

#20b2aa

■

ForestGreen

#228b22

■

SeaGreen

#2e8b57

■

DarkSlateGray

#2f4f4f

■

DarkSlateGrey

#2f4f4f

■

LimeGreen

#32cd32

■

MediumSeaGreen

#3cb371

■

Turquoise

#40e0d0

■

RoyalBlue

#4169e1

■

SteelBlue

#4682b4

■

DarkSlateBlue

#483d8b

■

MediumTurquoise

#48d1cc

■

Indigo

#4b0082

■

DarkOliveGreen

#556b2f

■

CadetBlue

#5f9ea0

■

CornflowerBlue

#6495ed

■

RebeccaPurple

#663399

■

MediumAquaMarine

#66cdaa

■

DimGray

#696969

■

DimGrey

#696969

■

SlateBlue

#6a5acd

■

OliveDrab

#6b8e23

■

SlateGray

#708090

■

SlateGrey

#708090

■

LightSlateGray

#778899

■

LightSlateGrey

#778899

■

MediumSlateBlue

#7b68ee

■

LawnGreen

#7cfc00

■

Chartreuse

#7fff00

■

Aquamarine

#7fffd4

■

Maroon

#800000

■

Purple

#800080

■

Olive

#808000

■

Gray

#808080

■

Grey

#808080

■

SkyBlue

#87ceeb

■

LightSkyBlue

#87cefa

■

BlueViolet

#8a2be2

■

DarkRed

#8b0000

■

DarkMagenta

#8b008b

■

SaddleBrown

#8b4513

■

DarkSeaGreen

#8fbc8f

■

LightGreen

#90ee90

■

MediumPurple

#9370db

■

DarkViolet

#9400d3

■

PaleGreen

#98fb98

■

DarkOrchid

#9932cc

■

YellowGreen

#9acd32

■

Sienna

#a0522d

■

Brown

#a52a2a

■

DarkGray

#a9a9a9

■

DarkGrey

#a9a9a9

■

LightBlue

#add8e6

■

GreenYellow

#adff2f

■

PaleTurquoise

#afeeee

■

LightSteelBlue

#b0c4de

■

PowderBlue

#b0e0e6

■

FireBrick

#b22222

■

DarkGoldenRod

#b8860b

■

MediumOrchid

#ba55d3

■

RosyBrown

#bc8f8f

■

DarkKhaki

#bdb76b

■

Silver

#c0c0c0

■

MediumVioletRed

#c71585

■

IndianRed

#cd5c5c

■

Peru

#cd853f

■

Chocolate

#d2691e

■

Tan

#d2b48c

■

LightGray

#d3d3d3

■

LightGrey

#d3d3d3

■

Thistle

#d8bfd8

■

Orchid

#da70d6

■

GoldenRod

#daa520

■

PaleVioletRed

#db7093

■

Crimson

#dc143c

■

Gainsboro

#dcdcdc

■

Plum

#dda0dd

■

BurlyWood

#deb887

■

LightCyan

#e0ffff

■

Lavender

#e6e6fa

■

DarkSalmon

#e9967a

■

100

Violet

#ee82ee

■

100

101

PaleGoldenRod

#eee8aa

■

101

102

LightCoral

#f08080

■

102

103

Khaki

#f0e68c

■

103

104

AliceBlue

#f0f8ff

■

104

105

HoneyDew

#f0fff0

■

105

106

Azure

#f0ffff

■

106

107

SandyBrown

#f4a460

■

107

108

Wheat

#f5deb3

■

108

109

Beige

#f5f5dc

■

109

110

WhiteSmoke

#f5f5f5

■

110

111

MintCream

#f5fffa

■

111

112

GhostWhite

#f8f8ff

■

112

113

Salmon

#fa8072

■

113

114

AntiqueWhite

#faebd7

■

114

115

Linen

#faf0e6

■

115

116

LightGoldenRodYellow

#fafad2

■

116

117

OldLace

#fdf5e6

■

117

118

Red

#ff0000

■

118

119

Fuchsia

#ff00ff

■

119

120

Magenta

#ff00ff

■

120

121

DeepPink

#ff1493

■

121

122

OrangeRed

#ff4500

■

122

123

Tomato

#ff6347

■

123

124

HotPink

#ff69b4

■

124

125

Coral

#ff7f50

■

125

126

DarkOrange

#ff8c00

■

126

127

LightSalmon

#ffa07a

■

127

128

Orange

#ffa500

■

128

129

LightPink

#ffb6c1

■

129

130

Pink

#ffc0cb

■

130

131

Gold

#ffd700

■

131

132

PeachPuff

#ffdab9

■

132

133

NavajoWhite

#ffdead

■

133

134

Moccasin

#ffe4b5

■

134

135

Bisque

#ffe4c4

■

135

136

MistyRose

#ffe4e1

■

136

137

BlanchedAlmond

#ffebcd

■

137

138

PapayaWhip

#ffefd5

■

138

139

LavenderBlush

#fff0f5

■

139

140

SeaShell

#fff5ee

■

140

141

Cornsilk

#fff8dc

■

141

142

LemonChiffon

#fffacd

■

142

143

FloralWhite

#fffaf0

■

143

144

Snow

#fffafa

■

144

145

Yellow

#ffff00

■

145

146

LightYellow

#ffffe0

■

146

147

Ivory

#fffff0

■

147

148

White

#ffffff

■

148

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.