Colors
Type definition
type TColor =
| 'Color.Alpha1'
| 'Color.Alpha2'
| 'Color.Alpha3'
| 'Color.Alpha4'
| 'Color.Alpha5'
| 'Color.Alpha6'
| 'Color.Alpha7'
| 'Color.Alpha8'
| 'Color.Alpha9'
| 'Color.Alpha10'
| 'Color.AlphaInverted1'
| 'Color.AlphaInverted2'
| 'Color.AlphaInverted3'
| 'Color.AlphaInverted4'
| 'Color.AlphaInverted5'
| 'Color.AlphaInverted6'
| 'Color.AlphaInverted7'
| 'Color.AlphaInverted8'
| 'Color.AlphaInverted9'
| 'Color.AlphaInverted10'
| 'Color.Blue1'
| 'Color.Blue2'
| 'Color.Blue3'
| 'Color.Blue4'
| 'Color.Blue5'
| 'Color.Blue6'
| 'Color.Blue7'
| 'Color.Blue8'
| 'Color.Blue9'
| 'Color.Blue10'
| 'Color.Cyan1'
| 'Color.Cyan2'
| 'Color.Cyan3'
| 'Color.Cyan4'
| 'Color.Cyan5'
| 'Color.Cyan6'
| 'Color.Cyan7'
| 'Color.Cyan8'
| 'Color.Cyan9'
| 'Color.Cyan10'
| 'Color.Danger'
| 'Color.Danger1'
| 'Color.Danger2'
| 'Color.Danger3'
| 'Color.Danger4'
| 'Color.Danger5'
| 'Color.Danger6'
| 'Color.Danger7'
| 'Color.Danger8'
| 'Color.Danger9'
| 'Color.Danger10'
| 'Color.Green1'
| 'Color.Green2'
| 'Color.Green3'
| 'Color.Green4'
| 'Color.Green5'
| 'Color.Green6'
| 'Color.Green7'
| 'Color.Green8'
| 'Color.Green9'
| 'Color.Green10'
| 'Color.Grey1'
| 'Color.Grey2'
| 'Color.Grey3'
| 'Color.Grey4'
| 'Color.Grey5'
| 'Color.Grey6'
| 'Color.Grey7'
| 'Color.Grey8'
| 'Color.Grey9'
| 'Color.Grey10'
| 'Color.Info'
| 'Color.Info1'
| 'Color.Info2'
| 'Color.Info3'
| 'Color.Info4'
| 'Color.Info5'
| 'Color.Info6'
| 'Color.Info7'
| 'Color.Info8'
| 'Color.Info9'
| 'Color.Info10'
| 'Color.Magenta1'
| 'Color.Magenta2'
| 'Color.Magenta3'
| 'Color.Magenta4'
| 'Color.Magenta5'
| 'Color.Magenta6'
| 'Color.Magenta7'
| 'Color.Magenta8'
| 'Color.Magenta9'
| 'Color.Magenta10'
| 'Color.Orange1'
| 'Color.Orange2'
| 'Color.Orange3'
| 'Color.Orange4'
| 'Color.Orange5'
| 'Color.Orange6'
| 'Color.Orange7'
| 'Color.Orange8'
| 'Color.Orange9'
| 'Color.Orange10'
| 'Color.Primary'
| 'Color.Primary1'
| 'Color.Primary2'
| 'Color.Primary3'
| 'Color.Primary4'
| 'Color.Primary5'
| 'Color.Primary6'
| 'Color.Primary7'
| 'Color.Primary8'
| 'Color.Primary9'
| 'Color.Primary10'
| 'Color.Purple1'
| 'Color.Purple2'
| 'Color.Purple3'
| 'Color.Purple4'
| 'Color.Purple5'
| 'Color.Purple6'
| 'Color.Purple7'
| 'Color.Purple8'
| 'Color.Purple9'
| 'Color.Purple10'
| 'Color.Red1'
| 'Color.Red2'
| 'Color.Red3'
| 'Color.Red4'
| 'Color.Red5'
| 'Color.Red6'
| 'Color.Red7'
| 'Color.Red8'
| 'Color.Red9'
| 'Color.Red10'
| 'Color.Success'
| 'Color.Success1'
| 'Color.Success2'
| 'Color.Success3'
| 'Color.Success4'
| 'Color.Success5'
| 'Color.Success6'
| 'Color.Success7'
| 'Color.Success8'
| 'Color.Success9'
| 'Color.Success10'
| 'Color.Warning'
| 'Color.Warning1'
| 'Color.Warning2'
| 'Color.Warning3'
| 'Color.Warning4'
| 'Color.Warning5'
| 'Color.Warning6'
| 'Color.Warning7'
| 'Color.Warning8'
| 'Color.Warning9'
| 'Color.Warning10'
| 'Color.White'
| 'Color.Yellow1'
| 'Color.Yellow2'
| 'Color.Yellow3'
| 'Color.Yellow4'
| 'Color.Yellow5'
| 'Color.Yellow6'
| 'Color.Yellow7'
| 'Color.Yellow8'
| 'Color.Yellow9'
| 'Color.Yellow10'
Light Theme
Principal colors
Principal color shades
Primary
- Primary1#fff0f5
- Primary2#ffc9df
- Primary3#ffa1ca
- Primary4#fa75b3
- Primary5#ec4899
- Primary6#c73482
- Primary7#a1226a
- Primary8#7a1451
- Primary9#540d3a
- Primary10#2e0520
Info
- Info1#e6fffb
- Info2#b5f5ec
- Info3#87e8de
- Info4#5cdbd3
- Info5#36cfc9
- Info6#13c2c2
- Info7#08979c
- Info8#006d75
- Info9#00474f
- Info10#002329
Warning
- Warning1#fff7e6
- Warning2#ffe7ba
- Warning3#ffd591
- Warning4#ffc069
- Warning5#ffa940
- Warning6#fa8c16
- Warning7#d46b08
- Warning8#ad4e00
- Warning9#873800
- Warning10#612500
Danger
- Danger1#fff1f0
- Danger2#ffccc7
- Danger3#ffa39e
- Danger4#ff7875
- Danger5#ff4d4f
- Danger6#f5222d
- Danger7#cf1322
- Danger8#a8071a
- Danger9#820014
- Danger10#5c0011
Color palette
Grey
- Grey1#EEEEEE
- Grey2#DDDDDD
- Grey3#CCCCCC
- Grey4#BBBBBB
- Grey5#AAAAAA
- Grey6#888888
- Grey7#777777
- Grey8#666666
- Grey9#555555
- Grey10#444444
Blue
- Blue1#e6f7ff
- Blue2#bae7ff
- Blue3#91d5ff
- Blue4#69c0ff
- Blue5#40a9ff
- Blue6#1890ff
- Blue7#096dd9
- Blue8#0050b3
- Blue9#003a8c
- Blue10#002766
Cyan
- Cyan1#e6fffb
- Cyan2#b5f5ec
- Cyan3#87e8de
- Cyan4#5cdbd3
- Cyan5#36cfc9
- Cyan6#13c2c2
- Cyan7#08979c
- Cyan8#006d75
- Cyan9#00474f
- Cyan10#002329
Green
- Green1#f6ffed
- Green2#d9f7be
- Green3#b7eb8f
- Green4#95de64
- Green5#73d13d
- Green6#52c41a
- Green7#389e0d
- Green8#237804
- Green9#135200
- Green10#092b00
Magenta
- Magenta1#fff0f5
- Magenta2#ffc9df
- Magenta3#ffa1ca
- Magenta4#fa75b3
- Magenta5#ec4899
- Magenta6#c73482
- Magenta7#a1226a
- Magenta8#7a1451
- Magenta9#540d3a
- Magenta10#2e0520
Orange
- Orange1#fff7e6
- Orange2#ffe7ba
- Orange3#ffd591
- Orange4#ffc069
- Orange5#ffa940
- Orange6#fa8c16
- Orange7#d46b08
- Orange8#ad4e00
- Orange9#873800
- Orange10#612500
Purple
- Purple1#f9f0ff
- Purple2#efdbff
- Purple3#d3adf7
- Purple4#b37feb
- Purple5#9254de
- Purple6#722ed1
- Purple7#531dab
- Purple8#391085
- Purple9#22075e
- Purple10#120338
Red
- Red1#fff1f0
- Red2#ffccc7
- Red3#ffa39e
- Red4#ff7875
- Red5#ff4d4f
- Red6#f5222d
- Red7#cf1322
- Red8#a8071a
- Red9#820014
- Red10#5c0011
Yellow
- Yellow1#feffe6
- Yellow2#ffffb8
- Yellow3#fffb8f
- Yellow4#fff566
- Yellow5#ffec3d
- Yellow6#fadb14
- Yellow7#d4b106
- Yellow8#ad8b00
- Yellow9#876800
- Yellow10#614700
Alpha colors
Alpha colors are an extension of rgb()
color values with an alpha
value i.e. opacity.
For demonstration purpose, the Alpha color boxes are displayed on different background colors.
Inverted Alpha colors
Inverted Alpha colors are an extension of rgb()
color values with an alpha
value i.e. opacity.
For demonstration purpose, the Inverted Alpha color boxes are displayed on different background colors.
Dark Theme
Dark theme is built by simply reversing the order of the light theme colors.
Means, Dark.Theme.Color.Primary1 = Light.Theme.Color.Primary10
, Dark.Theme.Color.Primary2 = Light.Theme.Color.Primary9
, Dark.Theme.Color.Primary3 = Light.Theme.Color.Primary7
& so on for all the colors.
Similarly, alpha colors become, Dark.Theme.Color.Alpha1 = Light.Theme.Color.AlphaInverted1
, Dark.Theme.Color.AlphaInverted1 = Light.Theme.Color.Alpha1
& so on.
Principal colors
Principal color shades
Primary
- Primary1#2e0520
- Primary2#540d3a
- Primary3#7a1451
- Primary4#a1226a
- Primary5#c73482
- Primary6#ec4899
- Primary7#fa75b3
- Primary8#ffa1ca
- Primary9#ffc9df
- Primary10#fff0f5
Info
- Info1#002329
- Info2#00474f
- Info3#006d75
- Info4#08979c
- Info5#13c2c2
- Info6#36cfc9
- Info7#5cdbd3
- Info8#87e8de
- Info9#b5f5ec
- Info10#e6fffb
Warning
- Warning1#612500
- Warning2#873800
- Warning3#ad4e00
- Warning4#d46b08
- Warning5#fa8c16
- Warning6#ffa940
- Warning7#ffc069
- Warning8#ffd591
- Warning9#ffe7ba
- Warning10#fff7e6
Danger
- Danger1#5c0011
- Danger2#820014
- Danger3#a8071a
- Danger4#cf1322
- Danger5#f5222d
- Danger6#ff4d4f
- Danger7#ff7875
- Danger8#ffa39e
- Danger9#ffccc7
- Danger10#fff1f0
Color palette
Grey
- Grey1#333333
- Grey2#444444
- Grey3#555555
- Grey4#666666
- Grey5#777777
- Grey6#888888
- Grey7#AAAAAA
- Grey8#BBBBBB
- Grey9#CCCCCC
- Grey10#DDDDDD
Blue
- Blue1#002766
- Blue2#003a8c
- Blue3#0050b3
- Blue4#096dd9
- Blue5#1890ff
- Blue6#40a9ff
- Blue7#69c0ff
- Blue8#91d5ff
- Blue9#bae7ff
- Blue10#e6f7ff
Cyan
- Cyan1#002329
- Cyan2#00474f
- Cyan3#006d75
- Cyan4#08979c
- Cyan5#13c2c2
- Cyan6#36cfc9
- Cyan7#5cdbd3
- Cyan8#87e8de
- Cyan9#b5f5ec
- Cyan10#e6fffb
Green
- Green1#092b00
- Green2#135200
- Green3#237804
- Green4#389e0d
- Green5#52c41a
- Green6#73d13d
- Green7#95de64
- Green8#b7eb8f
- Green9#d9f7be
- Green10#f6ffed
Magenta
- Magenta1#2e0520
- Magenta2#540d3a
- Magenta3#7a1451
- Magenta4#a1226a
- Magenta5#c73482
- Magenta6#ec4899
- Magenta7#fa75b3
- Magenta8#ffa1ca
- Magenta9#ffc9df
- Magenta10#fff0f5
Orange
- Orange1#612500
- Orange2#873800
- Orange3#ad4e00
- Orange4#d46b08
- Orange5#fa8c16
- Orange6#ffa940
- Orange7#ffc069
- Orange8#ffd591
- Orange9#ffe7ba
- Orange10#fff7e6
Purple
- Purple1#120338
- Purple2#22075e
- Purple3#391085
- Purple4#531dab
- Purple5#722ed1
- Purple6#9254de
- Purple7#b37feb
- Purple8#d3adf7
- Purple9#efdbff
- Purple10#f9f0ff
Red
- Red1#5c0011
- Red2#820014
- Red3#a8071a
- Red4#cf1322
- Red5#f5222d
- Red6#ff4d4f
- Red7#ff7875
- Red8#ffa39e
- Red9#ffccc7
- Red10#fff1f0
Yellow
- Yellow1#614700
- Yellow2#876800
- Yellow3#ad8b00
- Yellow4#d4b106
- Yellow5#fadb14
- Yellow6#ffec3d
- Yellow7#fff566
- Yellow8#fffb8f
- Yellow9#ffffb8
- Yellow10#feffe6
Alpha colors
Alpha colors are an extension of rgb()
color values with an alpha
value i.e. opacity.
For demonstration purpose, the Alpha color boxes are displayed on different background colors.
Inverted Alpha colors
Inverted Alpha colors are an extension of rgb()
color values with an alpha
value i.e. opacity.
For demonstration purpose, the Inverted Alpha color boxes are displayed on different background colors.