​
Introduction

The Chat UI Kit comes with a carefully designed color palette to ensure a consistent and visually appealing user interface. It uses the Block, Element, Modifier (BEM) methodology, a standard naming convention for CSS classes. This approach allows for organized, scalable styling, and components can be easily customized by overwriting the applicable resources file in the Kit’s stylesheet.

​
Color Palette

The primary color serves as the foundation of your chat UI, used for key actions, branding, and prominent interface elements, while the primary extended palette complements it with subtle variations suited for secondary and tertiary actions or supporting elements.

​
Primary Color

Light Mode: 
--cometchat-primary-color: #6852d6;
--cometchat-extended-primary-color-50: #f9f8fd;
--cometchat-extended-primary-color-100: #edeafa;
--cometchat-extended-primary-color-200: #dcd7f6;
--cometchat-extended-primary-color-300: #ccc4f1;
--cometchat-extended-primary-color-400: #bbb1ed;
--cometchat-extended-primary-color-500: #aa9ee8;
--cometchat-extended-primary-color-600: #9a8be4;
--cometchat-extended-primary-color-700: #8978df;
--cometchat-extended-primary-color-800: #7965db;
--cometchat-extended-primary-color-900: #5d49be;
Dark Mode: 
--cometchat-primary-color: #6852d6;
--cometchat-extended-primary-color-50: #15102b;
--cometchat-extended-primary-color-100: #1d173c;
--cometchat-extended-primary-color-200: #251e4d;
--cometchat-extended-primary-color-300: #2e245e;
--cometchat-extended-primary-color-400: #362b6f;
--cometchat-extended-primary-color-500: #3e3180;
--cometchat-extended-primary-color-600: #473892;
--cometchat-extended-primary-color-700: #4f3ea3;
--cometchat-extended-primary-color-800: #5745b4;
--cometchat-extended-primary-color-900: #7460d9;

​
Extended Primary Color

Light Mode:
Dark Mode:

​
Resources for Developers and Designers

​
GitHub Repository

Access the complete list of color variables and their hex values in our GitHub repository.

​
Figma UI Kit

For designers, the Figma UI Kit includes a fully integrated color palette, making it easy to visualize and apply the colors in your designs.