shadcn/ui 테마
shadcn/ui용 테마 구성을 생성합니다. shadcn/ui 테마을 가입 없이 무료로 사용하고 브라우저에서 빠르고 안전하게 처리하세요.
Base
Primary
Secondary
Muted & Accent
Destructive
Borders & Input
미리보기
컴포넌트 미리보기
Card content
Muted text example
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 4%;
--card: 0 0% 100%;
--card-foreground: 0 0% 4%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 4%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96%;
--muted-foreground: 0 0% 45%;
--accent: 0 0% 96%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 90%;
--input: 0 0% 90%;
--ring: 0 0% 9%;
--radius: 0.5rem;
}
}shadcn/ui 테마은 브라우저에서 바로 색상을 다룰 수 있게 도와줍니다.
빠르고 신뢰할 수 있는 결과가 필요한 디자이너, 개발자, 크리에이터를 위해 제작되었습니다.
Supported formats
CSS
Tailwind
HSL
shadcn/ui
How it works
1
Step 1
shadcn/ui 테마 열기
2
Step 2
색상을 입력하거나 가져오기
3
Step 3
결과를 복사, 내보내기 또는 재사용하기
피해야 할 일반적인 실수
- 대비를 확인하지 않으면 가독성이 떨어질 수 있습니다.
- 색상을 너무 많이 사용하면 팔레트를 적용하기 어려워질 수 있습니다.
전문가 팁
- 주요 색상은 CSS 변수로 저장하세요.
- 게시 전 라이트 모드와 다크 모드에서 팔레트를 테스트하세요.
Privacy guaranteed: everything is processed locally in your browser.
가능한 경우 처리는 브라우저에서 로컬로 수행됩니다. 계정이 필요 없습니다.
색상 프로젝트를 위한 shadcn/ui 테마
shadcn/ui용 테마 구성을 생성합니다.
정확도 손실 없는 shadcn/ui 테마
변환과 계산은 정확한 값(HEX, RGB, HSL, OKLCH)으로 수행됩니다. 시각적 근사 없이 디자인 의도에 충실한 색상을 얻을 수 있습니다.
무료 온라인 shadcn/ui 테마
가입 없음, 소프트웨어 다운로드 없음. shadcn/ui 테마은(는) 100% 무료이며 모든 브라우저에서 작동합니다. 무료 플랜에는 하루 10회 이용이 포함됩니다.
빠르고 안전한 shadcn/ui 테마
처리는 브라우저에서 직접 이루어져 최대 속도를 보장합니다. 데이터는 서버로 전송되지 않으며 색상과 파일은 기기에 안전하게 유지됩니다.
공유 및 협업을 위한 shadcn/ui 테마
결과를 HEX, RGB, HSL, CSS, JSON으로 내보내거나 한 번의 클릭으로 복사할 수 있습니다. 팀과 컬러 가이드를 공유하거나 디자인 시스템 문서화에 적합합니다.
모든 컬러 도구 보기
클릭 몇 번으로 추출, 변환, 팔레트, 그라디언트, WCAG 대비를 만드세요.
Related tools
가이드 및 튜토리얼
상세 가이드로 도구 사용법을 배우세요.
Frequently asked questions
예, 이 도구는 온라인에서 무료로 사용할 수 있습니다.
가능한 경우 데이터 보호를 위해 브라우저에서 처리됩니다.