dark:
var(--e-accent-500)#E17B3C
light:
var(--e-accent-500)#E17B3C
e-connect colors v1.0
Various css color properties are depicted below. These can be use within a global css scope.
Usage
in order to use a css color property, use it as shown.
div {
background-color: var(--e-accent)
}
color : selected color
colors displayed: 141accent
accent-100
base:
#F9E5D8
accent-200
base:
#F3CAB1
accent-300
base:
#EDB08A
accent-400
base:
#E79563
accent-50
base:
#F8F0EB
accent-500
base:
#E17B3C
accent-600
base:
#B66535
accent-700
base:
#8B4F2E
accent-800
base:
#603928
accent-900
base:
#352321
accent-blockquote-background
dark:
var(--e-accent-900)#352321
light:
var(--e-accent-100)#F9E5D8
accent-blockquote-border
dark:
var(--e-accent)#E17B3C
light:
var(--e-accent)#E17B3C
accent-blockquote-foreground
dark:
var(--e-accent-100)#F9E5D8
light:
var(--e-accent)#E17B3C
background
dark:
var(--e-gray-900)#151927
light:
var(--e-gray-25)#F8F8F8
background-hover
dark:
var(--e-gray-600)#373B4F
light:
var(--e-gray-25)#F8F8F8
blue
dark:
var(--e-blue-300)#93C5FD
light:
var(--e-blue-500)#0EA5E9
blue-100
base:
#DBEAFE
blue-200
base:
#BFDBFE
blue-300
base:
#93C5FD
blue-400
base:
#60A5FA
blue-50
base:
#EFF6FF
blue-500
base:
#0EA5E9
blue-600
base:
#0284C7
blue-700
base:
#0369A1
blue-800
base:
#075985
blue-900
base:
#0C4A6E
blue-blockquote-background
dark:
var(--e-blue-900)#0C4A6E
light:
var(--e-blue-200)#BFDBFE
blue-blockquote-border
dark:
var(--e-blue)#93C5FD
light:
var(--e-blue)#0EA5E9
blue-blockquote-foreground
dark:
var(--e-blue-100)#DBEAFE
light:
var(--e-blue)#0EA5E9
box-shadow-color
base:
rgba(0, 0, 0, 0.15)color: rgba(0, 0, 0, 0.15), not in sets.
copyright-color
dark:
var(--e-accent)#E17B3C
light:
var(--e-primary)#662D91
dark
dark:
_dark_mypyr_91color: _dark_mypyr_91, not in sets.
disabled
dark:
var(--e-gray-500)#42475C
light:
var(--e-gray-100)#D9DADE
dropshadow-color
dark:
var(--e-gray-900)#151927
light:
var(--e-gray-50)#E5E7E8
foreground
dark:
var(--e-gray-25)#F8F8F8
light:
var(--e-gray-900)#151927
gray
dark:
var(--e-gray-200)#B3B5BE
light:
var(--e-gray-500)#42475C
gray-0
base:
#FFFFFF
gray-10
base:
#FBFCFD
gray-100
base:
#D9DADE
gray-1000
base:
blackcolor: black, not in sets.
gray-200
base:
#B3B5BE
gray-25
base:
#F8F8F8
gray-300
base:
#8E919D
gray-400
base:
#686C7D
gray-50
base:
#E5E7E8
gray-500
base:
#42475C
gray-600
base:
#373B4F
gray-700
base:
#2C3042
gray-800
base:
#202434
gray-850
base:
#1B1F2E
gray-900
base:
#151927
gray-blockquote-background
dark:
var(--e-gray-900)#151927
light:
var(--e-gray-25)#F8F8F8
gray-blockquote-border
dark:
var(--e-gray)#B3B5BE
light:
var(--e-gray)#42475C
gray-blockquote-foreground
dark:
var(--e-gray-25)#F8F8F8
light:
var(--e-gray)#42475C
green
dark:
var(--e-green-300)#86efac
light:
var(--e-green-500)#22c55e
green-100
base:
#dcfce7
green-200
base:
#bbf7d0
green-300
base:
#86efac
green-400
base:
#4ade80
green-50
base:
#f0fdf4
green-500
base:
#22c55e
green-600
base:
#16a34a
green-700
base:
#15803d
green-800
base:
#166534
green-900
base:
#14532d
green-blockquote-background
dark:
var(--e-green-900)#14532d
light:
var(--e-green-100)#dcfce7
green-blockquote-border
dark:
var(--e-green)#86efac
light:
var(--e-green)#22c55e
green-blockquote-foreground
dark:
var(--e-green-100)#dcfce7
light:
var(--e-green)#22c55e
h1-color
dark:
var(--e-primary-300)#A381BD
light:
var(--e-primary-500)#662D91
h2-color
dark:
var(--e-secondary-300)#98A3CB
light:
var(--e-secondary-500)#5465A8
h3-color
dark:
var(--e-accent-500)#E17B3C
light:
var(--e-accent-500)#E17B3C
h4-color
dark:
var(--e-foreground)#F8F8F8
light:
var(--e-foreground)#151927
h5-color
dark:
var(--e-foreground)#F8F8F8
light:
var(--e-foreground)#151927
input-background
dark:
var(--e-white)#202434
light:
var(--e-white)#FFFFFF
input-focus-background
dark:
var(--e-primary-900)#1C1332
light:
var(--e-primary-100)#E0D5E9
navigation-button-background-highlight-active
dark:
var(--e-accent-900)#352321
light:
var(--e-accent-50)#F8F0EB
navigation-button-font-color
dark:
var(--e-foreground)#F8F8F8
light:
var(--e-foreground)#151927
navigation-button-font-hover-color
dark:
var(--e-primary)#A381BD
light:
var(--e-primary-500)#662D91
navigation-button-font-hover-color-inverse
dark:
var(--e-gray-900)#151927
light:
var(--e-gray-25)#F8F8F8
navigation-button-hover-color
dark:
var(--e-gray-500)#42475C
light:
var(--e-primary-100)#E0D5E9
primary
dark:
var(--e-primary-300)#A381BD
light:
var(--e-primary-500)#662D91
primary-100
base:
#E0D5E9
primary-200
base:
#C2ABD3
primary-300
base:
#A381BD
primary-400
base:
#8557A7
primary-500
base:
#662D91
primary-600
base:
#542779
primary-700
base:
#412061
primary-800
base:
#2F1A4A
primary-900
base:
#1C1332
primary-blockquote-background
dark:
var(--e-primary-900)#1C1332
light:
var(--e-primary-100)#E0D5E9
primary-blockquote-border
dark:
var(--e-primary)#A381BD
light:
var(--e-primary)#662D91
primary-blockquote-foreground
dark:
var(--e-primary-100)#E0D5E9
light:
var(--e-primary)#662D91
primary-cards-background
light:
var(--e-primary-100)#E0D5E9
primary-cards-foreground
light:
var(--e-primary)#662D91
primary-hover
dark:
var(--e-primary-400)#8557A7
light:
var(--e-primary-400)#8557A7
red
dark:
var(--e-red-300)#C898A3
light:
var(--e-red-500)#A35466
red-100
base:
#EDDDE0
red-200
base:
#DABBC2
red-300
base:
#C898A3
red-400
base:
#B57685
red-500
base:
#A35466
red-600
base:
#844657
red-700
base:
#663848
red-800
base:
#472938
red-900
base:
#291B29
red-blockquote-background
dark:
var(--e-red-900)#291B29
light:
var(--e-red-100)#EDDDE0
red-blockquote-border
dark:
var(--e-red)#C898A3
light:
var(--e-red)#A35466
red-blockquote-foreground
dark:
var(--e-red-100)#EDDDE0
light:
var(--e-red)#A35466
required
dark:
var(--e-accent-500)#E17B3C
light:
var(--e-red-500)#A35466
secondary
dark:
var(--e-secondary-300)#98A3CB
light:
var(--e-secondary-500)#5465A8
secondary-100
base:
#DDE0EE
secondary-200
base:
#BBC1DC
secondary-300
base:
#98A3CB
secondary-400
base:
#7684B9
secondary-500
base:
#5465A8
secondary-600
base:
#45538C
secondary-700
base:
#36426F
secondary-800
base:
#283053
secondary-900
base:
#191F36
secondary-blockquote-background
dark:
var(--e-secondary-900)#191F36
light:
var(--e-secondary-100)#DDE0EE
secondary-blockquote-border
dark:
var(--e-secondary)#98A3CB
light:
var(--e-secondary)#5465A8
secondary-blockquote-foreground
dark:
var(--e-secondary-100)#DDE0EE
light:
var(--e-secondary)#5465A8
secondary-cards-background
light:
var(--e-secondary-100)#DDE0EE
secondary-cards-foreground
light:
var(--e-secondary)#5465A8
secondary-hover
dark:
var(--e-secondary-200)#BBC1DC
light:
var(--e-secondary-200)#BBC1DC
violet
dark:
var(--e-violet-300)#9E92C4
light:
var(--e-violet-500)#5D499C
violet-100
base:
#DFDBEB
violet-200
base:
#BEB6D7
violet-300
base:
#9E92C4
violet-400
base:
#7D6DB0
violet-500
base:
#5D499C
violet-600
base:
#4C3D82
violet-700
base:
#3C3168
violet-800
base:
#2B254E
violet-900
base:
#1B1934
violet-blockquote-background
dark:
var(--e-violet-900)#1B1934
light:
var(--e-violet-100)#DFDBEB
violet-blockquote-border
dark:
var(--e-violet)#9E92C4
light:
var(--e-violet)#5D499C
violet-blockquote-foreground
dark:
var(--e-violet-100)#DFDBEB
light:
var(--e-violet)#5D499C
white
dark:
var(--e-gray-800)#202434
light:
var(--e-gray-0)#FFFFFF