Công cụ miễn phí, không cần đăng ký

Trích xuất bảng màu từ mọi website

Dán một URL để lấy màu thương hiệu, màu chữ, màu nền và màu nhấn của trang web kèm mã hex, xếp theo mức độ sử dụng. Miễn phí, không cần đăng ký. Xem ví dụ đầy đủ với DESIGN.md của Stripe và DESIGN.md của Linear, hoặc tìm hiểu DESIGN.md bổ sung thêm những gì.

Thử

Dùng bảng màu này trong code của bạn

Công cụ nhóm các màu theo vai trò (nền, bề mặt, chữ, thương hiệu, màu nhấn và viền) và xếp hạng theo diện tích mỗi màu chiếm trên trang. Để tái sử dụng, hãy đặt tên cho mỗi vai trò thay vì dán mã hex khắp các style, để một thay đổi cập nhật mọi nơi màu đó xuất hiện.

1. Đặt tên màu theo vai trò, không theo sắc độ. --color-text-muted vẫn hợp lý sau khi thiết kế lại; --gray-600 không cho biết nó thuộc về đâu. Thay vào đó các mã hex bạn đã sao chép.

:root {
  --color-brand: #635bff;
  --color-text: #0a2540;
  --color-text-muted: #425466;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f9fc;
  --color-border: #e3e8ee;
}

body { background: var(--color-surface); color: var(--color-text); }
a, .button-primary { color: var(--color-brand); }

2. Dùng chúng trong Tailwind. Mỗi biến trở thành một nhóm utility như bg-surface, text-ink-muted và border-line.

/* app.css, Tailwind CSS v4 */
@theme {
  --color-brand: #635bff;
  --color-ink: #0a2540;
  --color-ink-muted: #425466;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f9fc;
  --color-line: #e3e8ee;
}

3. Kiểm tra các cặp màu bạn dùng. Chữ thường cần tỷ lệ tương phản tối thiểu 4.5:1 so với nền, chữ lớn cần 3:1. Công cụ hiển thị tỷ lệ của màu chữ chính trên nền trang; hãy kiểm tra mọi cặp màu khác bạn định dùng trước khi phát hành.

Màu sắc chỉ là một lớp của hệ thống thiết kế. Một tệp DESIGN.md giữ chúng bên cạnh thang kiểu chữ, khoảng cách và quy tắc component, để agent lập trình AI của bạn dùng đúng màu ở đúng chỗ.

FAQ

Câu hỏi về bảng màu

Giải đáp ngắn gọn về Công cụ trích xuất bảng màu website miễn phí.

Trang được tải trong một trình duyệt thật và các màu hiển thị được đo theo diện tích chúng chiếm trên trang. Mỗi màu được gán một vai trò theo ước đoán tốt nhất: nền, panel, chữ, thương hiệu, màu nhấn hoặc viền.

Bảng màu liệt kê các màu mà trang thực sự dùng, xếp theo diện tích và tối đa mười hai màu. Màu bên trong hình ảnh hoặc video, màu chỉ xuất hiện khi di chuột, và màu dùng ở các trang khác của trang web không được tính.

Không. Công cụ đọc trang ở giao diện mà người truy cập lần đầu thấy theo mặc định, thường là sáng. Trang web mặc định tối sẽ cho kết quả tối. Một tệp DESIGN.md đầy đủ có bao gồm chế độ tối nếu trang web có.

Không xuất được dưới dạng tệp. Bạn có thể sao chép mã hex: chọn một ô màu để sao chép một mã, hoặc sao chép tất cả cùng lúc, mỗi mã một dòng.

Có, mỗi lần một điểm ảnh. Trong Chrome hoặc Edge, nhấp chuột phải vào một phần tử, chọn Inspect và nhấp vào ô vuông màu bên cạnh bất kỳ màu nào trong bảng Styles; bộ chọn màu có công cụ eyedropper đọc được mọi điểm trên trang. Firefox có công cụ eyedropper tương tự trên thanh công cụ Inspector.

Công cụ này chỉ liệt kê màu. Một tệp DESIGN.md bao gồm các màu kèm vai trò, thang kiểu chữ, khoảng cách và quy tắc component của một trang web, trong một tệp mà agent lập trình AI của bạn có thể làm theo.

Thêm công cụ miễn phí

Xem tất cả công cụ miễn phí

  • Trình kiểm tra DESIGN.md

    Dán một tệp DESIGN.md để kiểm tra cấu trúc, token và xem trước ngay trong trình duyệt.

    Mở Trình kiểm tra DESIGN.md

Bạn cần cả hệ thống thiết kế?

Lấy DESIGN.md với màu sắc, thang kiểu chữ, khoảng cách và component của bất kỳ trang web nào, sẵn sàng cho agent lập trình AI của bạn.

Lấy DESIGN.md