Color Picker

Chọn màu và lấy mã HEX, RGB, HSL tương ứng để dùng cho CSS hoặc thiết kế giao diện.

Về công cụ chọn màu

Công cụ chọn màu của BapTools hiển thị đồng thời mã HEX, RGB và HSL của màu bạn đang chọn, kèm nút sao chép nhanh. Hữu ích khi cần tra cứu màu từ thiết kế hoặc từ ảnh chụp màn hình.

Chọn màu nên dùng mã nào?

  • HEX: dạng ngắn gọn nhất, phổ biến trong HTML, CSS, Figma và Canva.
  • RGB: cần khi bạn định nghĩa về từng kênh màu hoặc thêm độ mờ (alpha).
  • HSL: dễ điều chỉnh độ sáng và độ bão hoà khi tạo bảng màu hoặc biến thể.

Làm sao chọn màu dễ đọc?

Kiểm tra tỷ lệ tương phản giữa chữ và nền. Theo WCAG, chữ thường cần tối thiểu 4,5:1 và chữ đậm tối thiểu 3:1 để đảm bảo khả năng đọc.

Ví dụ thực tế

Ví dụ 1 — Lấy màu từ ảnh chụp màn hình

Dùng công cụ lấy màu của hệ thống thiết kế, dán mã thu được vào style. Nhanh hơn việc cố đoán từ mắt.

Ví dụ 2 — Tạo bảng màu từ một màu chủ đạo

Bấm Random nhiều lần để lấy các màu tương phản, hoặc nhập mã HEX của màu chính rồi dùng HSL để tăng/giảm độ sáng theo tỷ lệ.

Ví dụ 3 — Làm nền hover nhạt hơn

Màu nền là #FF7F50. Giữ nguyên HSL nhưng hạ độ sáng xuống khoảng 95% sẽ cho một sắc độ dịu hơn cho trạng thái hover.

Ví dụ 4 — Kiểm tra mã đã sao chép

Sau khi bấm "Copy HEX", dán vào trình soạn thảo. Mã phải bắt đầu bằng # và dài 7 ký tự, nếu không có nghĩa là bạn đã chọn sai định dạng.

Khi nào nên dùng và khi nào không

Nên dùng

  • Tra cứu màu từ ảnh chụp màn hình hoặc từ tài liệu thiết kế.
  • Tạo bảng màu bổ sung từ một màu chủ đạo.
  • Lấy mã HEX để dán vào CSS hoặc vào biến trong Tailwind, SCSS.
  • Kiểm tra màu nền và màu chữ trước khi in ấn.

Không nên dùng

  • Thay thế công cụ lấy màu từ ảnh có hỗ trợ thu pixel, vì màu lấy từ ảnh nén sẽ bị lệch.
  • Kiểm tra tương phản WCAG, cần công cụ chuyên tính tỷ lệ tương phản.
  • Chọn màu cho người mù màu mà không kiểm tra, vì mã màu đúng vẫn có thể không đọc được.

Cách dùng

  1. Chọn màu bằng thanh trượt hoặc nhập mã HEX.
  2. Đọc giá trị RGB và HSL hiển thị bên cạnh.
  3. Nhấn Copy HEX, Copy RGB hoặc Copy HSL để sao chép.

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

Màu này có an toàn cho người mù màu không?

Không màu nào hoàn toàn an toàn, nhưng bạn có thể dùng bộ lọc deuteranopia trong trình thiết kế để kiểm tra trước.

Nên dùng bao nhiêu màu trên một trang?

Thường 3 - 5 màu chính là đủ: một màu nhấn, một màu nền và các màu trung tính.

Mã HEX có phân biệt hoa thường không?

Không, #FF7F50 và #ff7f50 là cùng một màu.