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

■

Violet

#ee82ee

■

100

PaleGoldenRod

#eee8aa

■

101

LightCoral

#f08080

■

102

Khaki

#f0e68c

■

103

AliceBlue

#f0f8ff

■

104

HoneyDew

#f0fff0

■

105

Azure

#f0ffff

■

106

SandyBrown

#f4a460

■

107

Wheat

#f5deb3

■

108

Beige

#f5f5dc

■

109

WhiteSmoke

#f5f5f5

■

110

MintCream

#f5fffa

■

111

GhostWhite

#f8f8ff

■

112

Salmon

#fa8072

■

113

AntiqueWhite

#faebd7

■

114

Linen

#faf0e6

■

115

LightGoldenRodYellow

#fafad2

■

116

OldLace

#fdf5e6

■

117

Red

#ff0000

■

118

Fuchsia

#ff00ff

■

119

Magenta

#ff00ff

■

120

DeepPink

#ff1493

■

121

OrangeRed

#ff4500

■

122

Tomato

#ff6347

■

123

HotPink

#ff69b4

■

124

Coral

#ff7f50

■

125

DarkOrange

#ff8c00

■

126

LightSalmon

#ffa07a

■

127

Orange

#ffa500

■

128

LightPink

#ffb6c1

■

129

Pink

#ffc0cb

■

130

Gold

#ffd700

■

131

PeachPuff

#ffdab9

■

132

NavajoWhite

#ffdead

■

133

Moccasin

#ffe4b5

■

134

Bisque

#ffe4c4

■

135

MistyRose

#ffe4e1

■

136

BlanchedAlmond

#ffebcd

■

137

PapayaWhip

#ffefd5

■

138

LavenderBlush

#fff0f5

■

139

SeaShell

#fff5ee

■

140

Cornsilk

#fff8dc

■

141

LemonChiffon

#fffacd

■

142

FloralWhite

#fffaf0

■

143

Snow

#fffafa

■

144

Yellow

#ffff00

■

145

LightYellow

#ffffe0

■

146

Ivory

#fffff0

■

147

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.