Colors
Matisse? No, Lattice*
Color palette
Our full web color palette. All of these swatches are variables and can be used with the following pattern: --color--[shade]-[strength]
Base
--color--transparent
Transparent
#001f1f / 0%
rgb(0 31 31 / 0%)
--color--white
White
#ffffff
rgb(255 255 255)
--color--white
Black
#001F1F
rgb(0 31 31)
--color--forest-800
Forest 800
#003d3d
rgb(0 31 31)
--color--forest-400
Forest 400
#008080
rgb(0 128 128)
Greys
--color--grey-800
Grey 800
#455252
rgb(69 82 82)
--color--grey-600
Grey 600
#6c7a7a
rgb(108 122 122)
--color--grey-400
Grey 400
#889494
rgb(136 148 148)
--color--grey-200
Grey 200
#c4cccc
rgb(196 204 204)
--color--grey-100
Grey 100
#001F1F / 8%
rgb(0 31 31 / 8%)
--color--grey-50
Grey 50
#003d3d / 4%
rgb(0 61 61 / 4%)
Lime
--color--lime-800
Lime 800
#7B8F00
rgb(123 143 0)
--color--lime-400
Lime 400
#B3CC18
rgb(179 204 24)
--color--lime-200
Lime 200
#DBEB7A
rgb(219 235 122)
--color--lime-100
Lime 100
#EFF5CE
rgb(239 245 206)
--color--lime-50
Lime 50
#F8FBE7
rgb(248 251 231)
Green
--color--green-800
Green 800
#366625
rgb(54 102 37)
--color--green-400
Green 400
#6BB85F
rgb(107 184 95)
--color--green-200
Green 200
#A9EBA9
rgb(169 235 169)
--color--green-100
Green 100
#CDFACE
rgb(205 250 206)
--color--green-50
Green 50
#eafce9
rgb(234 252 233)
Teal
--color--teal-800
Teal 800
#046645
rgb(4 102 69)
--color--teal-400
Teal 400
#33B88C
rgb(51 184 140)
--color--teal-200
Teal 200
#8BF0BA
rgb(139 240 186)
--color--teal-100
Teal 100
#C4F5DB
rgb(196 245 219)
--color--teal-50
Teal 50
#eafce9
rgb(230 249 238)
Turquoise
--color--turquoise-800
Turquoise 800
#006666
rgb(0 102 102)
--color--turquoise-400
Turquoise 400
#00a3a3
rgb(0 163 163)
--color--turquoise-200
Turquoise 200
#51e0cd
rgb(81 224 205)
--color--turquoise-100
Turquoise 100
#b1f0e7
rgb(177 240 231)
--color--turquoise-50
Turquoise 50
#def6f3
rgb(222 246 243)
Blue
--color--blue-800
Blue 800
#05537a
rgb(5 83 122)
--color--blue-400
Blue 400
#0794b8
rgb(7 148 184)
--color--blue-200
Blue 200
#67e2eb
rgb(103 226 235)
--color--blue-100
Blue 100
#bff1f5
rgb(191 241 245)
--color--blue-50
Blue 50
#e4f7f9
rgb(228 247 249)
Purple
--color--purple-800
Purple 800
#4533b8
rgb(69 51 184)
--color--purple-400
Purple 400
#7070ff
rgb(112 112 255)
--color--purple-200
Purple 200
#b8b8ff
rgb(184 184 255)
--color--purple-100
Purple 100
#e1e1fa
rgb(225 225 250)
--color--purple-50
Purple 50
#eafce9
rgb(240 240 255)
Violet
--color--violet-800
Violet 800
#652ea3
rgb(101 46 163)
--color--violet-400
Violet 400
#ad67eb
rgb(173 103 235)
--color--violet-200
Violet 200
#d9adff
rgb(217 173 255)
--color--violet-100
Violet 100
#ecdcfa
rgb(236 220 250)
--color--violet-50
Violet 50
#f8f0ff
rgb(248 240 255)
Pink
--color--pink-800
Pink 800
#b8337a
rgb(184 51 122)
--color--pink-400
Pink 400
#e063c7
rgb(224 99 199)
--color--pink-200
Pink 200
#fab8ff
rgb(250 184 255)
--color--pink-100
Pink 100
#fde5ff
rgb(253 229 255)
--color--pink-50
Pink 50
#fcf2fe
rgb(252 242 254)
Red
--color--red-800
Red 800
#b8252f
rgb(184 37 47)
--color--red-400
Red 400
#f55861
rgb(245 88 97)
--color--red-200
Red 200
#ffbdc1
rgb(255 189 193)
--color--red-100
Red 100
#ffe0e2
rgb(255 224 226)
--color--red-50
Red 50
#fceff1
rgb(252 239 241)
Yellow
--color--yellow-800
Yellow 800
#cc8418
rgb(204 132 24)
--color--yellow-400
Yellow 400
#ffc247
rgb(255 194 71)
--color--yellow-200
Yellow 200
#ffdd99
rgb(255 221 153)
--color--yellow-100
Yellow 100
#fff3c2
rgb(255 243 194)
--color--yellow-50
Yellow 50
#fffae6
rgb(255 250 230)
Mix it up!
Gradient palette
Our cute gradients. All of these gradients are variables and can be used with the following pattern: --gradient--[color]-[100-50]. They can also be used on any elements using the same pattern and attributes: gradient=[color]-[100-50]
Gradients (100)
--gradient-lime-100
gradient=lime-100
Gradient Lime 100
--gradient-yellow-100
gradient=yellow-100
Gradient Yellow 100
--gradient-pink-100
gradient=pink-100
Gradient Pink 100
--gradient-purple-100
gradient=purple-100
Gradient Purple 100
--gradient-blue-100
gradient=blue-100
Gradient Blue 100
--gradient-teal-100
gradient=teal-100
Gradient Teal 100
--gradient-green-100
gradient=green-100
Gradient Green 100
Gradients (50)
--gradient-lime-50
gradient=lime-50
Gradient Lime 50
--gradient-yellow-50
gradient=yellow-50
Gradient Yellow 50
--gradient-pink-50
gradient=pink-50
Gradient Pink 50
--gradient-purple-50
gradient=purple-50
Gradient Purple 50
--gradient-blue-50
gradient=blue-50
Gradient Blue 50
--gradient-teal-50
gradient=teal-50
Gradient Teal 50
--gradient-green-50
gradient=green-50