Color

A consistent color palette is an essential asset in the communication resources of any design system.

Colors have a huge impact in a system. They define the visual identity, bring harmony, communicate, etc. Lexicon defines the following color palette that you are free to change for your own.

Primary colors

Primary colors define part of Lexicon's visual identity. These colors have been carefully chosen for how easily they can be combined and with accessibility in mind.




Main

HEX
RGB
HSL

Primary

HEX
RGB
HSL

White

HEX
RGB
HSL



ColorCodeUsage
Main#272833Texts/icons, navigation background, borders, and dividers
Primary#0B5FFFMain actions like primary buttons, links, hover, and active
White#FFFFFFCards background, toolbar background, modals, forms, and texts/icons

Main color variations




Main

HEX
RGB
HSL

Main L1

HEX
RGB
HSL

Main L2

HEX
RGB
HSL

Main L3

HEX
RGB
HSL

Main L4

HEX
RGB
HSL

Main L5

HEX
RGB
HSL

Main L6

HEX
RGB
HSL



ColorLightCodeUsage
Main Default0#272833First level navigation background and primary texts
Main L1-4%#30313FSecond level navigation background
Main L2-8%#393A4AThird level navigation background and active state on navigation
Main L3-28% desat 5%#6B6C7ESecondary texts
Main L4-52%#A7A9BCDisabled texts
Main L5-65%#CDCED9Border for clickable elements like buttons
Main L6-74%#E7E7EDDisabled Background and Border for dividers

Gray variations

Color does have meaning in certain contexts in very specific use-cases, we employ color as one factor in imparting meaning. Note that we do not use color alone, it is an enhancement. For more on this, please see Lexicon's guides on using color in a functional way.




Gray Background Default

HEX
RGB
HSL

Gray Background L1

HEX
RGB
HSL



ColorLightCodeUsage
Gray Background Default0#F1F2F5Main background of the application, input backgrounds, and active state in the secondary button
Gray Background L1-2%#F7F8F9Hover State for the Secondary button

Primary blue color variations




Primary D2

HEX
RGB
HSL

Primary D1

HEX
RGB
HSL

Primary

HEX
RGB
HSL

Primary L1

HEX
RGB
HSL

Primary L2

HEX
RGB
HSL

Primary L3

HEX
RGB
HSL



ColorLightCodeUsage
Primary D2+10%#004AD7Active button and links color
Primary D1+5%#0053f0Hover button and links color
Primary Default0#0B5FFFMain action and links
Primary L1-23%#80ACFFLinks in the navigation section
Primary L2-34%#B3CDFFDisabled background
Primary L3-45%#F0F5FFHover and active background in tables and lists

Secondary colors

Secondary colors are frequently used and still important, but they do not define the visual identity as much as Primary colors.




Error

HEX
RGB
HSL

Success

HEX
RGB
HSL

Warning

HEX
RGB
HSL

Info

HEX
RGB
HSL



Each color is defined below, along with its variations and usage:




Error

HEX
RGB
HSL

Error L1

HEX
RGB
HSL

Error L2

HEX
RGB
HSL



ColorLightCodeUsage
Error Default0#DA1414Text color in error messages
Error L1-28%#F48989Border color in error status messages
Error L2-50%#FEEFEFBackground color in error status messages



Success

HEX
RGB
HSL

Success L1

HEX
RGB
HSL

Success L2

HEX
RGB
HSL



ColorLightCodeUsage
Success Default0#287D3CText color in success messages
Success L1-25%#5ACA75Border color in success status messages
Success L2-63%#EDF9F0Background color in success messages like alerts



Warning

HEX
RGB
HSL

Warning L1

HEX
RGB
HSL

Warning L2

HEX
RGB
HSL



ColorLightCodeUsage
Warning Default0#B95000Text color in warning messages
Warning L1-25%#FF8F39Border color in warning messages like alerts
Warning L2-60%#FFF4ECBackground color in warning messages like alerts



Info

HEX
RGB
HSL

Info L1

HEX
RGB
HSL

Info L2

HEX
RGB
HSL



ColorLightCodeUsage
Info Default0#2E5AACText color in error messages.
Info L1-28%#89A7E0Border color in info status messages.
Info L2-53%#EEF2FABackground color in info status messages.



The last color definition row is used in input fields to reduce the impact of the color saturation in the borders.

Chart colors

Lexicon provides a specific color palette for charts. For more information on its usage please visit chart colors.




Stark

HEX
RGB
HSL

Mormont

HEX
RGB
HSL

Lannister

HEX
RGB
HSL

Martell

HEX
RGB
HSL

Tyrell

HEX
RGB
HSL

Targaryen

HEX
RGB
HSL

Dothraki

HEX
RGB
HSL

Kashtark

HEX
RGB
HSL

Tarly

HEX
RGB
HSL



Changing Lexicon color palette

This color palette was chosen with Lexicon's visual identity and brand in mind. You can of course substitute this color palette for colors that reflect your corporate image.

Menu