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.

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

Grays
Colors
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark

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)