ธีม shadcn/ui

สร้างคอนฟิกธีมสำหรับ shadcn/ui ใช้ ธีม shadcn/ui ออนไลน์ฟรี ไม่ต้องสมัคร พร้อมผลลัพธ์รวดเร็วและการประมวลผลที่ปลอดภัยในเบราว์เซอร์

Base

Background

Foreground

Primary

Primary Foreground

Secondary

Secondary Foreground

Muted & Accent

Muted

Muted Foreground

Accent

Accent Foreground

Destructive

Destructive Foreground

Borders & Input

Border

Input

Ring

ตัวอย่าง

ตัวอย่างคอมโพเนนต์

Card content

Muted text example

CSS (index.css)

@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

Step 1

เปิด ธีม shadcn/ui

Step 2

ป้อนหรือนำเข้าสีของคุณ

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

คู่มือและบทช่วยสอน

เรียนรู้วิธีการใช้งานเครื่องมือของเราด้วยคู่มือแบบละเอียด

shadcn-theme: คู่มือใช้งาน developer

คู่มือภาษาไทยสำหรับใช้ shadcn-theme เข้าใจแนวทาง developer และหลีกเลี่ยงข้อผิดพลาดทั่วไป

shadcn-theme: คู่มือใช้งาน developer

Frequently asked questions

ใช่ เครื่องมือนี้ใช้งานออนไลน์ได้ฟรี

เมื่อเป็นไปได้ การประมวลผลจะเกิดขึ้นในเบราว์เซอร์เพื่อปกป้องข้อมูลของคุณ

โฆษณา

เราใช้คุกกี้

ธีม shadcn/ui

Base

Primary

Secondary

Muted & Accent

Destructive

Borders & Input

ตัวอย่าง

Supported formats

How it works

Step 1

Step 2

Step 3

ข้อผิดพลาดที่พบบ่อยที่ควรหลีกเลี่ยง

เคล็ดลับจากมือโปร

Privacy guaranteed: everything is processed locally in your browser.

ธีม shadcn/ui สำหรับโปรเจกต์สีของคุณ

ธีม shadcn/ui โดยไม่สูญเสียความแม่นยำ

ธีม shadcn/ui ฟรีออนไลน์

ธีม shadcn/ui รวดเร็วและปลอดภัย

ธีม shadcn/ui สำหรับการแชร์และทำงานร่วมกัน

ค้นพบเครื่องมือสีทั้งหมด

Related tools

คู่มือและบทช่วยสอน

shadcn-theme: คู่มือใช้งาน developer

shadcn-theme: คู่มือใช้งาน developer

shadcn-theme: คู่มือใช้งาน developer

Frequently asked questions

ธีม shadcn/ui ฟรีหรือไม่?

ข้อมูลของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?