Chọn màu và chuyển đổi giữa HEX, RGB, HSL
:root {
--primary: #EAB308;
--primary-rgb: 234, 179, 8;
}Công cụ chọn màu online miễn phí của Tấn Phát Digital với color picker trực quan. Chuyển đổi tức thì 2 chiều giữa HEX, RGB, HSL. Nhập mã HEX hoặc giá trị RGB thủ công, copy từng định dạng màu với một click. 10 preset màu phổ biến có sẵn: vàng, xanh lá, xanh dương, đỏ, tím, hồng, cyan, cam, indigo, đen. Tự động tạo CSS Variables sẵn sàng dùng trong dự án. Preview màu lớn rõ ràng. Hữu ích cho designer, frontend developer, marketer, và bất kỳ ai làm việc với màu sắc.
Màu sắc là yếu tố quan trọng nhất trong thiết kế web, app, và đồ họa - nó ảnh hưởng đến cảm xúc, brand recognition, và user experience. Mỗi nền tảng và công cụ sử dụng định dạng màu khác nhau: CSS thường dùng HEX (#FF5733), JavaScript và nhiều design tools dùng RGB (255, 87, 51), và HSL (Hue, Saturation, Lightness) dễ điều chỉnh độ sáng/tối hơn. Color Picker giúp bạn chuyển đổi nhanh giữa các định dạng, đảm bảo màu nhất quán trên mọi nền tảng từ Figma đến CSS đến JavaScript. Đặc biệt hữu ích khi cần lấy màu từ design mockup và implement vào code, hoặc khi cần điều chỉnh màu (sáng hơn, tối hơn) mà vẫn giữ hue.
HEX (#FF5733): Format 6 ký tự hexadecimal, phổ biến nhất trong CSS và web development. Mỗi cặp 2 ký tự đại diện cho Red, Green, Blue (00-FF = 0-255). Dễ copy-paste và compact. RGB (255, 87, 51): Biểu diễn màu qua 3 kênh Red-Green-Blue, mỗi kênh từ 0-255. Trực quan hơn HEX vì thấy rõ thành phần màu. Dùng trong CSS: rgb(255, 87, 51) hoặc rgba() với alpha channel. HSL (14, 100%, 60%): Hue (0-360° trên color wheel), Saturation (0-100% độ bão hòa), Lightness (0-100% độ sáng). Dễ điều chỉnh: tăng L để sáng hơn, giảm để tối hơn, giữ nguyên H và S. Rất hữu ích khi cần tạo tints và shades của cùng một màu.
CSS Variables (Custom Properties) cho phép định nghĩa màu một lần và sử dụng nhiều nơi. Cú pháp: :root { --primary: #EAB308; --primary-rgb: 234, 179, 8; }. Sử dụng: color: var(--primary); hoặc background: rgba(var(--primary-rgb), 0.5);. Lợi ích: Thay đổi màu toàn bộ website chỉ cần sửa một chỗ. Dễ tạo dark mode bằng cách override variables. Có thể dùng trong calc() và các CSS functions. Hỗ trợ fallback: var(--primary, #EAB308). Tool này tự động generate cả HEX và RGB variables để bạn có thể dùng với rgba() cho transparency.
60-30-10 Rule: 60% màu dominant (background), 30% màu secondary, 10% màu accent (CTA buttons). Contrast: Đảm bảo text có đủ contrast với background (WCAG AA: 4.5:1 cho text thường). Consistency: Sử dụng CSS Variables để đảm bảo màu nhất quán. Brand Colors: Lưu màu brand vào preset hoặc design system. Accessibility: Test màu với color blindness simulators. Dark Mode: Chuẩn bị light và dark variants của mỗi màu. Semantic Colors: Định nghĩa màu theo ý nghĩa (--success, --error, --warning) thay vì tên màu (--green, --red).
HEX (#FF5733) là format 6 ký tự hexadecimal, compact và phổ biến trong CSS. RGB (255, 87, 51) biểu diễn màu qua 3 kênh Red-Green-Blue (0-255), trực quan hơn. HSL (Hue, Saturation, Lightness) dễ điều chỉnh độ sáng/tối hơn - tăng L để sáng hơn, giảm để tối hơn mà không đổi màu gốc. Cả 3 đều biểu diễn cùng một màu, chỉ khác cách viết.
Figma thường hiển thị HEX hoặc RGB trong panel bên phải khi select element. Copy giá trị đó, paste vào Color Picker để verify và lấy định dạng phù hợp cho CSS. Figma cũng có thể export CSS trực tiếp, nhưng Color Picker giúp bạn có thêm HSL và CSS Variables.
Paste đoạn :root { --primary: #xxx; } vào đầu file CSS (thường trong global.css hoặc variables.css). Sau đó dùng var(--primary) ở bất kỳ đâu cần màu đó: color: var(--primary); background: var(--primary);. Khi cần đổi màu, chỉ sửa một chỗ trong :root.
Preset màu là 10 màu phổ biến, đã được chọn lọc về độ tương phản và thẩm mỹ: vàng (brand), xanh lá (success), xanh dương (primary), đỏ (error), tím, hồng, cyan, cam (warning), indigo, đen. Tiện lợi khi cần màu nhanh cho prototyping hoặc khi chưa có brand colors cụ thể.
Dùng HSL! Giữ nguyên H (Hue) và S (Saturation), chỉ thay đổi L (Lightness). Tăng L để sáng hơn (tint), giảm L để tối hơn (shade). Ví dụ: hsl(45, 93%, 47%) → hsl(45, 93%, 60%) sáng hơn, hsl(45, 93%, 30%) tối hơn. Đây là cách tạo color palette từ một màu base.
Tool hiển thị màu solid (không có transparency). Để thêm alpha, dùng rgba() hoặc hsla() trong CSS: rgba(234, 179, 8, 0.5) hoặc hsla(45, 93%, 47%, 0.5). Tool cung cấp --primary-rgb variable để bạn dễ dàng dùng với rgba().
Dùng Color Contrast Checker (công cụ khác trên website) để kiểm tra contrast ratio giữa text và background. WCAG AA yêu cầu 4.5:1 cho text thường, 3:1 cho text lớn. Màu quá sáng trên nền trắng hoặc quá tối trên nền đen sẽ khó đọc.
Hiện tại tool không có tính năng save. Khuyến nghị: Copy CSS Variables vào file riêng, hoặc lưu vào design system trong Figma/Sketch. Bạn cũng có thể bookmark trang với màu trong URL (feature đang phát triển).
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
Tạo file .env và .env.example cho dự án.
Tạo .gitignore cho Node.js, Python, Java.
Tạo mock JSON data cho API testing.
Format và phân tích API response.
Test REST API: GET, POST, PUT, DELETE.
Chuyển đổi Binary, Hex, Base32.
Mã hóa/giải mã Base64.
Chuyển đổi Decimal, Binary, Hex.
Tạo CSS box-shadow trực quan.
Tính quyền file Linux.
Kiểm tra WCAG accessibility.
Tạo bảng màu ngẫu nhiên.
