Colors

Our color system is designed to establish a flexible range of colors that support our brand, comms, and product teams. Lualtek products rely on a full-ranged color palette which includes twelve shades for each color.

Lualtek UI provides a full-featured color collection as tokens. Each color is carefully defined to match the contrast criteria.

Support

The support palette is meant to include all the secondary colors which are commonly used across the design but without being part of a color scale.

Brand

This minimal palette includes three shades of the brand color, which is used as accent color across the design system.

Primary

The primary palette includes the main and the most used color across the brand and digital products. This palette is often combined with the brand color palette which is used as accent color.

Literal colors

These color tokens can be used for multiple purposes and they don't have a specific meaning.

• Purple

  HEX

  • 0
    #f9f6fd
  • 5
    #f4ebff
  • 10
    #eee1fd
  • 20
    #e9d5ff
  • 30
    #d8b4ff
  • 40
    #c183fe
  • 50
    #a856f6
  • 60
    #9335e9
  • 70
    #7e1fcf
  • 80
    #6b20a9
  • 90
    #591a89
  • 100
    #48186e
• Blue

  HEX

  • 0
    #f1f6fc
  • 5
    #e6f1fd
  • 10
    #dceafd
  • 20
    #bedbff
  • 30
    #91c5ff
  • 40
    #62a5f8
  • 50
    #407cdd
  • 60
    #2d60ce
  • 70
    #254dbb
  • 80
    #193695
  • 90
    #152c70
  • 100
    #091d59
• Cyan

  HEX

  • 0
    #ecfeff
  • 5
    #defbfd
  • 10
    #d3f9fd
  • 20
    #a2f4fd
  • 30
    #60e9fb
  • 40
    #30d2ed
  • 50
    #00b6d4
  • 60
    #0d91b2
  • 70
    #18748f
  • 80
    #0f5e76
  • 90
    #104e64
  • 100
    #0c3e51
• Green

  HEX

  • 0
    #ecfdf5
  • 5
    #e2faee
  • 10
    #d1fae5
  • 20
    #a7f3d0
  • 30
    #6ee7b7
  • 40
    #3bd29a
  • 50
    #0ab981
  • 60
    #009669
  • 70
    #147758
  • 80
    #005f46
  • 90
    #0d4e3b
  • 100
    #083e2f
• Yellow

  HEX

  • 0
    #fffbec
  • 5
    #fef6d8
  • 10
    #fef0bb
  • 20
    #fee685
  • 30
    #fbd352
  • 40
    #fabf2f
  • 50
    #f39f1d
  • 60
    #e39000
  • 70
    #d07d00
  • 80
    #b26000
  • 90
    #8a4c09
  • 100
    #713c00
• Red

  HEX

  • 0
    #fcf3f3
  • 5
    #ffe7e7
  • 10
    #fcd9d9
  • 20
    #ffc3c3
  • 30
    #faa6a6
  • 40
    #fa6f70
  • 50
    #f04343
  • 60
    #de2023
  • 70
    #b91d1c
  • 80
    #991c1c
  • 90
    #7e1f1e
  • 100
    #611314
• Indigo

  HEX

  • 0
    #f0f1ff
  • 5
    #e7e9ff
  • 10
    #dadbff
  • 20
    #bfc1fa
  • 30
    #9595ef
  • 40
    #6c67e1
  • 50
    #4a44ca
  • 60
    #3c31bf
  • 70
    #281f9d
  • 80
    #1d1683
  • 90
    #160a6a
  • 100
    #0e084f
• Salmon

  HEX

  • 0
    #fcf4f1
  • 5
    #f8e7e2
  • 10
    #f3dad2
  • 20
    #eec6b8
  • 30
    #eea891
  • 40
    #e68365
  • 50
    #d45c38
  • 60
    #c04a23
  • 70
    #a03d1b
  • 80
    #7f2c13
  • 90
    #612715
  • 100
    #4b1a0a
• Dipsy

  HEX

  • 0
    #fafff0
  • 5
    #f6fdde
  • 10
    #f1f9bb
  • 20
    #ecf3a4
  • 30
    #d3e881
  • 40
    #b4d959
  • 50
    #91c43d
  • 60
    #6ea922
  • 70
    #4a8805
  • 80
    #316300
  • 90
    #244d00
  • 100
    #193302
• Magenta

  HEX

  • 0
    #fdf6fb
  • 5
    #fce7f5
  • 10
    #fbd0eb
  • 20
    #fab3e0
  • 30
    #f07fc4
  • 40
    #d83b97
  • 50
    #c01777
  • 60
    #ad0060
  • 70
    #8d014d
  • 80
    #6a0039
  • 90
    #57012e
  • 100
    #420123