Colors
The extended color palette, with hex values.
bl
Blue
#066fd1
az
Azure
#4299e1
id
Indigo
#4263eb
pu
Purple
#ae3ec9
pk
Pink
#d6336c
rd
Red
#d63939
or
Orange
#f76707
yl
Yellow
#f59f00
lm
Lime
#74b816
gn
Green
#2fb344
tl
Teal
#0ca678
cy
Cyan
#17a2b8
Light colors
A tinted, low-contrast version of each color.
bl
Blue Light
#066fd1
az
Azure Light
#4299e1
id
Indigo Light
#4263eb
pu
Purple Light
#ae3ec9
pk
Pink Light
#d6336c
rd
Red Light
#d63939
or
Orange Light
#f76707
yl
Yellow Light
#f59f00
lm
Lime Light
#74b816
gn
Green Light
#2fb344
tl
Teal Light
#0ca678
cy
Cyan Light
#17a2b8
Gray colors
The neutral gray scale used for text, borders, and backgrounds.
50
Gray 50
var(--tblr-gray-50)
100
Gray 100
var(--tblr-gray-100)
200
Gray 200
var(--tblr-gray-200)
300
Gray 300
var(--tblr-gray-300)
400
Gray 400
var(--tblr-gray-400)
500
Gray 500
var(--tblr-gray-500)
600
Gray 600
var(--tblr-gray-600)
700
Gray 700
var(--tblr-gray-700)
800
Gray 800
var(--tblr-gray-800)
900
Gray 900
var(--tblr-gray-900)
950
Gray 950
var(--tblr-gray-950)
Social colors
Brand colors for social networks.
Facebook
var(--tblr-facebook)
Twitter
var(--tblr-twitter)
X
var(--tblr-x)
Linkedin
var(--tblr-linkedin)
Google
var(--tblr-google)
Youtube
var(--tblr-youtube)
Vimeo
var(--tblr-vimeo)
Dribbble
var(--tblr-dribbble)
Github
var(--tblr-github)
Instagram
var(--tblr-instagram)
Pinterest
var(--tblr-pinterest)
VK
var(--tblr-vk)
RSS
var(--tblr-rss)
Flickr
var(--tblr-flickr)
Bitbucket
var(--tblr-bitbucket)
Tabler
var(--tblr-tabler)
Gradient
Build a gradient from any two colors and preview it live.
Gradient colors
Every color faded to transparent, fading in from the left or the right.