MSQ Logo

MSQ Design System Colors

The complete MSQ color palette in HEX, RGB, HSL, CSS variables, and Tailwind classes. Ready to copy and paste into your project.

Note: Click on any color value to copy it to your clipboard. Colors are organized by scale and displayed in all common formats.

Primary Blue

Primary brand colors used for main actions and highlights.

50
HEX
RGB
HSL
CSS
Token
100
HEX
RGB
HSL
CSS
Token
200
HEX
RGB
HSL
CSS
Token
300
HEX
RGB
HSL
CSS
Token
400
HEX
RGB
HSL
CSS
Token
500
HEX
RGB
HSL
CSS
Token
600
HEX
RGB
HSL
CSS
Token
700
HEX
RGB
HSL
CSS
Token
800
HEX
RGB
HSL
CSS
Token
900
HEX
RGB
HSL
CSS
Token
950
HEX
RGB
HSL
CSS
Token

Gray

Neutral colors used for text, backgrounds, borders, and dividers.

50
HEX
RGB
HSL
CSS
Token
100
HEX
RGB
HSL
CSS
Token
200
HEX
RGB
HSL
CSS
Token
300
HEX
RGB
HSL
CSS
Token
400
HEX
RGB
HSL
CSS
Token
500
HEX
RGB
HSL
CSS
Token
600
HEX
RGB
HSL
CSS
Token
700
HEX
RGB
HSL
CSS
Token
800
HEX
RGB
HSL
CSS
Token
900
HEX
RGB
HSL
CSS
Token
950
HEX
RGB
HSL
CSS
Token

Error Red

Colors used for error states and destructive actions.

50
HEX
RGB
HSL
CSS
Token
100
HEX
RGB
HSL
CSS
Token
200
HEX
RGB
HSL
CSS
Token
300
HEX
RGB
HSL
CSS
Token
400
HEX
RGB
HSL
CSS
Token
500
HEX
RGB
HSL
CSS
Token
600
HEX
RGB
HSL
CSS
Token
700
HEX
RGB
HSL
CSS
Token
800
HEX
RGB
HSL
CSS
Token
900
HEX
RGB
HSL
CSS
Token
950
HEX
RGB
HSL
CSS
Token

Base Colors

Base white and black colors.

White
HEX
RGB
HSL
CSS
Token
Black
HEX
RGB
HSL
CSS
Token