色彩系統
專案使用的主要顏色方案
Navy
Navy-0
變數: --navy-0
HSLA: hsla(218, 18%, 91%, 1)
HEX: #e5e8ed
Navy-100
變數: --navy-100
HSLA: hsla(213, 22%, 84%, 1)
HEX: #d0d6de
Navy-100D
變數: --navy-100D
HSLA: hsla(213, 24%, 78%, 1)
HEX: #bec6d3
Navy-200
變數: --navy-200
HSLA: hsla(214, 15%, 59%, 1)
HEX: #8994a5
Navy-200D
變數: --navy-200D
HSLA: hsla(213, 19%, 66%, 1)
HEX: #98a4b7
Navy-300
變數: --navy-300
HSLA: hsla(222, 15%, 44%, 1)
HEX: #5f6980
Navy-400
變數: --navy-400
HSLA: hsla(220, 14%, 35%, 1)
HEX: #4c5466
Navy-400D
變數: --navy-400D
HSLA: hsla(223, 20%, 20%, 1)
HEX: #272d3d
Navy-500
變數: --navy-500
HSLA: hsla(217, 89%, 14%, 1)
HEX: #041c43
Navy-500D
變數: --navy-500D
HSLA: hsla(210, 35%, 13%, 1)
HEX: #15202b
Navy-600D
變數: --navy-600D
HSLA: hsla(230, 68%, 5%, 1)
HEX: #030616
Grey
Grey-0
變數: --grey-0
HSLA: hsla(0, 0%, 100%, 1)
HEX: #ffffff
Grey-100
變數: --grey-100
HSLA: hsla(0, 0%, 96%, 1)
HEX: #f6f6f6
Grey-200
變數: --grey-200
HSLA: hsla(0, 0%, 89%, 1)
HEX: #e2e2e2
Grey-400
變數: --grey-400
HSLA: hsla(0, 0%, 65%, 1)
HEX: #a6a6a6
Grey-500
變數: --grey-500
HSLA: hsla(0, 0%, 50%, 1)
HEX: #808080
Grey-600
變數: --grey-600
HSLA: hsla(240, 1%, 39%, 1)
HEX: #626364
Grey-600D
變數: --grey-600D
HSLA: hsla(215, 18%, 23%, 1)
HEX: #313845
Grey-700
變數: --grey-700
HSLA: hsla(0, 0%, 26%, 1)
HEX: #434343
Grey-700D
變數: --grey-700D
HSLA: hsla(200, 3%, 23%, 1)
HEX: #393b3c
Red
Red-0
變數: --red-0
HSLA: hsla(20, 73%, 95%, 1)
HEX: #fbede7
Red-100
變數: --red-100
HSLA: hsla(20, 70%, 87%, 1)
HEX: #f6d4c5
Red-200
變數: --red-200
HSLA: hsla(15, 88%, 78%, 1)
HEX: #faae97
Red-300
變數: --red-300
HSLA: hsla(11, 72%, 63%, 1)
HEX: #e57c5c
Red-300D
變數: --red-300D
HSLA: hsla(7, 100%, 69%, 1)
HEX: #ff7461
Red-400
變數: --red-400
HSLA: hsla(11, 73%, 52%, 1)
HEX: #dd4f2c
Red-500
變數: --red-500
HSLA: hsla(10, 100%, 42%, 1)
HEX: #d42300
Red-500D
變數: --red-500D
HSLA: hsla(0, 86%, 54%, 1)
HEX: #ee2626
Red-600
變數: --red-600
HSLA: hsla(8, 100%, 35%, 1)
HEX: #b01700
Red-600D
變數: --red-600D
HSLA: hsla(0, 100%, 37%, 1)
HEX: #bd0000
Red-700
變數: --red-700
HSLA: hsla(6, 100%, 28%, 1)
HEX: #8d0e00
Sky Blue
Sky-Blue-0
變數: --sky-blue-0
HSLA: hsla(221, 100%, 97%, 1)
HEX: #f2f6ff
Sky-Blue-100
變數: --sky-blue-100
HSLA: hsla(207, 76%, 94%, 1)
HEX: #e5f1fc
Sky-Blue-200
變數: --sky-blue-200
HSLA: hsla(206, 93%, 89%, 1)
HEX: #cae4fd
Sky-Blue-300
變數: --sky-blue-300
HSLA: hsla(209, 90%, 78%, 1)
HEX: #96c8fa
Sky-Blue-400
變數: --sky-blue-400
HSLA: hsla(214, 100%, 65%, 1)
HEX: #4e97ff
Sky-Blue-500
變數: --sky-blue-500
HSLA: hsla(217, 67%, 54%, 1)
HEX: #3773dc
Sky-Blue-600
變數: --sky-blue-600
HSLA: hsla(214, 100%, 34%, 1)
HEX: #0044ad
Blue
Blue-0
變數: --blue-0
HSLA: hsla(215, 100%, 94%, 1)
HEX: #dceaff
Blue-100
變數: --blue-100
HSLA: hsla(214, 42%, 81%, 1)
HEX: #b8cce4
Blue-200D
變數: --blue-200D
HSLA: hsla(217, 77%, 69%, 1)
HEX: #729fef
Blue-300D
變數: --blue-300D
HSLA: hsla(215, 100%, 55%, 1)
HEX: #1877ff
Blue-500
變數: --blue-500
HSLA: hsla(218, 95%, 25%, 1)
HEX: #04327a
Blue-600
變數: --blue-600
HSLA: hsla(218, 42%, 21%, 1)
HEX: #1f304d
Orange
Orange-0
變數: --orange-0
HSLA: hsla(32, 87%, 97%, 1)
HEX: #fef8f1
Orange-100
變數: --orange-100
HSLA: hsla(37, 100%, 84%, 1)
HEX: #ffdeae
Orange-300
變數: --orange-300
HSLA: hsla(25, 100%, 77%, 1)
HEX: #ffbb8b
Orange-400
變數: --orange-400
HSLA: hsla(21, 100%, 62%, 1)
HEX: #ff833e
Orange-500
變數: --orange-500
HSLA: hsla(16, 100%, 50%, 1)
HEX: #ff4400
Orange-600
變數: --orange-600
HSLA: hsla(11, 81%, 52%, 1)
HEX: #e74622
Orange-700
變數: --orange-700
HSLA: hsla(20, 69%, 42%, 1)
HEX: #b55221
Green
Green-0
變數: --green-0
HSLA: hsla(116, 47%, 95%, 1)
HEX: #edf9ec
Green-100
變數: --green-100
HSLA: hsla(125, 50%, 88%, 1)
HEX: #d0f0d3
Green-200
變數: --green-200
HSLA: hsla(128, 55%, 76%, 1)
HEX: #a4e1ac
Green-300
變數: --green-300
HSLA: hsla(129, 49%, 65%, 1)
HEX: #7dd189
Green-400
變數: --green-400
HSLA: hsla(130, 48%, 56%, 1)
HEX: #5ac26b
Green-500
變數: --green-500
HSLA: hsla(130, 61%, 41%, 1)
HEX: #29a840
Green-500D
變數: --green-500D
HSLA: hsla(130, 62%, 48%, 1)
HEX: #2ec44b
Green-600
變數: --green-600
HSLA: hsla(130, 51%, 39%, 1)
HEX: #309543
Green-700
變數: --green-700
HSLA: hsla(130, 85%, 25%, 1)
HEX: #09751c
Teal
Teal-0
變數: --teal-0
HSLA: hsla(141, 47%, 97%, 1)
HEX: #f3faf6
Teal-100
變數: --teal-100
HSLA: hsla(147, 50%, 91%, 1)
HEX: #ddf4e8
Teal-200
變數: --teal-200
HSLA: hsla(147, 52%, 82%, 1)
HEX: #bce9d3
Teal-300
變數: --teal-300
HSLA: hsla(151, 46%, 75%, 1)
HEX: #9edec0
Teal-400D
變數: --teal-400D
HSLA: hsla(150, 75%, 66%, 1)
HEX: #6ae6ac
Teal-500
變數: --teal-500
HSLA: hsla(156, 48%, 60%, 1)
HEX: #68c89e
Teal-600
變數: --teal-600
HSLA: hsla(156, 31%, 50%, 1)
HEX: #55a784
Teal-700
變數: --teal-700
HSLA: hsla(156, 39%, 37%, 1)
HEX: #378566
Teal-800
變數: --teal-800
HSLA: hsla(156, 34%, 29%, 1)
HEX: #316450
Teal-900
變數: --teal-900
HSLA: hsla(156, 35%, 19%, 1)
HEX: #204336
Yellow
Yellow-0
變數: --yellow-0
HSLA: hsla(48, 100%, 94%, 1)
HEX: #fff7e1
Yellow-100
變數: --yellow-100
HSLA: hsla(54, 100%, 90%, 1)
HEX: #fffacd
Yellow-200
變數: --yellow-200
HSLA: hsla(52, 100%, 80%, 1)
HEX: #fff29b
Yellow-300
變數: --yellow-300
HSLA: hsla(49, 100%, 71%, 1)
HEX: #ffe669
Yellow-400
變數: --yellow-400
HSLA: hsla(46, 100%, 60%, 1)
HEX: #ffd737
Yellow-500
變數: --yellow-500
HSLA: hsla(45, 100%, 51%, 1)
HEX: #ffc505
Yellow-600
變數: --yellow-600
HSLA: hsla(43, 99%, 42%, 1)
HEX: #d59902
Yellow-700
變數: --yellow-700
HSLA: hsla(40, 100%, 33%, 1)
HEX: #aa7200
Indigo
Indigo-0
變數: --indigo-0
HSLA: hsla(226, 49%, 93%, 1)
HEX: #e5e9f6
Indigo-100
變數: --indigo-100
HSLA: hsla(218, 50%, 86%, 1)
HEX: #ccd9ef
Indigo-200
變數: --indigo-200
HSLA: hsla(223, 48%, 71%, 1)
HEX: #8ca2db
Indigo-300
變數: --indigo-300
HSLA: hsla(224, 50%, 58%, 1)
HEX: #5c7bca
Indigo-400
變數: --indigo-400
HSLA: hsla(228, 59%, 49%, 1)
HEX: #3555c8
Indigo-400D
變數: --indigo-400D
HSLA: hsla(224, 84%, 68%, 1)
HEX: #688ff3
Indigo-500
變數: --indigo-500
HSLA: hsla(233, 68%, 41%, 1)
HEX: #2130b1
Indigo-600
變數: --indigo-600
HSLA: hsla(242, 98%, 21%, 1)
HEX: #020069
Indigo-700D
變數: --indigo-700D
HSLA: hsla(223, 31%, 45%, 1)
HEX: #4f6294
語意化變數
色彩系統中的語意化顏色變數
Container / Card
Card White
語意: --container-card-white
參照: --grey-0
Card Blue
語意: --container-card-blue
參照: --sky-blue-0
Card Yellow
語意: --container-card-yellow
參照: --orange-0
Card Grey
語意: --container-card-grey
參照: --grey-100
Container / General
Active Primary
語意: --container-general-active-primary
參照: --sky-blue-600
Active Secondary
語意: --container-general-active-secondary
參照: --blue-0
Light Active
語意: --container-general-light-active
參照: --grey-0
Light Active Blue
語意: --container-general-light-active-blue
參照: --blue-0
Light Active Red
語意: --container-general-light-active-red
參照: --red-0
Filter Active Blue
語意: --container-general-filter-active-blue
參照: --blue-0
Filter Inactive White
語意: --container-general-filter-inactive-white
參照: --grey-0
Filter Inactive Grey
語意: --container-general-filter-inactive-grey
參照: --grey-100
Option Selected Blue
語意: --container-general-option-selected-blue
參照: --sky-blue-0
Disabled
語意: --container-general-disabled
參照: --grey-200
Divider
語意: --container-general-divider
參照: --grey-200
Active Corporate
語意: --container-general-active-corporate
參照: --blue-500
Container / Semantic
Positive
語意: --container-semantic-positive
參照: --green-500
Descend
語意: --container-semantic-descend
參照: --green-600
Negative
語意: --container-semantic-negative
參照: --red-500
Ascend
語意: --container-semantic-ascend
參照: --red-400
Warning
語意: --container-semantic-warning
參照: --orange-500
Default
語意: --container-semantic-default
參照: --navy-400
Content / General
Primary
語意: --content-general-primary
參照: --navy-500
Secondary
語意: --content-general-secondary
參照: --navy-400
Tertiary
語意: --content-general-tertiary
參照: --navy-200
Active
語意: --content-general-active
參照: --sky-blue-600
Active Button Capsule
語意: --content-general-active-button-capsule
參照: --sky-blue-600
Active Multi Filter
語意: --content-general-active-multi-filter
參照: --sky-blue-600
Active Single Filter
語意: --content-general-active-single-filter
參照: --sky-blue-600
Light Active
語意: --content-general-light-active
參照: --grey-0
Disabled
語意: --content-general-disabled
參照: --grey-400
Content / Semantic
Default
語意: --content-semantic-default
參照: --navy-400
Positive
語意: --content-semantic-positive
參照: --green-500
Descend
語意: --content-semantic-descend
參照: --green-600
Negative
語意: --content-semantic-negative
參照: --red-500
Ascend
語意: --content-semantic-ascend
參照: --red-400
Warning
語意: --content-semantic-warning
參照: --orange-500
Content / Tag
Highlight
語意: --content-tag-highlight
參照: --sky-blue-500
Default
語意: --content-tag-default
參照: --navy-400
Warning
語意: --content-tag-warning
參照: --orange-500
Error
語意: --content-tag-error
參照: --red-500
Success
語意: --content-tag-success
參照: --green-500
Surface / Surface
Blue
語意: --surface-surface-blue
參照: --sky-blue-0
White
語意: --surface-surface-white
參照: --grey-0
Yellow
語意: --surface-surface-yellow
參照: --orange-0
Grey
語意: --surface-surface-grey
參照: --grey-100
Special
Account Grey
語意: --special-account-grey
參照: --navy-400
Cancel Bg Default
語意: --special-cancel-bg-default
參照: --navy-200
Cancel Bg Disable
語意: --special-cancel-bg-disable
參照: --grey-200
Toast
語意: --special-toast
參照: --navy-500
圖表用色彩
顏色系列
Investment
Overview
Blue
--chart-overview-overview-1-st
--chart-blue-1-st
--chart-blue-2-nd
--chart-blue-3-rd
--chart-blue-4-th
--chart-blue-5-th
--chart-blue-6-th
Orange
--chart-overview-overview-2-nd
--chart-oragne-1-st
--chart-oragne-2-nd
--chart-oragne-3-rd
--chart-oragne-4-th
--chart-oragne-5-th
--chart-oragne-6-th
Teal
--chart-overview-overview-3-rd
--chart-teal-1-st
--chart-teal-2-nd
--chart-teal-3-rd
--chart-teal-4-th
--chart-teal-5-th
--chart-teal-6-th
Yellow
--chart-overview-overview-4-th
--chart-yellow-1-st
--chart-yellow-2-nd
--chart-yellow-3-rd
--chart-yellow-4-th
--chart-yellow-5-th
--chart-yellow-6-th
Green
--chart-overview-overview-5-th
--chart-green-1-st
--chart-green-2-nd
--chart-green-3-rd
--chart-green-4-th
--chart-green-5-th
--chart-green-6-th
Red
--chart-overview-overview-6-th
--chart-red-1-st
--chart-red-2-nd
--chart-red-3-rd
--chart-red-4-th
--chart-red-5-th
--chart-red-6-th
Navy
--chart-overview-overview-7-th
--chart-navy-1-st
--chart-navy-2-nd
--chart-navy-3-rd
--chart-navy-4-th
--chart-navy-5-th
--chart-navy-6-th
Indigo
--chart-overview-overview-8-th
--chart-indigo-1-st
--chart-indigo-2-nd
--chart-indigo-3-rd
--chart-indigo-4-th
--chart-indigo-5-th
--chart-indigo-6-th