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.

Table of Contents

Grays
Colors
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark

Check the Lexicon Color for a more in-depth look at the motivations and proper usage of this.

Grays

N/A

Var

$black

Hex

#000

Rgb

rgb(0, 0, 0)

Dark

Var

$gray-900

Hex

#272833

Rgb

rgb(39, 40, 51)

Dark L2

Var

$gray-800

Hex

#343a40

Rgb

rgb(52, 58, 64)

N/A

Var

$gray-700

Hex

#495057

Rgb

rgb(73, 80, 87)

Secondary

Var

$gray-600

Hex

#6b6c7e

Rgb

rgb(107, 108, 126)

Secondary L1

Var

$gray-500

Hex

#a7a9bc

Rgb

rgb(167, 169, 188)

Secondary L2

Var

$gray-400

Hex

#cdced9

Rgb

rgb(205, 206, 217)

Secondary L3

Var

$gray-300

Hex

#e7e7ed

Rgb

rgb(231, 231, 237)

Light

Var

$gray-200

Hex

#f1f2f5

Rgb

rgb(241, 242, 245)

Light L1

Var

$gray-100

Hex

#f7f8f9

Rgb

rgb(247, 248, 249)

White

Var

$white

Hex

#fff

Rgb

rgb(255, 255, 255)

Colors

Blue

Var

$blue

Hex

#4b9fff

Rgb

rgb(75, 159, 255)

Orange

Var

$orange

Hex

#ffb46e

Rgb

rgb(255, 180, 110)

Red

Var

$red

Hex

#ff5f5f

Rgb

rgb(255, 95, 95)

Teal

Var

$teal

Hex

#50d2a0

Rgb

rgb(80, 210, 160)

Pink

Var

$pink

Hex

#ff73c3

Rgb

rgb(255, 115, 195)

Green

Var

$green

Hex

#9be169

Rgb

rgb(155, 225, 105)

Purple

Var

$purple

Hex

#af78ff

Rgb

rgb(175, 120, 255)

Yellow

Var

$yellow

Hex

#ffd76e

Rgb

rgb(255, 215, 110)

Cyan

Var

$cyan

Hex

#5fc8ff

Rgb

rgb(95, 200, 255)

Indigo

Var

$indigo

Hex

#7785ff

Rgb

rgb(119, 133, 255)

Primary

Primary D2

Var

$primary-d2

Hex

#004ad7

Rgb

rgb(0, 74, 215)

Primary D1

Var

$primary-d1

Hex

#0053f0

Rgb

rgb(0, 83, 240)

Primary

Var

$primary

Hex

#0b5fff

Rgb

rgb(11, 95, 255)

Primary L0

Var

$primary-l0

Hex

#5791ff

Rgb

rgb(87, 145, 255)

Primary L1

Var

$primary-l1

Hex

#80acff

Rgb

rgb(128, 172, 255)

Primary L2

Var

$primary-l2

Hex

#b3cdff

Rgb

rgb(179, 205, 255)

Primary L3

Var

$primary-l3

Hex

#f0f5ff

Rgb

rgb(240, 245, 255)

Secondary

Dark L1

Var

$secondary-d2

Hex

#30313f

Rgb

rgb(48, 49, 63)

Dark L2

Var

$secondary-d1

Hex

#393a4a

Rgb

rgb(57, 58, 74)

Secondary

Var

$secondary

Hex

#6b6c7e

Rgb

rgb(107, 108, 126)

Secondary L0

Var

$secondary-l0

Hex

#9393a4

Rgb

rgb(147, 147, 164)

Secondary L1

Var

$secondary-l1

Hex

#a7a9bc

Rgb

rgb(167, 169, 188)

Secondary L2

Var

$secondary-l2

Hex

#cdced9

Rgb

rgb(205, 206, 217)

Secondary L3

Var

$secondary-l3

Hex

#e7e7ed

Rgb

rgb(231, 231, 237)

Success

Success D2

Var

$success-d2

Hex

#1c5629

Rgb

rgb(28, 86, 41)

Success D1

Var

$success-d1

Hex

#226a33

Rgb

rgb(34, 106, 51)

Success

Var

$success

Hex

#287d3c

Rgb

rgb(40, 125, 60)

Success L1

Var

$success-l1

Hex

#5aca75

Rgb

rgb(90, 202, 117)

Success L2

Var

$success-l2

Hex

#edf9f0

Rgb

rgb(237, 249, 240)

Info

Info D2

Var

$info-d2

Hex

#234584

Rgb

rgb(35, 69, 132)

Info D1

Var

$info-d1

Hex

#294f98

Rgb

rgb(41, 79, 152)

Info

Var

$info

Hex

#2e5aac

Rgb

rgb(46, 90, 172)

Info L1

Var

$info-l1

Hex

#89a7e0

Rgb

rgb(137, 167, 224)

Info L2

Var

$info-l2

Hex

#eef2fa

Rgb

rgb(238, 242, 250)

Warning

Warning D2

Var

$warning-d2

Hex

#863a00

Rgb

rgb(134, 58, 0)

Warning D1

Var

$warning-d1

Hex

#9f4500

Rgb

rgb(159, 69, 0)

Warning

Var

$warning

Hex

#b95000

Rgb

rgb(185, 80, 0)

Warning L1

Var

$warning-l1

Hex

#ff8f39

Rgb

rgb(255, 143, 57)

Warning L2

Var

$warning-l2

Hex

#fff4ec

Rgb

rgb(255, 244, 236)

Danger

Error D2

Var

$danger-d2

Hex

#ab1010

Rgb

rgb(171, 16, 16)

Error D1

Var

$danger-d1

Hex

#c31212

Rgb

rgb(195, 18, 18)

Error

Var

$danger

Hex

#da1414

Rgb

rgb(218, 20, 20)

Error L1

Var

$danger-l1

Hex

#f48989

Rgb

rgb(244, 137, 137)

Error L2

Var

$danger-l2

Hex

#feefef

Rgb

rgb(254, 239, 239)

Light

Light D2

Var

$light-d2

Hex

#d3d6e0

Rgb

rgb(211, 214, 224)

Light D1

Var

$light-d1

Hex

#e2e4ea

Rgb

rgb(226, 228, 234)

Light

Var

$light

Hex

#f1f2f5

Rgb

rgb(241, 242, 245)

Light L1

Var

$light-l1

Hex

#f7f8f9

Rgb

rgb(247, 248, 249)

White

Var

$light-l2

Hex

#fff

Rgb

rgb(255, 255, 255)

Dark

N/A

Var

$dark-d2

Hex

#111116

Rgb

rgb(17, 17, 22)

N/A

Var

$dark-d1

Hex

#1c1c24

Rgb

rgb(28, 28, 36)

Dark

Var

$dark

Hex

#272833

Rgb

rgb(39, 40, 51)

Dark L1

Var

$dark-l1

Hex

#393a4a

Rgb

rgb(57, 58, 74)

Dark L2

Var

$dark-l2

Hex

#393a4a

Rgb

rgb(57, 58, 74)

Edit this page on GitHub

Contributors

Patrick Yeo, Matuzalém Teles, marcoscv-work

Last edited May 9, 2025 at 6:15:38 AM

Table of Contents

Grays
Colors
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark