Bộ chọn màu & Ống hút màu

Chọn mã màu HEX, RGB, HSL, sử dụng ống hút màu EyeDropper và tạo bảng phối màu

Bộ chọn màu & Ống hút màu

Chọn mã màu HEX, RGB, HSL, sử dụng ống hút màu EyeDropper và tạo bảng phối màu

Cách thức hoạt động

1
Enter Query Details
Specify the parameters, location, or query data you want to look up.
2
Fetch or Validate Data
Retrieve or validate information securely within your session.
3
Inspect Detailed Results
Review schedules, reference figures, or comprehensive data tables.
Trung tâm kiến thức

Bộ chọn màu và Ống hút màu Eyedropper: Lấy mã màu màn hình và tạo bảng phối màu

Trong thiết kế đồ họa và lập trình giao diện người dùng (UI), việc tìm kiếm và thu thập chính xác mã màu từ một bức ảnh chụp, một trang web truyền cảm hứng hoặc từ bất kỳ vị trí nào trên màn hình máy tính là công việc diễn ra hàng ngày của các nhà thiết kế.

Công cụ Color Picker của GoToolstack tích hợp giao diện chọn màu trực quan đa kênh và tận dụng EyeDropper API hiện đại của trình duyệt, cho phép bạn nhấp và hút mã màu trực tiếp từ bất kỳ điểm ảnh nào trên màn hình máy tính. Đồng thời, công cụ tự động tính toán các bảng màu phối hợp hài hòa theo nguyên lý bánh xe màu sắc: Bảng màu tương đồng (Analogous), Bổ túc (Complementary), Tam giác cân (Triadic) và Đơn sắc (Monochromatic).

Công thức & Nguyên lý kỹ thuật

Màu gốc (HEX/RGB) → Chuyển đổi bánh xe HSL (Hue, Saturation, Lightness) → Tính góc quay pha màu: Bổ túc (+180°), Tam giác (+120°, +240°)

Giá trị màu được chuyển đổi sang hệ tọa độ cực HSL. Bằng cách cộng hoặc trừ các góc quay cố định trên vòng tròn màu sắc, công cụ tạo ra các biến thể màu sắc có sự tương thích tự nhiên về mặt thị giác.

Thực hành tốt nhất & Hướng dẫn thiết yếu

  • Sử dụng ống hút màu EyeDropper: Nhấp vào biểu tượng ống hút màu và rê chuột tới bất kỳ thành phần nào trên màn hình để lấy ngay mã màu HEX chính xác từng pixel.
  • Áp dụng quy tắc phối màu 60-30-10: Sử dụng màu chính chiếm 60% diện tích trang (thường là màu nền), màu thứ cấp chiếm 30% (thẻ, cấu trúc) và màu bổ túc rực rỡ chiếm 10% (nút kêu gọi hành động CTA).
  • Kiểm tra trên cả nền sáng và nền tối: Đảm bảo các màu sắc bạn chọn giữ được độ tương phản rõ ràng khi người dùng chuyển đổi giữa chế độ Light Mode và Dark Mode.
  • Sao chép nhanh mã màu: Nhấp vào ô mã màu để sao chép nhanh chuỗi HEX hoặc rgba() dán thẳng vào tệp CSS của bạn.

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

Ống hút màu EyeDropper có hoạt động trên mọi trình duyệt không?
Tính năng ống hút màu lấy từ màn hình ngoài trình duyệt được hỗ trợ tốt nhất trên Chrome, Edge, Opera và các trình duyệt nền tảng Chromium. Trên các trình duyệt khác, bạn vẫn có thể chọn màu bằng bảng màu trực quan đầy đủ.
Bảng màu bổ túc (Complementary) là gì?
Đó là cặp màu nằm ở hai vị trí đối diện nhau 180 độ trên bánh xe màu sắc. Sự kết hợp này tạo ra độ tương phản mạnh mẽ nhất, rất lý tưởng để làm nổi bật nút bấm quan trọng.
Mã màu có tự động cập nhật khi tôi di chuyển thanh trượt không?
Có. Tất cả các giá trị HEX, RGB, HSL đều được đồng bộ hai chiều theo thời gian thực ngay khi bạn di chuyển con trỏ.
Công cụ có lưu lại các màu tôi vừa chọn gần đây không?
Có. Bảng lịch sử màu sắc (Color History) ở phía dưới sẽ tự động lưu lại các màu bạn vừa chọn để bạn dễ dàng sử dụng lại khi cần.