Aller au contenu principal

    Chúng tôi sử dụng cookie

    Chúng tôi sử dụng cookie để cải thiện trải nghiệm của bạn. Tiếp tục duyệt web đồng nghĩa với việc bạn chấp nhận sử dụng chúng.

    Tìm hiểu thêm trong Cookie và Quyền riêng tư

    Theme shadcn/ui

    Tạo cấu hình theme cho shadcn/ui. Dùng Theme shadcn/ui miễn phí trực tuyến, không cần đăng ký, kết quả nhanh và xử lý an toàn trong trình duyệt.

    Base

    Primary

    Secondary

    Muted & Accent

    Destructive

    Borders & Input

    Xem trước

    Xem trước thành phần

    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;
  }
}

    Theme shadcn/ui giúp bạn làm việc với màu sắc trực tiếp trong trình duyệt.

    Công cụ dành cho nhà thiết kế, lập trình viên và người sáng tạo cần kết quả nhanh, đáng tin cậy.

    Supported formats

    CSS
    Tailwind
    HSL
    shadcn/ui

    How it works

    1

    Step 1

    Mở Theme shadcn/ui

    2

    Step 2

    Nhập hoặc tải màu của bạn

    3

    Step 3

    Sao chép, xuất hoặc dùng lại kết quả

    Các lỗi thường gặp cần tránh

    • Quên kiểm tra độ tương phản có thể làm giảm khả năng đọc.
    • Dùng quá nhiều màu có thể khiến bảng màu khó áp dụng.

    Mẹo chuyên gia

    • Lưu màu chính dưới dạng biến CSS.
    • Kiểm tra bảng màu ở chế độ sáng và tối trước khi xuất bản.

    Privacy guaranteed: everything is processed locally in your browser.

    Khi có thể, quá trình xử lý diễn ra cục bộ trong trình duyệt. Không cần tài khoản.

    Theme shadcn/ui cho dự án màu sắc của bạn

    Tạo cấu hình theme cho shadcn/ui.

    Theme shadcn/ui không mất độ chính xác

    Chuyển đổi hoạt động trên các giá trị chính xác (HEX, RGB, HSL, OKLCH). Không có xấp xỉ trực quan — bạn nhận được màu sắc trung thực với ý định thiết kế.

    Theme shadcn/ui miễn phí trực tuyến

    Không cần đăng ký, không cần tải phần mềm. Theme shadcn/ui hoàn toàn miễn phí và hoạt động trên mọi trình duyệt. Gói miễn phí bao gồm 10 lần sử dụng mỗi ngày.

    Theme shadcn/ui nhanh chóng và an toàn

    Quá trình xử lý diễn ra trực tiếp trong trình duyệt để đạt tốc độ tối đa. Không có dữ liệu nào gửi tới máy chủ — màu sắc của bạn được giữ riêng tư.

    Theme shadcn/ui để chia sẻ và cộng tác

    Xuất kết quả dưới dạng HEX, RGB, HSL, CSS, JSON hoặc sao chép bằng một cú nhấp. Hoàn hảo để chia sẻ hướng dẫn màu sắc với nhóm.

    Khám phá tất cả công cụ màu sắc

    Trích xuất, chuyển đổi, tạo bảng màu, gradient và độ tương phản WCAG chỉ với vài cú nhấp.

    Xem tất cả công cụ

    Related tools

    Bảng màu Tailwind
    Biến CSS
    Xem trước UI
    Độ tương phản màu

    Hướng dẫn và bài viết bổ trợ

    Tìm hiểu cách sử dụng các công cụ của chúng tôi qua các hướng dẫn chi tiết.

    shadcn-theme: hướng dẫn thực hành developer

    Hướng dẫn bản địa hóa để dùng shadcn-theme, hiểu thực hành tốt cho developer và tránh lỗi phổ biến.

    shadcn-theme: hướng dẫn thực hành developer

    Hướng dẫn bản địa hóa để dùng shadcn-theme, hiểu thực hành tốt cho developer và tránh lỗi phổ biến.

    shadcn-theme: hướng dẫn thực hành developer

    Hướng dẫn bản địa hóa để dùng shadcn-theme, hiểu thực hành tốt cho developer và tránh lỗi phổ biến.

    Frequently asked questions

    Có, công cụ này có thể dùng miễn phí trực tuyến.

    Khi có thể, quá trình xử lý diễn ra trong trình duyệt để bảo vệ dữ liệu của bạn.