Liferay.Design / Lexicon
/
Get Started
    Foundations
    AnimationsColorGrid
      Layout
    Typography
Resources
Part of Liferay, IncCode/Content Licenses

Color

Sign In
Documentation

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.




Dark

HEX
RGB
HSL

Primary

HEX
RGB
HSL

White

HEX
RGB
HSL



ColorCodeUsage
Dark#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

Dark color variations




Dark D2

HEX
RGB
HSL

Dark D1

HEX
RGB
HSL

Dark

HEX
RGB
HSL

Dark L1

HEX
RGB
HSL

Dark L2

HEX
RGB
HSL



ColorLightCodeUsage
Dark D2+10%#111116
Dark D1+5%#1C1C24
Dark Default0#272833First level navigation background and primary texts
Dark L1-4%#30313FSecond level navigation background
Dark L2-8%#393A4AThird level navigation background and active state on navigation

Primary blue color variations




Primary D2

HEX
RGB
HSL

Primary D1

HEX
RGB
HSL

Primary

HEX
RGB
HSL

Primary L0 Accessible 3:1

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 L0-15%#5791FFColor to ensure a 3:1 contrast with white
Primary L1-23%#80ACFFLinks in the navigation section
Primary L2-34%#B3CDFFDisabled background
Primary L3-45%#F0F5FFHover and active background in tables and lists

Light 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.




Light D2

HEX
RGB
HSL

Light D1

HEX
RGB
HSL

Light

HEX
RGB
HSL

Light L1

HEX
RGB
HSL

White

HEX
RGB
HSL



ColorLightCodeUsage
Light D2+10%#D3D6E0
Light D1+5%#E2E4EA
Light Default0#F1F2F5Main background of the application, input backgrounds, and active state in the secondary button
Light L1-2%#F7F8F9Hover State for the Secondary button
White-100%#FFFFFF

Secondary color variations




Secondary

HEX
RGB
HSL

Secondary L0 Accessible 3:1

HEX
RGB
HSL

Secondary L1

HEX
RGB
HSL

Secondary L2

HEX
RGB
HSL

Secondary L3

HEX
RGB
HSL



ColorLightCodeUsage
Secondary-28% desat 5%#6B6C7ESecondary texts
Secondary L0-15%#9393A4Color to ensure a 3:1 contrast with white
Secondary L1-52%#A7A9BCDisabled texts
Secondary L2-65%#CDCED9Border for clickable elements like buttons
Secondary L3-74%#E7E7EDDisabled Background and Border for dividers

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 D2

HEX
RGB
HSL

Error D1

HEX
RGB
HSL

Error

HEX
RGB
HSL

Error L1

HEX
RGB
HSL

Error L2

HEX
RGB
HSL



ColorLightCodeUsage
Error D2+10%#AB1010Active button and links color
Error D1+5%#C31212Hover button and links color
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 D2

HEX
RGB
HSL

Success D1

HEX
RGB
HSL

Success

HEX
RGB
HSL

Success L1

HEX
RGB
HSL

Success L2

HEX
RGB
HSL



ColorLightCodeUsage
Success D2+10%#1C5629Active button and links color
Success D1+5%#226A33Hover button and links color
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 D2

HEX
RGB
HSL

Warning D1

HEX
RGB
HSL

Warning

HEX
RGB
HSL

Warning L1

HEX
RGB
HSL

Warning L2

HEX
RGB
HSL



ColorLightCodeUsage
Warning D2+10%#863A00Active button and links color
Warning D1+5%#9F4500Hover button and links color
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 D2

HEX
RGB
HSL

Info D1

HEX
RGB
HSL

Info

HEX
RGB
HSL

Info L1

HEX
RGB
HSL

Info L2

HEX
RGB
HSL



ColorLightCodeUsage
Info D2+10%#234584Active button and links color
Info D1+5%#294F98Hover button and links color
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.




Blue

HEX
RGB
HSL

Orange

HEX
RGB
HSL

Red

HEX
RGB
HSL

Teal

HEX
RGB
HSL

Pink

HEX
RGB
HSL

Green

HEX
RGB
HSL

Purple

HEX
RGB
HSL

Yellow

HEX
RGB
HSL

Cyan

HEX
RGB
HSL

Indigo

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 product or corporate image.

Something to improve? Report an issue!
Menu