Colors

Colors for use in CHT applications

Color helps users interpret and interact with app content by establishing a hierarchy of information, highlighting actions, indicating states, and conveying meaning.

Primary colors

These are the primary colors of the navigation tabs. When necessary, use white #FFFFFF text over these colors.

Blue	Periwinkle	Pink	Teal	Yellow
`#63A2C6`	`#7193EE`	`#F47B63`	`#76B0B0`	`#E9AA22`
`rgb(99, 162, 198)`	`rgb(113, 147, 238)`	`rgb(244, 123, 99)`	`rgb(118, 176, 176)`	`rgb(233, 170, 34)`
Messages	Tasks	People	Targets	Reports

Secondary colors

These are the secondary (highlight) colors of the navigation tabs.

Blue Highlight	Periwinkle Highlight	Pink Highlight	Teal Highlight	Yellow Highlight
`#EEF5F9`	`#F0F4FD`	`#FDF1EF`	`#DFEAEA`	`#FCF6E7`
`rgb(238, 245, 249)`	`rgb(240, 244, 253)`	`rgb(253, 241, 239)`	`rgb(223, 234, 234)`	`rgb(252, 246, 231)`

Status colors

These are the status indication colors of the system. When necessary, use white #FFFFFF text over these colors.

Teal Dark	Blue Dark	Yellow Dark	Red
`#218E7F`	`#007AC0`	`#C78330`	`#E33030`
`rgb(33, 142, 127)`	`rgb(0, 122, 192)`	`rgb(199, 131, 48)`	`rgb(227, 48, 48)`
Completed, verified, sent actions	Primary button, link, info	Delayed, incomplete actions	Overdue, unmet, error, delete, failed, denied actions

Backgrounds

Gray Dark	Gray Light	Gray Medium	Gray Ultra Dark	Gray Ultra Light	White
`#777777`	`#E0E0E0`	`#A0A0A0`	`#333333`	`#F2F2F2`	`#FFFFFF`
`rgb(119, 119, 119)`	`rgb(224, 224, 224)`	`rgb(160, 160, 160)`	`rgb(51, 51, 51)`	`rgb(242, 242, 242)`	`rgb(255, 255, 255)`
Disabled statuses, secondary body text	1px line borders, action bar icons	Muted or deceased contacts, cleared messages	Overdue, unmet, error, delete, failed, denied actions	App background, list and dropdown highlights	Form background

For more information on how these colors are applied in the app, see the color variables file.

Last updated on May 16, 2025

Did this documentation help you ?

Typography