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.

hero
hero

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