Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

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 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 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-3
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)

How can this be improved? Create an issue!