Bạn tìm được màu hoàn hảo ở định dạng HEX, nhưng công cụ thiết kế yêu cầu RGB. Hoặc khách hàng gửi màu bằng RGB và bạn cần giá trị HSL cho CSS. Chuyển đổi định dạng màu là công việc hàng ngày của nhà thiết kế và lập trình viên. Công cụ Chuyển đổi màu giúp việc này tức thì.
Bạn cần gì
- Một giá trị màu ở bất kỳ định dạng nào (HEX, RGB, HSL, hoặc khác)
- Một trình duyệt web (Chrome, Firefox, Safari, hoặc Edge)
- Không cần tài khoản hay cài đặt
Hướng dẫn từng bước
Nhập giá trị màu
Mở công cụ Chuyển đổi màu. Nhập hoặc dán giá trị màu ở bất kỳ định dạng được hỗ trợ nào. Ví dụ, nhập #3B82F6 dạng HEX, rgb(59, 130, 246) dạng RGB, hoặc hsl(217, 91%, 60%) dạng HSL. Công cụ tự động nhận dạng định dạng.
Xem tất cả chuyển đổi định dạng
Công cụ hiển thị ngay màu ở mọi định dạng được hỗ trợ: HEX, RGB, HSL, và nhiều hơn nữa. Bạn có thể thấy bản xem trước trực tiếp của màu cùng với tất cả giá trị tương đương. Nếu cần điều chỉnh màu, sử dụng bộ chọn màu để tinh chỉnh trực quan.
Sao chép định dạng bạn cần
Nhấp nút sao chép bên cạnh bất kỳ định dạng nào để sao chép giá trị vào clipboard. Dán trực tiếp vào file CSS, công cụ thiết kế, hoặc bất cứ đâu bạn cần. Không cần gõ lại thủ công.
Lưu ý Công cụ Chuyển đổi màu chạy hoàn toàn trong trình duyệt. Nó hoạt động offline sau khi tải và không cần tài khoản hay cài đặt.
Hiểu các định dạng màu
Các công cụ và bối cảnh khác nhau sử dụng định dạng màu khác nhau. Đây là khi nào nên dùng mỗi loại:
HEX
Định dạng phổ biến nhất trên web. Màu HEX bắt đầu bằng # theo sau bởi sáu ký tự (chữ và số), như #FF5733.
- Sử dụng trong: CSS, HTML, công cụ thiết kế (Figma, Sketch, Photoshop)
- Định dạng:
#RRGGBBtrong đó mỗi cặp là giá trị thập lục phân từ 00 đến FF - Ví dụ:
#3B82F6(xanh dương trung bình)
RGB
Mô tả màu bằng các thành phần Đỏ, Xanh lục và Xanh dương, mỗi thành phần từ 0 đến 255.
- Sử dụng trong: CSS (hàm
rgb()), ngôn ngữ lập trình, đèn LED - Định dạng:
rgb(đỏ, xanh lục, xanh dương) - Ví dụ:
rgb(59, 130, 246)
HSL
Mô tả màu bằng Sắc độ (0-360 độ trên vòng tròn màu), Độ bão hòa (0-100%) và Độ sáng (0-100%).
- Sử dụng trong: CSS (hàm
hsl()), lý thuyết màu, hệ thống thiết kế - Định dạng:
hsl(sắc độ, bão hòa%, sáng%) - Ví dụ:
hsl(217, 91%, 60%)
Mẹo HSL là định dạng trực quan nhất để điều chỉnh màu. Muốn sáng hơn? Tăng giá trị sáng. Muốn dịu hơn? Giảm độ bão hòa. Điều này làm HSL lý tưởng để xây dựng hệ thống màu và tạo biến thể từ màu cơ bản.
Khi nào dùng định dạng nào
| Tình huống | Định dạng khuyến nghị |
|---|---|
| Viết CSS thủ công | HEX (ngắn gọn và quen thuộc) hoặc HSL (dễ tinh chỉnh) |
| Thông số công cụ thiết kế | HEX (tiêu chuẩn ngành) |
| Thao tác màu động trong code | HSL (dễ điều chỉnh bằng lập trình nhất) |
| Truyền đạt màu cho khách hàng | HEX (được nhận biết rộng rãi nhất) |
| Thiết kế in ấn | CMYK (riêng biệt với định dạng màn hình) |
Mở rộng hơn màu đơn lẻ
Khi đã chuyển đổi màu, bạn có thể muốn khám phá các công cụ liên quan:
- Trình tạo Gradient: Tạo gradient CSS mượt mà với các màu của bạn. Nhập hai hoặc nhiều màu và nhận mã gradient sẵn sàng dán vào stylesheet.
- Trình tạo bảng màu: Tạo bảng màu hài hòa dựa trên màu khởi đầu. Tự động nhận các bảng màu bổ sung, tương tự, tam giác và các loại khác.
Các công cụ này hoạt động cùng nhau với Trình chuyển đổi màu để giúp bạn xây dựng hệ thống màu hoàn chỉnh cho dự án.
Quan trọng Màu có thể hiển thị khác nhau trên các màn hình khác nhau do hiệu chỉnh màn hình, profile màu và cài đặt độ sáng. Khi độ chính xác màu quan trọng (thương hiệu, thiết kế in ấn), luôn xác minh màu trên phương tiện đích, không chỉ trên màn hình của bạn.
Câu hỏi thường gặp
Sự khác biệt giữa HEX và RGB là gì?
Chúng biểu diễn cùng thông tin ở ký hiệu khác nhau. HEX sử dụng thập lục phân (cơ số 16) và RGB sử dụng thập phân (cơ số 10). #FF0000 và rgb(255, 0, 0) đều là màu đỏ thuần.
Tôi có thể chuyển đổi sang CMYK cho in ấn không? Định dạng màu màn hình (HEX, RGB, HSL) và định dạng in ấn (CMYK) là mô hình màu khác nhau cơ bản. Tồn tại phép chuyển đổi toán học, nhưng để có màu in chính xác, bạn nên sử dụng công cụ quản lý màu chuyên nghiệp.
Còn độ trong suốt (alpha) thì sao?
HEX hỗ trợ alpha với hai ký tự thêm (#3B82F680). RGB và HSL hỗ trợ dưới dạng hàm rgba() và hsla(). Công cụ Chuyển đổi màu xử lý các định dạng này.
Bước tiếp theo
Với màu đã chuyển đổi, hãy thử Trình tạo Gradient để tạo gradient CSS đẹp, hoặc sử dụng Trình tạo bảng màu để xây dựng bảng màu hoàn chỉnh xung quanh màu bạn chọn.