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 the 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 plays a significant 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:
#F5455CBlue:
#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 black and white shades also bring versatility to our brand image, offering more possibilities for typographical styling and backgrounds.
Their respective color codes are:
Dark Purple:
#9F22C7Light Purple:
#CA71E7Light Green:
#2DEDA5Dark Green:
#148660White:
#F7F8FABlack:
#2F343D
Supporting Colors
These lighter shades of our brand colors serve as options for backgrounds, iconography, and other elements such as images and illustrations. These lighter shades of our brand colors serve as options for backgrounds, iconography, and other elements such as images and illustrations.
Their respective color codes are:
Red for backgrounds:
#FEECEFBlue for backgrounds:
#E8F1FEPurple for backgrounds:
#F5E9F9Green 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.
Light red highlight:
#FEECEFto#FFFFFFLight blue highlight:
#E8F1FEto#FFFFFFLight purple highlight:
#F5E9F9to#FFFFFFLight green highlight:
#EAFCF6to#FFFFFF
Last updated
