Skip to main content
Version: v5

Color Resources

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:

Image
--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:

Image
--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:

Image

Dark Mode:

Image

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.

Loading Figma