Skip to main content

Colors

Text Color

Set text color use {colorName} in theme.

Result
Loading...
Live Editor

Background Color

Set background color use bg{colorName} in theme.

Result
Loading...
Live Editor

Border Color

Set border color use border{colorName} in theme.

Result
Loading...
Live Editor

Customize theme color

You can customize theme color with setTheme:

setTheme({
colors: {
brandLight: '#e0f2fe',
brandLighter: '#bae6fd',
brandLightest: '#7dd3fc',
brandPrimary: '#38bdf8',
brandDark: '#0ea5e9',
brandDarker: '#0284c7',
brandDarkest: '#0369a1',
},
})

Then you can use it with text color, background color, border color:

Result
Loading...
Live Editor

Color palettes

Fower preset colors,borrow from tailwindcss color.

brand

50
#e6fcf5
100
#c3fae8
200
#96f2d7
300
#63e6be
400
#38d9a9
500
#20c997
600
#12b886
700
#0ca678
800
#099268
900
#087f5b

gray

50
#fafafa
100
#f4f4f5
200
#e4e4e7
300
#d4d4d8
400
#a1a1aa
500
#71717a
600
#52525b
700
#3f3f46
800
#27272a
900
#18181b

trueGray

50
#fafafa
100
#f5f5f5
200
#e5e5e5
300
#d4d4d4
400
#a3a3a3
500
#737373
600
#525252
700
#404040
800
#262626
900
#171717

pink

50
#fff0f6
100
#ffdeeb
200
#fcc2d7
300
#faa2c1
400
#f783ac
500
#f06595
600
#e64980
700
#d6336c
800
#c2255c
900
#a61e4d

fuchsia

50
#f8f0fc
100
#f3d9fa
200
#eebefa
300
#e599f7
400
#da77f2
500
#cc5de8
600
#be4bdb
700
#ae3ec9
800
#9c36b5
900
#862e9c

purple

50
#faf5ff
100
#f3e8ff
200
#e9d5ff
300
#d8b4fe
400
#c084fc
500
#a855f7
600
#9333ea
700
#7e22ce
800
#6b21a8
900
#581c87

violet

50
#f3f0ff
100
#e5dbff
200
#d0bfff
300
#b197fc
400
#9775fa
500
#845ef7
600
#7950f2
700
#7048e8
800
#6741d9
900
#5f3dc4

indigo

50
#edf2ff
100
#dbe4ff
200
#bac8ff
300
#91a7ff
400
#748ffc
500
#5c7cfa
600
#4c6ef5
700
#4263eb
800
#3b5bdb
900
#364fc7

blue

50
#e7f5ff
100
#d0ebff
200
#a5d8ff
300
#74c0fc
400
#4dabf7
500
#339af0
600
#228be6
700
#1c7ed6
800
#1971c2
900
#1864ab

cyan

50
#e3fafc
100
#c5f6fa
200
#99e9f2
300
#66d9e8
400
#3bc9db
500
#22b8cf
600
#15aabf
700
#1098ad
800
#0c8599
900
#0b7285

teal

50
#e6fcf5
100
#c3fae8
200
#96f2d7
300
#63e6be
400
#38d9a9
500
#20c997
600
#12b886
700
#0ca678
800
#099268
900
#087f5b

green

50
#ebfbee
100
#d3f9d8
200
#b2f2bb
300
#8ce99a
400
#69db7c
500
#51cf66
600
#40c057
700
#37b24d
800
#2f9e44
900
#2b8a3e

lime

50
#f4fce3
100
#e9fac8
200
#d8f5a2
300
#c0eb75
400
#a9e34b
500
#94d82d
600
#82c91e
700
#74b816
800
#66a80f
900
#5c940d

yellow

50
#fff9db
100
#fff3bf
200
#ffec99
300
#ffe066
400
#ffd43b
500
#fcc419
600
#fab005
700
#f59f00
800
#f08c00
900
#e67700

orange

50
#fff4e6
100
#ffe8cc
200
#ffd8a8
300
#ffc078
400
#ffa94d
500
#ff922b
600
#fd7e14
700
#f76707
800
#e8590c
900
#d9480f

red

50
#fff5f5
100
#ffe3e3
200
#ffc9c9
300
#ffa8a8
400
#ff8787
500
#ff6b6b
600
#fa5252
700
#f03e3e
800
#e03131
900
#c92a2a