Colors
All the colors under one roof.
Colors play an important role when we are working with a product, a service or a space. The right combination of colors can influence how users feel, think, and behave.
Primary Color
Cashbac’s color palette has been created to reflect the spirit of Cashbac brand. Blue is used across all our communication as an essential element of branding. Black is used primarily for body text and headings, and White is used for screen backgrounds and negative space.
CASHBAC50
HEX: #26ADE4
TOSCA50
HEX: #00C4A6
BLACK50
HEX: #1F2D3E
WHITE
HEX: #FFFFFF
Secondary Colors
Secondary color provides more ways to accent and distinguish Cashbac product. Each color is selected with purpose in order to provide meaningful feedback within Cashbac products.
GREEN50
HEX: #4dbd74
RED50
HEX: #f86c6b
YELLOW50
HEX: #ffc107
INFO50
HEX: #63c2de
Shades and Tints
We intend for tints and shades to be ever evolving, offering an endless palette to choose from. Usage of these colors varies depending on scenarios, but they come in handy for components in our products.
CASHBAC10
HEX: #E9F6FC
CASHBAC40
HEX: #51BDE9
CASHBAC50
HEX: #26ADE4
CASHBAC60
HEX: #1E8AB6
CASHBAC80
HEX: #166788
TOSCA10
HEX: #EBFFFC
TOSCA40
HEX: #00E0BF
TOSCA50
HEX: #00C4A6
TOSCA60
HEX: #228576
TOSCA80
HEX: #0D4A41
BLACK10
HEX: #E9EAEC
BLACK40
HEX: #4B5764
BLACK60
HEX: #182431
BLACK80
HEX: #0C1218
Color Usage
Cashbac’s color palette has been created to reflect the spirit of Cashbac brand. Blue is used across all our communication as an essential element of branding. Black is used primarily for body text and headings, and White is used for screen backgrounds and negative space.
| Color | Hex Code | Usage |
|---|---|---|
| CASHBAC50 | #26ADE4 | Primary actions, buttons, links. |
| TOSCA50 | #00C4A6 | Secondary Accent |
| GREEN50 | #4dbd74 | For success state. |
| RED50 | #f86c6b | All error text, negative states |
| YELLOW50 | #ffc107 | All warning text, warning states |
| INFO50 | #63c2de | All error text, negative states |
| BLACK80 | #0C1218 | Body text & component description |
| BLACK60 | #182431 | Inactive states of icons & other components |
| BLACK50 | #1F2D3E | Body text & component description |
| BLACK40 | #4B5764 | Default texts in text field, disabled states of buttons, icons & other components |
| BLACK10 | #E9EAEC | Dividers & borders |
Color Contrast
We ensure that all types of color combinations on our platform must pass WCAG AA standards. WCAG recommends contrast ratio of atleast 4.5:1 for small text against its background and at least 3:1 for large text. The contrast ratio between a color and its background is based on its luminance.
See the Pen Color Palette Contrast Ratio Checker and WCAG 2.0 Test MVP by Daeng Muhammad Feisal (@daengdoang) on CodePen.