About Panda CSS
Panda CSS is a build-time CSS-in-JS engine whose preset-panda supplies a complete color scale. Tokens are fully typed and can be semantic or raw.
How to use
Define colors under theme.extend.tokens.colors and consume them via the cx/recipe APIs or utility classes. Panda emits static CSS with zero runtime cost.
Official documentation ↗
Rose
#F43F5E
Shades
50 #FFF 100 #FFE 200 #FEC 300 #FDA 400 #FB7 500 #F43 600 #E11 700 #BE1 800 #9F1 900 #881 950 #4C0
Pink
#EC4899
Shades
50 #FDF 100 #FCE 200 #FBC 300 #F9A 400 #F47 500 #EC4 600 #DB2 700 #BE1 800 #9D1 900 #831 950 #500
Fuchsia
#D946EF
Shades
50 #FDF 100 #FAE 200 #F5D 300 #F0A 400 #E87 500 #D94 600 #C02 700 #A21 800 #861 900 #701 950 #4A0
Purple
#A855F7
Shades
50 #FAF 100 #F3E 200 #E9D 300 #D8B 400 #C08 500 #A85 600 #933 700 #7E2 800 #6B2 900 #581 950 #3B0
Violet
#8B5CF6
Shades
50 #F5F 100 #EDE 200 #DDD 300 #C4B 400 #A78 500 #8B5 600 #7C3 700 #6D2 800 #5B2 900 #4C1 950 #2E1
Indigo
#6366F1
Shades
50 #EEF 100 #E0E 200 #C7D 300 #A5B 400 #818 500 #636 600 #4F4 700 #433 800 #373 900 #312 950 #1E1
Blue
#3B82F6
Shades
50 #EFF 100 #DBE 200 #BFD 300 #93C 400 #60A 500 #3B8 600 #256 700 #1D4 800 #1E4 900 #1E3 950 #172
Sky
#0EA5E9
Shades
50 #F0F 100 #E0F 200 #BAE 300 #7DD 400 #38B 500 #0EA 600 #028 700 #036 800 #075 900 #0C4 950 #082
Cyan
#06B6D4
Shades
50 #ECF 100 #CFF 200 #A5F 300 #67E 400 #22D 500 #06B 600 #089 700 #0E7 800 #155 900 #164 950 #083
Teal
#14B8A6
Shades
50 #F0F 100 #CCF 200 #99F 300 #5EE 400 #2DD 500 #14B 600 #0D9 700 #0F7 800 #115 900 #134 950 #042
Emerald
#10B981
Shades
50 #ECF 100 #D1F 200 #A7F 300 #6EE 400 #34D 500 #10B 600 #059 700 #047 800 #065 900 #064 950 #022
Green
#22C55E
Shades
50 #F0F 100 #DCF 200 #BBF 300 #86E 400 #4AD 500 #22C 600 #16A 700 #158 800 #166 900 #145 950 #052
Lime
#84CC16
Shades
50 #F7F 100 #ECF 200 #D9F 300 #BEF 400 #A3E 500 #84C 600 #65A 700 #4D7 800 #3F6 900 #365 950 #1A2
Yellow
#EAB308
Shades
50 #FEF 100 #FEF 200 #FEF 300 #FDE 400 #FAC 500 #EAB 600 #CA8 700 #A16 800 #854 900 #713 950 #422
Amber
#F59E0B
Shades
50 #FFF 100 #FEF 200 #FDE 300 #FCD 400 #FBB 500 #F59 600 #D97 700 #B45 800 #924 900 #783 950 #451
Orange
#F97316
Shades
50 #FFF 100 #FFE 200 #FED 300 #FDB 400 #FB9 500 #F97 600 #EA5 700 #C24 800 #9A3 900 #7C2 950 #431
Red
#EF4444
Shades
50 #FEF 100 #FEE 200 #FEC 300 #FCA 400 #F87 500 #EF4 600 #DC2 700 #B91 800 #991 900 #7F1 950 #450
Neutral
#737373
Shades
50 #FAF 100 #F5F 200 #E5E 300 #D4D 400 #A3A 500 #737 600 #525 700 #404 800 #262 900 #171 950 #0A0
Stone
#78716C
Shades
50 #FAF 100 #F5F 200 #E7E 300 #D6D 400 #A8A 500 #787 600 #575 700 #444 800 #292 900 #1C1 950 #0C0
Zinc
#71717A
Shades
50 #FAF 100 #F4F 200 #E4E 300 #D4D 400 #A1A 500 #717 600 #525 700 #3F3 800 #272 900 #181 950 #090
Gray
#6B7280
Shades
50 #F9F 100 #F3F 200 #E5E 300 #D1D 400 #9CA 500 #6B7 600 #4B5 700 #374 800 #1F2 900 #111 950 #030
Slate
#64748B
Shades
50 #F8F 100 #F1F 200 #E2E 300 #CBD 400 #94A 500 #647 600 #475 700 #334 800 #1E2 900 #0F1 950 #020
No matching colors
Source: Panda CSS · @pandacss/preset-panda
