Using Colors

On the right hand side menu, there are colors editing tools which help you change both background colors as well as text colors. Clicking on the Component Background button on the right hand side of the screen will reveal a color panel from where you can choose a color. Click on the color to apply it as a background for all the components. IMPORTANT: Some components have elements with own backgrounds already set. These will not be changed when you change the component background color.

Coloring text

All associated editors have a Text Color button with a similar behaviour to the Component Background. When clicking on the Text Color button, the same color panel appears. Clicking on a color will change the selected text color in the preview window. Reminder: The selected element is the element shown in the preview window, in the middle of the screen, with a red outline.

Default color palette

Black & White

Black

#000000

White

#FFFFFF

Gray

100

#F7FAFC

200

#EDF2F7

300

#E2E8F0

400

#CBD5E0

500

#A0AEC0

600

#718096

700

#4A5568

800

#2D3748

900

#1A202C

Red

100

#FFF5F5

200

#FED7D7

300

#FEB2B2

400

#FC8181

500

#F56565

600

#E53E3E

700

#C53030

800

#9B2C2C

900

#742A2A

Orange

100

#FFFAF0

200

#FEEBC8

300

#FBD38D

400

#F6AD55

500

#ED8936

600

#DD6B20

700

#C05621

800

#9C4221

900

#7B341E

Yellow

100

#FFFFF0

200

#FEFCBF

300

#FAF089

400

#F6E05E

500

#ECC94B

600

#D69E2E

700

#B7791F

800

#975A16

900

#744210

Green

100

#F0FFF4

200

#C6F6D5

300

#9AE6B4

400

#68D391

500

#48BB78

600

#38A169

700

#2F855A

800

#276749

900

#22543D

Teal

100

#E6FFFA

200

#B2F5EA

300

#81E6D9

400

#4FD1C5

500

#38B2AC

600

#319795

700

#2C7A7B

800

#285E61

900

#234E52

Blue

100

#EBF8FF

200

#BEE3F8

300

#90CDF4

400

#63B3ED

500

#4299E1

600

#3182CE

700

#2B6CB0

800

#2C5282

900

#2A4365

Indigo

100

#EBF4FF

200

#C3DAFE

300

#A3BFFA

400

#7F9CF5

500

#667EEA

600

#5A67D8

700

#4C51BF

800

#434190

900

#3C366B

Purple

100

#FAF5FF

200

#E9D8FD

300

#D6BCFA

400

#B794F4

500

#9F7AEA

600

#805AD5

700

#6B46C1

800

#553C9A

900

#44337A

Pink

100

#FFF5F7

200

#FED7E2

300

#FBB6CE

400

#F687B3

500

#ED64A6

600

#D53F8C

700

#B83280

800

#97266D

900

#702459