Cách dùng Bộ chọn màu
- Kéo trong ô màu và di chuyển thanh sắc độ, nhập giá trị HEX, hoặc dùng công cụ hút màu để lấy màu từ màn hình.
- Nhấn vào một dòng bất kỳ để sao chép màu dưới dạng HEX, RGB, HSL hoặc OKLCH.
- Dùng sắc độ và phối màu để tạo bảng màu, rồi kiểm tra độ tương phản của chữ.
- Muốn đưa bộ chọn lên website, hãy thiết lập các tùy chọn trong mục Nhúng bộ chọn này và sao chép đoạn mã.
Nên dùng định dạng màu nào?
- HEX là dạng viết ngắn gọn, được dùng phổ biến trong CSS và các công cụ thiết kế.
- RGB cho biết các kênh đỏ, xanh lá và xanh dương, hữu ích khi công cụ yêu cầu nhập số.
- HSL dễ chỉnh tay hơn: thay đổi độ sáng để có màu nhạt hoặc đậm hơn.
- OKLCH có độ đồng đều về mặt thị giác, nên các bước độ sáng bằng nhau sẽ trông bằng nhau. Tất cả các trình duyệt lớn hiện nay đều hỗ trợ định dạng này.
Nhúng bộ chọn màu
Đoạn mã nhúng là một custom element độc lập, không cần thư viện và không gửi yêu cầu ra bên ngoài. Dán vào bất kỳ trang nào, lắng nghe sự kiện input và đọc event.detail.value. Kiểu dáng được đặt trong shadow root nên sẽ không xung đột với website của bạn. Trên Webflow, nút Copy to Webflow sẽ dán mã vào một phần tử Embed.
Cần thêm công cụ? Hãy chuyển đổi giá trị bằng Color Converter, trộn hai màu với Color Mixer, lấy bảng màu từ ảnh bằng Image Color Palette, hoặc kiểm tra độ dễ đọc với Contrast Checker.
Cũng được tìm dưới tên: công cụ chọn màu, bộ chọn màu online, html color picker, mã màu hex, chọn màu từ màn hình, color picker javascript, nhúng color picker, lấy mã màu rgb.
Các công cụ dùng kèm tốt với Bộ chọn màu
- Tạo CSS Gradient — Thiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS dùng được ngay, kèm màu nền đặc làm phương án dự phòng.
- Tạo bảng màu Tailwind — Dán một màu thương hiệu và nhận thang màu 11 bước (50 đến 950) được cân bằng, tính theo OKLCH, kèm gợi ý độ tương phản và xuất file cho Tailwind v3, v4, CSS và SCSS.
- Chuyển HEX sang OKLCH — Dán mã màu HEX và nhận giá trị OKLCH dùng cho CSS.
- Chuyển OKLCH sang HEX — Dán giá trị oklch() để nhận mã HEX tương ứng, cùng với RGB và HSL.
Câu hỏi thường gặp
Làm sao để lấy màu từ màn hình?
Nhấn nút công cụ hút màu trong bộ chọn, rồi nhấp vào bất kỳ vị trí nào trên màn hình. Tính năng này hoạt động trên Chrome và Edge trên máy tính. Các trình duyệt khác sẽ mở hộp thoại chọn màu riêng, có thể đã bao gồm chức năng lấy màu từ màn hình.
Tôi có thể dùng bộ chọn nhúng trên website thương mại không?
Được. Đoạn mã miễn phí cho cả dự án cá nhân và thương mại, không cần ghi nguồn.
Làm sao để đọc màu đã chọn từ đoạn nhúng?
Thêm trình lắng nghe sự kiện input vào phần tử rồi đọc event.detail.value, hoặc đọc thuộc tính value của phần tử bất cứ lúc nào.
Đoạn nhúng có tải thứ gì từ devpack không?
Không. Mọi thứ đều nằm trong đoạn mã bạn dán vào, nên vẫn hoạt động khi bạn ngoại tuyến.
Tôi có thể cài Bộ chọn màu như một ứng dụng web và dùng khi không có mạng không?
Có. Bộ chọn màu là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.