Color

The Kalo brand palette consists of two primary colors, and four secondary.

Colors and variables

The whole color palette is available in several different formats (CSS variables, JS variables, and via the theme prop). Variables use the color name (seen below on the right). For example, to use red in CSS, access it like so:

Core Palette

grey500
navy900
green500
blue500
purple500
pink500
orange500
coral

Extended Palette

grey
000 #f9fafc
100 #edf1f5
200 #dde1e4
300 #cdd3d8
400 #bdc4cb
500 #abb4bb
600 #98a0a7
700 #83898f
800 #676c71
900 #3c3f42
navy
000 #eaeaee
100 #d5d5dc
200 #c0c0cb
300 #ababb9
400 #9697ab
500 #808296
600 #6b6d85
700 #565873
800 #414262
900 #2c2e50
green
000 #e8f9f3
100 #d0f3e7
200 #b5ecd9
300 #98e4ca
400 #76dcb8
500 #4ed2a4
600 #46be94
700 #3da682
800 #338a6c
900 #25644e
blue
000 #e8f6f8
100 #d0ecf2
200 #b5e2eb
300 #97d6e3
400 #75c8d9
500 #4db9cf
600 #45a7bb
700 #3d92a4
800 #327988
900 #245761
purple
000 #f3effa
100 #e6def5
200 #d8cbf0
300 #c8b6e9
400 #b59ee2
500 #9f81da
600 #8f74c4
700 #7d65ac
800 #67548e
900 #493b65
pink
000 #fdecf1
100 #fbd6e3
200 #f9bed2
300 #f6a2be
400 #f37da5
500 #ee467e
600 #d73f71
700 #bc3763
800 #9b2d52
900 #6f203b
orange
000 #fef5e1
100 #feebc2
200 #fee0a0
300 #fdd479
400 #fdc64e
500 #fdb61c
600 #e4a419
700 #c99016
800 #a77812
900 #78560d

Accessibility

We try to build our interfaces to be as inclusive as possible. We use the WCAG 2.1 AA Level as a way of measuring whether the contrast between two colors is high enough that it is legible. As a rough guideline, try not to merge colors from the middle of the palette. For example, pink400 text on a green600 background will not pass whereas purple900 on orange100 will.

The following chart shows our color palette on a few commonly used background colors

grey000 on white
FAIL
grey000 on grey000
FAIL
grey000 on grey100
FAIL
grey000 on navy900
PASS
grey000 on black
PASS
grey100 on white
FAIL
grey100 on grey000
FAIL
grey100 on grey100
FAIL
grey100 on navy900
PASS
grey100 on black
PASS
grey200 on white
FAIL
grey200 on grey000
FAIL
grey200 on grey100
FAIL
grey200 on navy900
PASS
grey200 on black
PASS
grey300 on white
FAIL
grey300 on grey000
FAIL
grey300 on grey100
FAIL
grey300 on navy900
PASS
grey300 on black
PASS
grey400 on white
FAIL
grey400 on grey000
FAIL
grey400 on grey100
FAIL
grey400 on navy900
PASS
grey400 on black
PASS
grey500 on white
FAIL
grey500 on grey000
FAIL
grey500 on grey100
FAIL
grey500 on navy900
PASS
grey500 on black
PASS
grey600 on white
FAIL
grey600 on grey000
FAIL
grey600 on grey100
FAIL
grey600 on navy900
PASS
grey600 on black
PASS
grey700 on white
FAIL
grey700 on grey000
FAIL
grey700 on grey100
FAIL
grey700 on navy900
PASS
grey700 on black
PASS
grey800 on white
PASS
grey800 on grey000
FAIL
grey800 on grey100
FAIL
grey800 on navy900
FAIL
grey800 on black
FAIL
grey900 on white
PASS
grey900 on grey000
FAIL
grey900 on grey100
FAIL
grey900 on navy900
FAIL
grey900 on black
FAIL
navy000 on white
FAIL
navy000 on grey000
FAIL
navy000 on grey100
FAIL
navy000 on navy900
PASS
navy000 on black
PASS
navy100 on white
FAIL
navy100 on grey000
FAIL
navy100 on grey100
FAIL
navy100 on navy900
PASS
navy100 on black
PASS
navy200 on white
FAIL
navy200 on grey000
FAIL
navy200 on grey100
FAIL
navy200 on navy900
PASS
navy200 on black
PASS
navy300 on white
FAIL
navy300 on grey000
FAIL
navy300 on grey100
FAIL
navy300 on navy900
PASS
navy300 on black
PASS
navy400 on white
FAIL
navy400 on grey000
FAIL
navy400 on grey100
FAIL
navy400 on navy900
PASS
navy400 on black
PASS
navy500 on white
FAIL
navy500 on grey000
FAIL
navy500 on grey100
FAIL
navy500 on navy900
FAIL
navy500 on black
PASS
navy600 on white
PASS
navy600 on grey000
FAIL
navy600 on grey100
FAIL
navy600 on navy900
FAIL
navy600 on black
FAIL
navy700 on white
PASS
navy700 on grey000
FAIL
navy700 on grey100
FAIL
navy700 on navy900
FAIL
navy700 on black
FAIL
navy800 on white
PASS
navy800 on grey000
FAIL
navy800 on grey100
FAIL
navy800 on navy900
FAIL
navy800 on black
FAIL
navy900 on white
PASS
navy900 on grey000
FAIL
navy900 on grey100
FAIL
navy900 on navy900
FAIL
navy900 on black
FAIL
green000 on white
FAIL
green000 on grey000
FAIL
green000 on grey100
FAIL
green000 on navy900
PASS
green000 on black
PASS
green100 on white
FAIL
green100 on grey000
FAIL
green100 on grey100
FAIL
green100 on navy900
PASS
green100 on black
PASS
green200 on white
FAIL
green200 on grey000
FAIL
green200 on grey100
FAIL
green200 on navy900
PASS
green200 on black
PASS
green300 on white
FAIL
green300 on grey000
FAIL
green300 on grey100
FAIL
green300 on navy900
PASS
green300 on black
PASS
green400 on white
FAIL
green400 on grey000
FAIL
green400 on grey100
FAIL
green400 on navy900
PASS
green400 on black
PASS
green500 on white
FAIL
green500 on grey000
FAIL
green500 on grey100
FAIL
green500 on navy900
PASS
green500 on black
PASS
green600 on white
FAIL
green600 on grey000
FAIL
green600 on grey100
FAIL
green600 on navy900
PASS
green600 on black
PASS
green700 on white
FAIL
green700 on grey000
FAIL
green700 on grey100
FAIL
green700 on navy900
PASS
green700 on black
PASS
green800 on white
FAIL
green800 on grey000
FAIL
green800 on grey100
FAIL
green800 on navy900
FAIL
green800 on black
PASS
green900 on white
PASS
green900 on grey000
FAIL
green900 on grey100
FAIL
green900 on navy900
FAIL
green900 on black
FAIL
blue000 on white
FAIL
blue000 on grey000
FAIL
blue000 on grey100
FAIL
blue000 on navy900
PASS
blue000 on black
PASS
blue100 on white
FAIL
blue100 on grey000
FAIL
blue100 on grey100
FAIL
blue100 on navy900
PASS
blue100 on black
PASS
blue200 on white
FAIL
blue200 on grey000
FAIL
blue200 on grey100
FAIL
blue200 on navy900
PASS
blue200 on black
PASS
blue300 on white
FAIL
blue300 on grey000
FAIL
blue300 on grey100
FAIL
blue300 on navy900
PASS
blue300 on black
PASS
blue400 on white
FAIL
blue400 on grey000
FAIL
blue400 on grey100
FAIL
blue400 on navy900
PASS
blue400 on black
PASS
blue500 on white
FAIL
blue500 on grey000
FAIL
blue500 on grey100
FAIL
blue500 on navy900
PASS
blue500 on black
PASS
blue600 on white
FAIL
blue600 on grey000
FAIL
blue600 on grey100
FAIL
blue600 on navy900
PASS
blue600 on black
PASS
blue700 on white
FAIL
blue700 on grey000
FAIL
blue700 on grey100
FAIL
blue700 on navy900
FAIL
blue700 on black
PASS
blue800 on white
PASS
blue800 on grey000
FAIL
blue800 on grey100
FAIL
blue800 on navy900
FAIL
blue800 on black
FAIL
blue900 on white
PASS
blue900 on grey000
FAIL
blue900 on grey100
FAIL
blue900 on navy900
FAIL
blue900 on black
FAIL
purple000 on white
FAIL
purple000 on grey000
FAIL
purple000 on grey100
FAIL
purple000 on navy900
PASS
purple000 on black
PASS
purple100 on white
FAIL
purple100 on grey000
FAIL
purple100 on grey100
FAIL
purple100 on navy900
PASS
purple100 on black
PASS
purple200 on white
FAIL
purple200 on grey000
FAIL
purple200 on grey100
FAIL
purple200 on navy900
PASS
purple200 on black
PASS
purple300 on white
FAIL
purple300 on grey000
FAIL
purple300 on grey100
FAIL
purple300 on navy900
PASS
purple300 on black
PASS
purple400 on white
FAIL
purple400 on grey000
FAIL
purple400 on grey100
FAIL
purple400 on navy900
PASS
purple400 on black
PASS
purple500 on white
FAIL
purple500 on grey000
FAIL
purple500 on grey100
FAIL
purple500 on navy900
PASS
purple500 on black
PASS
purple600 on white
FAIL
purple600 on grey000
FAIL
purple600 on grey100
FAIL
purple600 on navy900
FAIL
purple600 on black
PASS
purple700 on white
PASS
purple700 on grey000
FAIL
purple700 on grey100
FAIL
purple700 on navy900
FAIL
purple700 on black
FAIL
purple800 on white
PASS
purple800 on grey000
FAIL
purple800 on grey100
FAIL
purple800 on navy900
FAIL
purple800 on black
FAIL
purple900 on white
PASS
purple900 on grey000
FAIL
purple900 on grey100
FAIL
purple900 on navy900
FAIL
purple900 on black
FAIL
pink000 on white
FAIL
pink000 on grey000
FAIL
pink000 on grey100
FAIL
pink000 on navy900
PASS
pink000 on black
PASS
pink100 on white
FAIL
pink100 on grey000
FAIL
pink100 on grey100
FAIL
pink100 on navy900
PASS
pink100 on black
PASS
pink200 on white
FAIL
pink200 on grey000
FAIL
pink200 on grey100
FAIL
pink200 on navy900
PASS
pink200 on black
PASS
pink300 on white
FAIL
pink300 on grey000
FAIL
pink300 on grey100
FAIL
pink300 on navy900
PASS
pink300 on black
PASS
pink400 on white
FAIL
pink400 on grey000
FAIL
pink400 on grey100
FAIL
pink400 on navy900
PASS
pink400 on black
PASS
pink500 on white
FAIL
pink500 on grey000
FAIL
pink500 on grey100
FAIL
pink500 on navy900
FAIL
pink500 on black
PASS
pink600 on white
FAIL
pink600 on grey000
FAIL
pink600 on grey100
FAIL
pink600 on navy900
FAIL
pink600 on black
PASS
pink700 on white
PASS
pink700 on grey000
FAIL
pink700 on grey100
FAIL
pink700 on navy900
FAIL
pink700 on black
FAIL
pink800 on white
PASS
pink800 on grey000
FAIL
pink800 on grey100
FAIL
pink800 on navy900
FAIL
pink800 on black
FAIL
pink900 on white
PASS
pink900 on grey000
FAIL
pink900 on grey100
FAIL
pink900 on navy900
FAIL
pink900 on black
FAIL
orange000 on white
FAIL
orange000 on grey000
FAIL
orange000 on grey100
FAIL
orange000 on navy900
PASS
orange000 on black
PASS
orange100 on white
FAIL
orange100 on grey000
FAIL
orange100 on grey100
FAIL
orange100 on navy900
PASS
orange100 on black
PASS
orange200 on white
FAIL
orange200 on grey000
FAIL
orange200 on grey100
FAIL
orange200 on navy900
PASS
orange200 on black
PASS
orange300 on white
FAIL
orange300 on grey000
FAIL
orange300 on grey100
FAIL
orange300 on navy900
PASS
orange300 on black
PASS
orange400 on white
FAIL
orange400 on grey000
FAIL
orange400 on grey100
FAIL
orange400 on navy900
PASS
orange400 on black
PASS
orange500 on white
FAIL
orange500 on grey000
FAIL
orange500 on grey100
FAIL
orange500 on navy900
PASS
orange500 on black
PASS
orange600 on white
FAIL
orange600 on grey000
FAIL
orange600 on grey100
FAIL
orange600 on navy900
PASS
orange600 on black
PASS
orange700 on white
FAIL
orange700 on grey000
FAIL
orange700 on grey100
FAIL
orange700 on navy900
PASS
orange700 on black
PASS
orange800 on white
FAIL
orange800 on grey000
FAIL
orange800 on grey100
FAIL
orange800 on navy900
FAIL
orange800 on black
PASS
orange900 on white
PASS
orange900 on grey000
FAIL
orange900 on grey100
FAIL
orange900 on navy900
FAIL
orange900 on black
FAIL