Log inSign up

Colors

overlay tint

#ffffff09
#ffffff1a
#ffffff30
#ffffff47
#ffffff5c
#ffffff73
#ffffff8c
#ffffffa3
#ffffffba
#ffffffd0
#ffffffe4
#fffffff0

overlay shadow

#000000f0
#000000e5
#000000cc
#000000b0
#00000099
#00000080
#00000069
#00000052
#0000003d
#00000029
#00000012
#00000009

gray

#000000
#1a1a1a
#353535
#4e4e4e
#686868
#808080
#979797
#adadad
#c2c2c2
#d7d7d7
#ebebeb
#ffffff

slate gray

#0c0c0e
#26262c
#403f49
#595865
#71707f
#878697
#9d9cad
#b1b0c0
#c4c4d0
#d7d6e0
#e8e8ee
#fafafb

blue

#020d23
#05235b
#0b3991
#134fc1
#1e64e9
#2e7aff
#448fff
#5fa4ff
#7fb9ff
#a2cdff
#c7e2ff
#eef6ff

indigo

#09091c
#1d1b55
#312e8a
#4541bb
#5a55e5
#6e6aff
#847fff
#9a95ff
#b0adff
#c7c4ff
#dedcff
#f5f5ff

violet

#180222
#3f075b
#640d8f
#8715bf
#a621e8
#c031ff
#d547ff
#e462ff
#ef81ff
#f6a4ff
#fbc9ff
#feefff

magenta

#150311
#3c0a31
#631051
#8b1771
#b21d91
#d923b1
#eb3cc4
#ef60cf
#f384da
#f6a9e5
#facdf0
#fef2fb

red

#140407
#3f0c17
#691526
#941d35
#be2644
#e92e54
#fd446a
#fe6785
#fe89a1
#feacbc
#ffced8
#fff1f4

red orange

#140602
#3d1407
#66210c
#8f2f10
#b83c15
#e24a1a
#f66030
#f87d56
#f99a7d
#fbb8a3
#fdd5c9
#fef3ef

orange

#170a00
#411f05
#693309
#8e440a
#af5108
#ec5f00
#ff780d
#ff8b2c
#ffa355
#ffbe85
#ffdbb9
#fffaf0

gold

#0f0b00
#2d2204
#4c3806
#6d5005
#936900
#c38800
#eda500
#ffbd0b
#ffce34
#ffde6b
#ffecab
#fffbf0

yellow

#0d0e01
#2a2905
#474309
#625c0b
#7c730c
#93880a
#d7c500
#eada21
#f0e345
#f4ec72
#f8f5a6
#fbfedc

green

#011409
#01311b
#024d2d
#02683c
#018149
#009953
#00be5c
#03d662
#50eb94
#89f2b8
#b9f8d7
#ebfff7

teal

#07100c
#13261c
#1c3c2c
#1d533e
#117156
#039474
#11b495
#2bc3a7
#51d1b9
#7fdecc
#b4ebdf
#ecf8f2

cyan

#031111
#092e2f
#0e4a4c
#126568
#157e81
#169498
#12b8be
#1cdae2
#40e6ed
#6feff4
#a7f7fa
#e5ffff

Color modes

Text color Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
PrimaryPrimarySome muted text as an example
Text color Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
PrimaryPrimarySome muted text as an example
Text color Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
PrimaryPrimarySome muted text as an example
Text color Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
PrimaryPrimarySome muted text as an example
Log inSign up
Color groups

Color modes

Gradients
Font Sizes

Font Families

Line Heights

Letter Spacing

Text Styles
Space
Border Radius

Border Widths

Border Styles
Box Shadows

Text Shadows
Media queries

Min-width based media queries for setting responsive styles. These values are used when generating responsive css styles as well as within theme definitions.

0
Global - All screen sizes

8672 accessible combinations



New theme

Start with a template
Color systems
Themes