Use left and right arrow keys to set saturation. Use up and down arrow keys to set brightness.
| Hex | Red | Green | Blue |
Accent color
Scale brightness
Grey tint
Application colors
accent
#2e78ce
foreground
#303030
background
#fdfeff
border
#c8c5be
success
#2e78ce
warning
#ff8c00
error
#d13438
faint
#f1f1f1
lowContrast
#c8c5be
lowMidContrast
#9f9d97
midContrast
#787672
midHighContrast
#53524f
highContrast
#31302e
- Foreground #303030 on Background #fdfeff (contrast ratio: 13.07)
- Accent #2e78ce on Background #fdfeff (contrast ratio: 4.43)
Primary data color
primary
#70a4f6
muted
#c5ccde80
bold
#0058a1
Scales
Nominal
#32bb51
#f87f7f
#37b4b4
#baa332
#f66dec
#39b0d2
#90af32
#f778b7
#35b796
#e29132
Nominal+
#006620
#b30004
#006262
#655700
#9f0096
#005f75
#4b5e00
#a9006d
#00634f
#7e4c00
Nominal-
#a4d9ab
#e0c6c6
#a9d4d4
#d8cca4
#dec4dc
#b3d1de
#c2d2a3
#dfc5d0
#a7d6c6
#e1c7b8
Sequential
Sequential2
Diverging
Diverging2
Greys
Rainbow
Color matching
Thematic's nearest method will attempt to match any valid CSS color with the closest theme-compatible scale color using the hue component.
ROYGBIV examples here.
ROYGBIV examples here.
red
orange
yellow
green
#f87f7f
#e29132
#a1a337
#4eb03a
blue
indigo
violet
#9794f2
#be8df6
#f66dec