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
#0054a6azure
#4299e1indigo
#4263ebpurple
#ae3ec9pink
#d6336cred
#d63939orange
#f76707yellow
#f59f00lime
#74b816green
#2fb344teal
#0ca678cyan
#17a2b8Light 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
#e9f0f9azure-lt
#ecf5fcindigo-lt
#eceffdpurple-lt
#f7ecfapink-lt
#fbebf0red-lt
#fbebeborange-lt
#fef0e6yellow-lt
#fef5e6lime-lt
#f1f8e8green-lt
#eaf7ecteal-lt
#e7f6f2cyan-lt
#e8f6f8Gray palette
gray-50
#f8fafcgray-100
#f1f5f9gray-200
#e2e8f0gray-300
#c8d3e1gray-400
#9ba9begray-500
#6c7a91gray-600
#49566cgray-700
#313c52gray-800
#1d273bgray-900
#0f172aSocial colors
facebook
#1877F2twitter
#1da1f2linkedin
#0a66c2google
#dc4e41youtube
#ff0000vimeo
#1ab7eadribbble
#ea4c89github
#181717instagram
#e4405fpinterest
#bd081cvk
#6383a8rss
#ffa500flickr
#0063dcbitbucket
#0052cctabler
#0054a6Do 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
