🎨 Công cụ chọn màu online (Color Picker)
📷 Lấy màu từ ảnh
Tải lên ảnh bất kỳ (PNG, JPG...) để trích xuất bảng màu chính.
Công cụ lấy màu từ ảnh online giúp bạn trích xuất bảng màu chủ đạo của ảnh sản phẩm, logo, banner hoặc website chỉ trong vài giây. Không cần phần mềm Photoshop hay ứng dụng bên ngoài.
🎲 Tạo bảng phối màu ngẫu nhiên
Nhấn nút bên dưới để tạo 5 màu ngẫu nhiên hài hòa. Mỗi màu có thể click để sao chép mã HEX nhanh.
Công cụ tạo bảng phối màu ngẫu nhiên giúp nhà thiết kế và lập trình viên nhanh chóng tạo ra những bảng màu gợi ý đẹp mắt. Mỗi lần bấm nút sẽ hiển thị 5 tông màu cân bằng theo nguyên tắc Hue – Saturation – Lightness (HSL), hỗ trợ chọn màu chủ đạo, màu nền, màu nhấn và màu chữ hiệu quả trong thiết kế web, app hoặc in ấn.
🔄 Chuyển đổi định dạng màu (HEX ↔ RGB ↔ HSL)
Nhập mã màu bất kỳ để tự động chuyển đổi giữa các định dạng phổ biến.
| Định dạng | Mã chuyển đổi | Sao chép |
|---|---|---|
| HEX | - | |
| RGB | - | |
| HSL | - |
Công cụ chuyển đổi mã màu online giúp lập trình viên và designer dễ dàng đổi qua lại giữa HEX – RGB – HSL mà không cần phần mềm phức tạp. Phù hợp cho thiết kế website, đồ họa, UI/UX, chọn màu giao diện và in ấn.
🌈 Bảng màu Material Design (Google UI Colors)
Bảng màu chuẩn theo hệ thống thiết kế Material Design của Google. Click vào từng ô để sao chép mã HEX nhanh.
Bảng Material Design Colors là hệ thống bảng màu chính thức được Google phát triển cho thiết kế UI/UX, giúp đảm bảo độ tương phản, khả năng đọc, và tính thẩm mỹ đồng nhất trên mọi nền tảng. Bạn có thể dùng các màu như Blue #2196F3 hay Teal #009688 cho website, ứng dụng di động, hoặc infographic. Nhấp để sao chép mã màu nhanh và áp dụng trong CSS, Figma, hoặc Photoshop.
Với tính năng mới, bạn có thể tải bảng màu Material Design dạng JSON chỉ bằng một cú click. File này có thể dùng trong CSS, JavaScript, Figma, Flutter hoặc hệ thống design system nội bộ, giúp tiết kiệm thời gian khi phối màu website, ứng dụng hoặc sản phẩm thương hiệu.
🧮 Kiểm tra độ tương phản màu sắc (Contrast Ratio Checker)
Chọn màu chữ và màu nền để kiểm tra độ tương phản theo tiêu chuẩn WCAG 2.1.
Công cụ kiểm tra độ tương phản màu sắc online giúp đánh giá khả năng đọc và tính tiếp cận (accessibility) của website. Theo chuẩn WCAG 2.1, văn bản cần đạt tối thiểu 4.5:1 để dễ đọc trên mọi nền. Công cụ này hỗ trợ lập trình viên, nhà thiết kế UI/UX kiểm tra nhanh sự phù hợp giữa màu nền và màu chữ.
🎨 Trình tạo bảng phối màu nâng cao (Color Harmony Generator)
Tạo bảng màu tùy chỉnh hoặc tự động sinh theo nguyên tắc phối màu. Chọn màu thủ công hoặc click “🎲 Random” để lấy ngẫu nhiên.
Trình tạo bảng phối màu online giúp bạn dễ dàng tìm ra tổ hợp màu hài hòa theo nguyên tắc thiết kế chuyên nghiệp: Bổ sung, Tương đồng, Tam giác, Đơn sắc. Bạn có thể xuất bảng màu thành JSON hoặc PNG để sử dụng trong CSS, Figma, hoặc dự án web. Công cụ này phù hợp cho lập trình viên, nhà thiết kế và marketer muốn tối ưu màu sắc thương hiệu.
| Định dạng | Mã màu | Sao chép |
|---|---|---|
| HEX | #3498db | |
| RGB | rgb(52,152,219) | |
| HSL | hsl(204,70%,53%) | |
| CMYK | C:76 M:31 Y:0 K:14 |
📚 Lịch sử màu gần đây
🧠 Tìm hiểu về mã màu trong thiết kế và lập trình
Mã màu là cách biểu diễn màu sắc trong không gian kỹ thuật số.
HEX (ví dụ #3498db) được dùng phổ biến trong HTML/CSS,
trong khi RGB (Red, Green, Blue) và HSL (Hue, Saturation, Lightness)
giúp điều chỉnh độ sáng và tông màu dễ dàng hơn.
Với công cụ này, bạn có thể chọn màu, xem mã theo nhiều định dạng, sao chép nhanh và tạo bảng màu thương hiệu chuẩn xác. Ngoài ra, bạn có thể thử nghiệm phối màu, chọn màu nền / chữ tương phản phù hợp trong thiết kế UI, logo hoặc banner.
🎯 Ứng dụng của công cụ chọn màu
- Thiết kế website, ứng dụng, banner, logo.
- Tạo bảng màu thương hiệu và phong cách cá nhân.
- Phân tích hoặc tái tạo màu từ ảnh và mã HTML.
- Phục vụ học tập và nghiên cứu về đồ họa số.