Colors
Here you will find Guidelines about Rocket.Chat's Color
Our color palette is varied and offers many accent colors to use when producing content for our brand. A white or light-colored background is favored, with small splashes of color in the form of type accentuation, images, or small elements that display our brand tones.
A dark background can also be used, but in this case, white type and accenting elements are best for contrast.

Primary

Red is a primary color along with blue and both should be prioritized in their usage above secondary and supporting colors. Red is the color of our logo and as such plays a major role in our branding, blue was also adopted as a primary color for its positive connotations in the tech space. These colors should only be used on white, or corresponding light backgrounds (see supporting colors section). Transparency on these colors may be altered if used on elements but not on backgrounds and typography. The typography that sits atop these colors should be white.
Their respective color codes are:
  • Red: #F5455C
  • Blue: #1D74F5

Secondary

The following first two colors serve as taste breakers from the usual red and blue and can be used in iconography, illustrations, typography, and other assets to bring variety to our visual identity. These can also be used to highlight certain keywords in a title or subtitle, but shouldn’t be used as the background color. Our shades of black and white also serve to bring versatility to our brand image, offering more possibilities for typographical styling and backgrounds.
Their respective color codes are:
  • Dark Purple: #9F22C7
  • Light Purple: #CA71E7
  • Light Green: #2DEDA5
  • Dark Green: #148660
  • White: #F7F8FA
  • Black: #2F343D

Supporting Colors

These lighter shades of our brand colors serve as options for backgrounds and iconography, as well as other elements such as images and illustrations. These lighter shades of our brand colors serve as options for backgrounds and iconography, as well as other elements such as images and illustrations.
Their respective color codes are:
  • Red for backgrounds: #FEECEF
  • Blue for backgrounds: #E8F1FE
  • Purple for backgrounds: #F5E9F9
  • Green for backgrounds: #EAFCF6

Highlight Shades:

These gradients are a gradient version of the supporting colors and should only be used as the fill for the highlighting shape, as exemplified on our homepage, behind the second sentence in the subtitle.
Their respective color codes are:
  • Light red highlight: #FEECEF to#FFFFFF
  • Light blue highlight: #E8F1FE to#FFFFFF
  • Light purple highlight: #F5E9F9 to#FFFFFF
  • Light green highlight: #EAFCF6 to#FFFFFF
Last modified 1mo ago