Gallery

Style Guide

Basic Colors

Turn RGB into HEX

Images & Logo

Gradient Colors

Explore

Turn RGB into HEX

A table driven logic to see the colors you work with

Hex - Decimal

Source :

Hexadecimal to Decimal Converter⁠

⁠

The colors below you find in the Coda Stylesheet when you open it using ‘inspect’

⁠

DB Colors

DB Colors

Color name

source

RGB

Paul

Hex

Coda Hex

Visual

Color URL

red-gradient

--kr-red-gradient-rgb: 255, 146, 146;

255 146 146

#FF9292

https://www.colorhexa.com/ff9292

red-light

--kr-red-light-rgb: 255, 220, 220;

255 220 220

#FFDCDC

https://www.colorhexa.com/ffdcdc

red-chart

--kr-red-chart-rgb: 221, 72, 72;

221 72 72

#DD4848

https://www.colorhexa.com/dd4848

red-medium

--kr-red-medium-rgb: 201, 22, 22;

201 22 22

#C91616

https://www.colorhexa.com/c91616

red-dark

--kr-red-dark-rgb: 169, 30, 30;

169 30 30

#A91E1E

https://www.colorhexa.com/a91e1e

orange-gradient

--kr-orange-gradient-rgb: 252, 152, 92;

252 152 92

#FC985C

https://www.colorhexa.com/fc985c

orange-light

--kr-orange-light-rgb: 252, 227, 206;

252 227 206

#FCE3CE

https://www.colorhexa.com/fce3ce

orange-chart

--kr-orange-chart-rgb: 250, 135, 66;

250 135 66

#FA8742

https://www.colorhexa.com/fa8742

orange-medium

--kr-orange-medium-rgb: 236, 101, 21;

236 101 21

#EC6515

https://www.colorhexa.com/ec6515

orange-dark

--kr-orange-dark-rgb: 196, 91, 28;

196 91 28

#C45B1C

https://www.colorhexa.com/c45b1c

yellow-gradient

--kr-yellow-gradient-rgb: 255, 206, 70;

255 206 70

#FFCE46

https://www.colorhexa.com/ffce46

yellow-light

--kr-yellow-light-rgb: 253, 243, 216;

253 243 216

#FDF3D8

https://www.colorhexa.com/fdf3d8

yellow-chart

--kr-yellow-chart-rgb: 252, 188, 12;

252 188 12

#FCBC0C

https://www.colorhexa.com/fcbc0c

yellow-medium

--kr-yellow-medium-rgb: 228, 167, 9;

228 167 9

#E4A709

https://www.colorhexa.com/e4a709

yellow-dark

--kr-yellow-dark-rgb: 139, 108, 29;

139 108 29

#8B6C1D

https://www.colorhexa.com/8b6c1d

green-gradient

--kr-green-gradient-rgb: 142, 203, 114;

142 203 114

#8ECB72

https://www.colorhexa.com/8ecb72

green-light

--kr-green-light-rgb: 226, 248, 232;

226 248 232

#E2F8E8

https://www.colorhexa.com/e2f8e8

green-chart

--kr-green-chart-rgb: 66, 195, 102;

66 195 102

#42C366

https://www.colorhexa.com/42c366

green-medium

--kr-green-medium-rgb: 46, 150, 75;

46 150 75

#2E964B

https://www.colorhexa.com/2e964b

green-dark

--kr-green-dark-rgb: 24, 123, 52;

24 123 52

#187B34

https://www.colorhexa.com/187b34

blue-gradient

--kr-blue-gradient-rgb: 107, 183, 255;

107 183 255

#6BB7FF

https://www.colorhexa.com/6bb7ff

blue-light

--kr-blue-light-rgb: 221, 237, 253;

221 237 253

#DDEDFD

https://www.colorhexa.com/ddedfd

blue-chart

--kr-blue-chart-rgb: 82, 156, 226;

82 156 226

#529CE2

https://www.colorhexa.com/529ce2

blue-medium

--kr-blue-medium-rgb: 47, 117, 215;

47 117 215

#2F75D7

https://www.colorhexa.com/2f75d7

blue-dark

--kr-blue-dark-rgb: 15, 88, 189;

15 88 189

#0F58BD

https://www.colorhexa.com/0f58bd

purple-gradient

--kr-purple-gradient-rgb: 210, 163, 225;

210 163 225

#D2A3E1

https://www.colorhexa.com/d2a3e1

purple-light

--kr-purple-light-rgb: 237, 223, 246;

237 223 246

#EDDFF6

https://www.colorhexa.com/eddff6

purple-chart

--kr-purple-chart-rgb: 167, 98, 217;

167 98 217

#A762D9

https://www.colorhexa.com/a762d9

purple-medium

--kr-purple-medium-rgb: 133, 65, 181;

133 65 181

#8541B5

https://www.colorhexa.com/8541b5

purple-dark

--kr-purple-dark-rgb: 110, 33, 186;

110 33 186

#6E21BA

https://www.colorhexa.com/6e21ba

pink-gradient

--kr-pink-gradient-rgb: 248, 140, 217;

248 140 217

#F88CD9

https://www.colorhexa.com/f88cd9

pink-light

--kr-pink-light-rgb: 248, 231, 243;

248 231 243

#F8E7F3

https://www.colorhexa.com/f8e7f3

pink-chart

--kr-pink-chart-rgb: 220, 69, 177;

220 69 177

#DC45B1

https://www.colorhexa.com/dc45b1

pink-medium

--kr-pink-medium-rgb: 206, 66, 166;

206 66 166

#CE42A6

https://www.colorhexa.com/ce42a6

pink-dark

--kr-pink-dark-rgb: 161, 43, 134;

161 43 134

#A12B86

https://www.colorhexa.com/a12b86

gray-gradient

--kr-gray-gradient-rgb: 190, 190, 190;

190 190 190

#BEBEBE

https://www.colorhexa.com/bebebe

gray-light

--kr-gray-light-rgb: 240, 240, 240;

240 240 240

#F0F0F0

https://www.colorhexa.com/f0f0f0

gray-chart

--kr-gray-chart-rgb: 142, 142, 142;

142 142 142

#8E8E8E

https://www.colorhexa.com/8e8e8e

gray-medium

--kr-gray-medium-rgb: 102, 102, 102;

102 102 102

#666666

https://www.colorhexa.com/666666

gray-dark

--kr-gray-dark-rgb: 102, 102, 102;

102 102 102

#666666

https://www.colorhexa.com/666666

blue-medium

--kr-blue-medium-rgb: 47, 117, 215

47 117 215

#2F75D7

https://www.colorhexa.com/2f75d7

There are no rows in this table

⁠

Column Paul based on input

Paul⁠

, simple and elegant:

Concatenate("#",

ToHexadecimal(thisRow.RGB.Split(",").Nth(1),2),

ToHexadecimal(thisRow.RGB.Split(",").Nth(2),2),

ToHexadecimal(thisRow.RGB.Split(",").Nth(3),2)

)

⁠

the color of this text will change

⁠

#525252

⁠

→ the problem of this construction is that the randomInteger() outputs 3 times the same value.

That is the same effect as Repeat().

List("#",

RandomInteger(1,255, updateContinuously: True()).ToHexadecimal(2),

RandomInteger(1,255, updateContinuously: True()).ToHexadecimal(2))

.Concatenate().WithName(colorCode,colorCode)

The logic below works better, 3 different random flavors, but not really random, it remains strange.

⁠

#E337FD

⁠

the color of this text will change

⁠

List("#",

Random().Product(1000).Ceiling().Remainder(255).ToHexadecimal(2),

RandomInteger(1,55).ToHexadecimal(2),

Sequence(1,255).RandomSample(1).ToHexadecimal(2))

.Concatenate()

.WithName(colorCode,colorCode)

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.