Colors

19개 시맨틱 색상 토큰

모든 색상은 HSL 형식으로 정의되어 있으며, 라이트/다크 모드에 따라 자동으로 전환됩니다. Tailwind 클래스를 사용하면 테마 전환을 자동으로 지원합니다.

색상 미리보기

background

foreground

card

card-foreground

popover

popover-foreground

primary

primary-foreground

secondary

secondary-foreground

muted

muted-foreground

accent

accent-foreground

destructive

destructive-foreground

border

input

ring

Token	CSS Variable	Tailwind Class	Light (HSL)	Dark (HSL)
background	--background	bg-background	0 0% 100%	240 10% 3.9%
foreground	--foreground	text-foreground	240 10% 3.9%	0 0% 98%
card	--card	bg-card	0 0% 100%	240 10% 3.9%
card-foreground	--card-foreground	text-card-foreground	240 10% 3.9%	0 0% 98%
popover	--popover	bg-popover	0 0% 100%	240 10% 3.9%
popover-foreground	--popover-foreground	text-popover-foreground	240 10% 3.9%	0 0% 98%
primary	--primary	bg-primary	24 95% 53%	24 95% 53%
primary-foreground	--primary-foreground	text-primary-foreground	0 0% 100%	240 10% 3.9%
secondary	--secondary	bg-secondary	240 4.8% 95.9%	240 3.7% 15.9%
secondary-foreground	--secondary-foreground	text-secondary-foreground	240 5.9% 10%	0 0% 98%
muted	--muted	bg-muted	240 4.8% 95.9%	240 3.7% 15.9%
muted-foreground	--muted-foreground	text-muted-foreground	240 3.8% 46.1%	240 5% 64.9%
accent	--accent	bg-accent	240 4.8% 95.9%	240 3.7% 15.9%
accent-foreground	--accent-foreground	text-accent-foreground	240 5.9% 10%	0 0% 98%
destructive	--destructive	bg-destructive	0 84.2% 60.2%	0 62.8% 30.6%
destructive-foreground	--destructive-foreground	text-destructive-foreground	0 0% 100%	0 0% 98%
border	--border	border-border	240 5.9% 90%	240 3.7% 15.9%
input	--input	border-input	240 5.9% 90%	240 3.7% 15.9%
ring	--ring	ring-ring	24 95% 53%	24 95% 53%