Color palette generator for design systems
Create palette, export to primitive and semantic tokens
base colors
neutral
50
#F1F1F1
100
#E2E2E2
200
#C6C6C6
300
#ABABAB
400
#919191
500
#777777
600
#5E5E5E
700
#474747
800
#303030
900
#1B1B1B
950
#111111
primary
50
#EFF0FE
100
#E0E0FC
200
#C1C2FA
300
#A2A3F7
400
#8385F5
500
#6366F1
600
#3F44EC
700
#1F27CF
800
#131994
900
#080C5E
950
#040642
secondary
50
#DAFFBF
100
#ADFF4C
200
#94E41A
300
#84CC16
400
#6EAC11
500
#5B8F0C
600
#477107
700
#345404
800
#213902
900
#122201
950
#091400
info
50
#F0F3FE
100
#DEE5FD
200
#BCCBFC
300
#97B2FA
400
#739BF8
500
#3B82F6
600
#2168CD
700
#164B99
800
#0C336B
900
#041C41
950
#02122F
success
50
#D2FFDB
100
#A8FEBB
200
#2CF376
300
#27DD6A
400
#22C55E
500
#1AA34D
600
#12813B
700
#0B5F2A
800
#05401A
900
#02260C
950
#011806
warning
50
#FFEDE9
100
#FEDED7
200
#FEBDAB
300
#FD9976
400
#F97316
500
#CE5E10
600
#A3490A
700
#7D3606
800
#572303
900
#361301
950
#220A00
danger
50
#FCEDED
100
#FADFDF
200
#F6BEBE
300
#F39C9C
400
#F17676
500
#EF4444
600
#C52B2B
700
#961E1E
800
#691212
900
#400707
950
#290303
magic
50
#F4EEFE
100
#EBE1FE
200
#D7BEFC
300
#C69FFB
400
#B77DF9
500
#A855F7
600
#941FE8
700
#6F15B0
800
#4D0B7B
900
#2F044F
950
#1D0234
color roles
background
canvas
background-canvas
surface
background-surface
inverse
background-inverse
neutral
background-neutral
background-neutral-hover
background-neutral-active
background-neutral-selected
primary
background-primary
background-primary-subtle
background-primary-hover
background-primary-active
background-primary-selected
background-primary-disabled
secondary
background-secondary
background-secondary-subtle
background-secondary-hover
background-secondary-active
background-secondary-selected
background-secondary-disabled
info
background-info
background-info-subtle
background-info-hover
background-info-active
background-info-selected
background-info-disabled
success
background-success
background-success-subtle
background-success-hover
background-success-active
background-success-selected
background-success-disabled
warning
background-warning
background-warning-subtle
background-warning-hover
background-warning-active
background-warning-selected
background-warning-disabled
danger
background-danger
background-danger-subtle
background-danger-hover
background-danger-active
background-danger-selected
background-danger-disabled
magic
background-magic
background-magic-subtle
background-magic-hover
background-magic-active
background-magic-selected
background-magic-disabled
border
default
border-default
primary
border-primary
secondary
border-secondary
info
border-info
success
border-success
warning
border-warning
danger
border-danger
magic
border-magic
text
body
text-body
subtle
text-subtle
disabled
text-disabled
inverse
text-on-inverse
primary
text-primary
text-on-primary
text-on-primary-subtle
secondary
text-secondary
text-on-secondary
text-on-secondary-subtle
info
text-info
text-on-info
text-on-info-subtle
success
text-success
text-on-success
text-on-success-subtle
warning
text-warning
text-on-warning
text-on-warning-subtle
danger
text-danger
text-on-danger
text-on-danger-subtle
magic
text-magic
text-on-magic
text-on-magic-subtle
