> For the complete documentation index, see [llms.txt](https://docs.klai.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.klai.studio/engineering-reference-docs/software-testing-overview/ux-ui-checklist/topics/colors.md).

# Colors 🎨

Colors represent your story in a product's interface. They inform the mind emotionally and intellectually on what's happening, and what decision to make next. In short, color is all about influence.

The color of a button influences how a user reacts to its intent. The color of a brand influences a user's choice to commit. The contrast, depth and saturation of color all influence how an element is communicated. A good experience lets color effectively influence.

* [ ] Color psychology

  How color can impact how people think, feel, and act

  ⭐️ Utilise the psychology e.g. destructive button is red, approved message is green

  ⭐️ Research the cultural differences in color, dependent on who your audience is

  ⭐️ Don't add colors just for appearance, they will always communicate something to the user
* [ ] Branding values

  How your brand colors incorporate into the experience

  ⭐️ Primary, secondary and tertiary brand colors can translate the hierarchy of actions

  ⭐️ Color can represent your brand's style: traditional or modern, fancy or grungy
* [ ] UI states

  Showing success, error and warning elements through color

  ⭐️ Don't rely on color only to convey state, combine it with information e.g. explain there is an error when an element's color changes to red
* [ ] Contrast

  How colors combine in a purposefully different way

  ⭐️ Change your design to grayscale to test contrast from hue and value intensity
* [ ] Combinations

  How colors work together as a palette