Dán hoặc nhập bộ màu và xuất ngay sang CSS variables, SCSS, Tailwind config, JSON hoặc SVG swatches — bước hoàn thiện cho bất kỳ bảng màu nào.

Dán các giá trị HEX (mỗi dòng một cái, hoặc phân cách bằng dấu phẩy/khoảng trắng). rgb() và hsl() cũng được chấp nhận.

Bảng màu

Không tìm thấy màu hợp lệ — kiểm tra lại đầu vào.

Định dạng xuất
Mã xuất

							

Mọi thứ chạy trong trình duyệt — dán bảng màu và sao chép mã sẵn dùng cho production ở bất kỳ định dạng nào. Không đăng ký, hoàn toàn miễn phí.


Giới thiệu về Xuất bảng màu

Trình Xuất Bảng Màu là bước hoàn thiện cho bất kỳ bảng màu nào: dán vào một tập hợp màu và nhận về mã sẵn sàng dùng theo định dạng mà dự án của bạn cần. Nó chấp nhận giá trị HEX mỗi dòng một giá trị hoặc phân tách bằng dấu phẩy và dấu cách, và cũng hiểu ký hiệu rgb() và hsl().

Sáu định dạng đầu ra được tạo trực tiếp: thuộc tính tùy chỉnh CSS, biến SCSS, khối màu cấu hình Tailwind, JSON, mẫu màu SVG và danh sách HEX thuần túy. Một tiền tố biến có thể cấu hình giữ tên được tạo nhất quán với mã nguồn của bạn, và mỗi định dạng đều có thể sao chép vào clipboard hoặc tải xuống dưới dạng tệp.

Mọi thứ chạy trong trình duyệt của bạn, các màu bạn dán vào không bao giờ được gửi đi đâu cả. Nó phối hợp tự nhiên với các công cụ bảng màu khác: trích xuất hoặc tạo một bảng màu ở nơi khác, dán vào đây, và ra về với chính xác đoạn mã mà stylesheet, framework hoặc quy trình thiết kế của bạn cần.

Cách sử dụng Xuất bảng màu

  1. Dán màu của bạn vào ô nhập, HEX, rgb() hoặc hsl(), mỗi dòng một giá trị hoặc phân cách bằng dấu phẩy.
  2. Nhấp "Cập nhật màu" để phân tích chúng thành một bảng màu, hoặc tải mẫu để dùng thử.
  3. Chọn một định dạng xuất: biến CSS, SCSS, cấu hình Tailwind, JSON, mẫu màu SVG hoặc HEX thuần túy.
  4. Điều chỉnh tiền tố biến nếu bạn muốn đặt tên tùy chỉnh.
  5. Sao chép mã được tạo hoặc tải xuống dưới dạng tệp.

Câu hỏi thường gặp

Giá trị HEX (có hoặc không có dấu #), ký hiệu rgb() và hsl() đều được nhận dạng. Bạn có thể trộn lẫn các định dạng và phân tách màu bằng dòng mới, dấu phẩy hoặc dấu cách, bộ phân tích sẽ chọn ra mọi màu hợp lệ và bỏ qua phần còn lại.

Có. Việc phân tích và tạo mã diễn ra hoàn toàn trong trình duyệt của bạn nên công cụ này miễn phí, không cần tài khoản, không tín dụng và không giới hạn số bảng màu hay số lần xuất.

Dán màu của bạn vào, chọn định dạng "Tailwind config", rồi sao chép khối được tạo ra vào phần colors trong cấu hình Tailwind của bạn. Tùy chọn tiền tố biến kiểm soát tên khóa dùng cho mỗi màu.

Không. Các màu ở lại trong tab trình duyệt của bạn, không có yêu cầu máy chủ nào được thực hiện trong khi phân tích hoặc xuất, và không có gì được lưu lại sau khi bạn rời trang.

Nó tạo ra một tệp SVG nhỏ hiển thị mỗi màu trong bảng dưới dạng một mẫu màu có nhãn. Điều này hữu ích để nhúng một tham chiếu bảng màu trực quan vào tài liệu, tệp README hoặc trang bàn giao thiết kế mà không cần chụp ảnh màn hình.


Tìm kiếm phổ biến
xuất bảng màu xuất màu sang css bảng màu sang scss cấu hình màu tailwind xuất bảng màu json mẫu màu svg
Cần trợ giúp?
Gặp sự cố với công cụ này? Hãy cho đội ngũ của chúng tôi biết.
Báo cáo sự cố

Thêm công cụ miễn phí này vào trang web của riêng bạn — sao chép và dán mã bên dưới.