Colors

The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out.

Base colors

Choose one of the available colors from the basic color palette and make your design attractive for users. You can use the colors to customize the design of components, indicate different states or suggest actions you want users to take.

blue
#0054a6
azure
#4299e1
indigo
#4263eb
purple
#ae3ec9
pink
#d6336c
red
#d63939
orange
#f76707
yellow
#f59f00
lime
#74b816
green
#2fb344
teal
#0ca678
cyan
#17a2b8

Light colors

All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-cathing designs.

blue-lt
#e9f0f9
azure-lt
#ecf5fc
indigo-lt
#eceffd
purple-lt
#f7ecfa
pink-lt
#fbebf0
red-lt
#fbebeb
orange-lt
#fef0e6
yellow-lt
#fef5e6
lime-lt
#f1f8e8
green-lt
#eaf7ec
teal-lt
#e7f6f2
cyan-lt
#e8f6f8

Gray palette

gray-50
#f8fafc
gray-100
#f1f5f9
gray-200
#e2e8f0
gray-300
#c8d3e1
gray-400
#9ba9be
gray-500
#6c7a91
gray-600
#49566c
gray-700
#313c52
gray-800
#1d273b
gray-900
#0f172a

Social colors

facebook
#1877F2
twitter
#1da1f2
linkedin
#0a66c2
google
#dc4e41
youtube
#ff0000
vimeo
#1ab7ea
dribbble
#ea4c89
github
#181717
instagram
#e4405f
pinterest
#bd081c
vk
#6383a8
rss
#ffa500
flickr
#0063dc
bitbucket
#0052cc
tabler
#0054a6
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like Tabler? tweet about it!
Support Tabler's development: Github Sponsors
illustrations banner imageillustrations banner image dark
60 sleek illustrations for your startup's visual identity.