CodeKitHubCông Cụ Này Là Gì?
Một bảng chọn màu biến một lựa chọn trực quan — sắc xanh này, đúng điểm ảnh kia trong logo — thành mã số mà phần mềm hiểu được. Cùng một màu có nhiều cách ghi tương đương: HEX (#3b82f6) thống trị CSS và bàn giao thiết kế, RGB (59, 130, 246) khớp với cách màn hình và mã nguồn biểu diễn màu, còn HSL (217°, 91%, 60%) mô tả sắc độ, độ bão hòa và độ sáng theo cách con người dễ suy luận.
Nửa còn lại của công cụ là ống nhỏ giọt lấy màu từ ảnh. Tải lên ảnh chụp màn hình, logo hoặc ảnh chụp và nhấp vào bất kỳ điểm nào để lấy màu tại vị trí con trỏ — cách tiêu chuẩn để trả lời câu hỏi "đây chính xác là màu gì?". Ở những trình duyệt hỗ trợ API EyeDropper, kính lúp phóng đại gốc sẽ được dùng; ở trình duyệt khác, công cụ đọc giá trị điểm ảnh từ một bản sao canvas của ảnh. Trong cả hai trường hợp, xử lý đều diễn ra cục bộ: ảnh không bao giờ được tải lên máy chủ.
Tại Sao Nên Dùng?
- Ba định dạng cùng lúc: mỗi màu được chọn hiển thị dưới dạng HEX, RGB và HSL đồng thời, mỗi định dạng có nút sao chép một cú nhấp — không cần bước chuyển đổi riêng.
- Lấy màu từ ảnh: tải lên bất kỳ ảnh nào và nhấp để lấy đúng màu điểm ảnh — lý tưởng để trích màu thương hiệu từ logo hoặc khớp một màu thấy trong ảnh chụp màn hình.
- Dùng EyeDropper gốc của trình duyệt kèm kính lúp khi khả dụng, và tự động chuyển sang đọc điểm ảnh canvas chính xác ở mọi nơi khác.
- Ô xem trước màu trực tiếp cho thấy màu hiện tại ngay lập tức, để bạn xác nhận trước khi sao chép.
- Miễn phí, tức thì và hoàn toàn cục bộ: màu được tính toán và ảnh được đọc trong trình duyệt của bạn — không gì bị tải lên, lưu trữ hay ghi lại.
Cách Sử Dụng
- Chọn một màu bằng ô chọn màu, hoặc dán/chỉnh sửa giá trị trực tiếp.
- Để lấy màu từ ảnh, tải lên một ảnh và nhấp vào điểm có màu bạn muốn.
- Đọc giá trị HEX, RGB và HSL, hiển thị cùng ô xem trước màu trực tiếp.
- Nhấp nút sao chép bên cạnh định dạng bạn cần — HEX cho CSS, RGB hoặc HSL cho mã nguồn.
Ví dụ
Đầu vào
Nhấp vào vùng màu xanh của một logo đã tải lênĐầu ra
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Cả ba dòng đều mô tả cùng một màu giống hệt nhau. Dùng HEX trong stylesheet và công cụ thiết kế, RGB khi mã nguồn cần giá trị từng kênh, và HSL khi bạn muốn tạo biến thể sáng hơn hoặc tối hơn chỉ bằng cách đổi con số cuối.
Định dạng màu nào cho công việc nào
CSS hiện đại chấp nhận cả ba định dạng ở mọi nơi có thể dùng màu, nên việc chọn là vấn đề quy trình làm việc, không phải tương thích. Các nhóm thường chuẩn hóa HEX trong design token, rồi dùng HSL khi thử các biến thể — chỉnh độ sáng 10–15 điểm để có trạng thái hover dùng được mà không đổi sắc độ.
| Định dạng | Ví dụ | Phù hợp cho |
|---|---|---|
| HEX | #3b82f6 | CSS, công cụ thiết kế, chia sẻ màu trong trò chuyện và tài liệu |
| RGB | rgb(59, 130, 246) | Mã nguồn thao tác kênh màu, vẽ canvas, độ trong suốt rgba() |
| HSL | hsl(217, 91%, 60%) | Tạo biến thể sáng hơn/tối hơn/hover, xây bảng màu |
Từ màu đã chọn đến CSS hoàn chỉnh
Lấy màu thường là bước đầu tiên của một tác vụ định kiểu. Nếu bạn cần cùng màu đó ở cách ghi khác — CMYK cho in ấn hoặc giá trị OKLCH cho CSS dải màu rộng — Công Cụ Chuyển Đổi Màu Sắc tiếp tục từ nơi bảng chọn này dừng lại.
Màu vừa lấy thường đi thẳng vào một hiệu ứng hình ảnh: Trình Tạo Box Shadow nhận giá trị HEX để tạo bóng đổ chân thực, và các thẻ bo góc dựng bằng Trình Tạo Border Radius sẽ hoàn thiện diện mạo.
→ Chuyển Đổi Màu Sắc · Trình Tạo Box Shadow · Trình Tạo Border Radius
Câu Hỏi Thường Gặp
Sự khác biệt giữa HEX, RGB và HSL là gì?
Đây là ba cách ghi cho cùng một mô hình màu. HEX gói ba kênh đỏ, xanh lá, xanh dương vào sáu chữ số hệ thập lục phân (#3b82f6) và là dạng phổ biến nhất trong CSS và công cụ thiết kế. RGB liệt kê cùng ba kênh đó dưới dạng số thập phân từ 0 đến 255. HSL diễn đạt lại màu theo sắc độ (0–360°), độ bão hòa và độ sáng — trực quan hơn nhiều khi bạn muốn "cùng một màu, chỉ sáng hơn". Chuyển đổi giữa chúng không bao giờ làm thay đổi màu.
Việc lấy màu từ ảnh hoạt động như thế nào?
Ảnh đã tải lên được vẽ lên một canvas ẩn trong trình duyệt của bạn. Khi bạn nhấp, công cụ đọc giá trị đỏ, xanh lá, xanh dương của điểm ảnh tại đúng vị trí đó và chuyển đổi sang HEX, RGB và HSL. Ở các trình duyệt hỗ trợ API EyeDropper (Chrome và Edge trên máy tính), một kính lúp gốc sẽ mở ra để bạn chọn với độ chính xác từng điểm ảnh ở bất kỳ đâu trên màn hình.
Ảnh của tôi có bị tải lên đâu không?
Không. Ảnh được trình duyệt của bạn mở trực tiếp và đọc cục bộ từ canvas; không file hay dữ liệu màu nào bị truyền đi hoặc lưu trữ. Bạn có thể tải trang, ngắt mạng, và cả bảng chọn màu lẫn ống nhỏ giọt ảnh vẫn hoạt động — điều này an toàn cho các thiết kế chưa công bố và ảnh chụp màn hình nội bộ.
Vì sao màu lấy được không khớp hoàn toàn với những gì tôi thấy trên màn hình?
Hai lý do phổ biến. Khử răng cưa: các điểm ảnh ở rìa chữ và hình được pha trộn với nền, nên nhấp lệch một điểm ảnh cho ra màu trung gian — hãy lấy màu từ giữa vùng đặc thay vì rìa. Quản lý màu: file JPG/PNG có hồ sơ màu bất thường có thể hiển thị hơi khác nhau giữa các màn hình; công cụ báo cáo giá trị điểm ảnh như được lưu trong file, đó chính là giá trị bạn cần cho công việc thiết kế.
Nên sao chép định dạng nào cho CSS?
HEX là lựa chọn an toàn nhất theo mặc định — mọi trình duyệt và công cụ đều chấp nhận. Dùng HSL khi bạn định tạo biến thể hover hoặc chế độ tối, vì chỉ chỉnh riêng độ sáng sẽ giữ nguyên sắc độ và độ bão hòa. RGB chủ yếu hữu ích khi mã nguồn dựng màu từ các kênh số, hoặc khi thêm độ trong suốt, lúc đó rgba(59, 130, 246, 0.5) dễ đọc hơn một mã HEX tám ký tự.