Colors

Rainbow colors contain colors of the rainbow: red, green, blue, etc..

Brand colors typically match one set of the rainbow colors to achieve a consistent design. So if your brand color is blue, the brand and blue colors will match.

What's the difference? Brand colors and rainbow colors are used in different contexts. When showing the sky, it should usually have the color blue. When showing a button, it may have the action color. They can both be blue - or not. Some websites may define the action color to be green, for example. But this should not affect the color of the sky! We don't want green skies, most of the time. When developing applications, we don't yet know what color configuration the website will have, so we have a rich selection of color names to allow for correct customization.

 

Color names have the syntax colorName-shade, for example brand-500 or action-100.

See the available pairs listed below.

 

Rainbow

red
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
pink
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
purple
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
blue
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
cyan
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
green
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
yellow
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
orange
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
gray
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950

Brand

brand
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
brand2
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
brand3
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
action
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
info
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
success
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
warning
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
danger
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
link
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
powered by Boomla