Chuyển đổi Màu

Chuyển đổi Màu - Chuyển đổi giữa các định dạng màu

Công cụ chuyển đổi màu mạnh mẽ chuyển đổi giữa các định dạng màu HEX, RGB, HSL và CMYK. Có color picker với xem trước trực tiếp, copy màu vào clipboard và phát hiện độ sáng màu. Hoàn hảo cho web developers, designers và bất kỳ ai làm việc với màu sắc.

Các định dạng màu khác nhau là gì?

Các định dạng màu phổ biến:

HEX (Thập lục phân):
- Định dạng: #RRGGBB hoặc #RGB
- Ví dụ: #FF5733, #F57
- Dùng trong: HTML, CSS, công cụ thiết kế
- Phạm vi: 00-FF mỗi kênh (0-255)

RGB (Red, Green, Blue - Đỏ, Xanh lục, Xanh dương):
- Định dạng: rgb(R, G, B)
- Ví dụ: rgb(255, 87, 51)
- Dùng trong: CSS, lập trình, màn hình digital
- Phạm vi: 0-255 mỗi kênh

HSL (Hue, Saturation, Lightness - Sắc độ, Độ bão hòa, Độ sáng):
- Định dạng: hsl(H, S%, L%)
- Ví dụ: hsl(9, 100%, 60%)
- Dùng trong: CSS, thao tác màu
- Hue: 0-360°, Saturation: 0-100%, Lightness: 0-100%

CMYK (Cyan, Magenta, Yellow, Black):
- Định dạng: cmyk(C%, M%, Y%, K%)
- Ví dụ: cmyk(0%, 66%, 80%, 0%)
- Dùng trong: In ấn, thiết kế đồ họa
- Phạm vi: 0-100% mỗi kênh

Khi nào nên dùng mỗi định dạng màu?

Chọn định dạng dựa trên ngữ cảnh:

HEX:
- Tốt nhất cho: Web development, CSS
- Biểu diễn gọn
- Dễ đọc và nhớ
- Chuẩn trong HTML/CSS
- Ví dụ dùng: background-color: #FF5733;

RGB:
- Tốt nhất cho: Lập trình, thao tác JavaScript
- Dễ thao tác từng kênh riêng lẻ
- Tốt cho opacity (rgba với alpha)
- Trực quan cho màn hình digital
- Ví dụ dùng: thao tác màu, canvas

HSL:
- Tốt nhất cho: Biến thể màu, themes
- Dễ điều chỉnh độ sáng/bão hòa
- Biểu diễn color wheel trực quan
- Tuyệt vời để tạo color schemes
- Ví dụ dùng: Tạo phiên bản sáng/tối hơn

CMYK:
- Tốt nhất cho: Thiết kế in ấn
- Yêu cầu bởi máy in
- Khác với màu màn hình
- Không dùng cho web (trình duyệt dùng RGB)
- Ví dụ dùng: Chuẩn bị files cho in chuyên nghiệp

Làm thế nào để dùng color picker?

Sử dụng color picker:

1. Nhấp vào color picker
2. Chọn màu mong muốn từ bảng màu
3. Công cụ tự động:
- Cập nhật tất cả fields định dạng màu (HEX, RGB, HSL, CMYK)
- Hiển thị xem trước màu trực tiếp
- Tính toán độ sáng màu
- Xác định màu sáng hay tối

4. Bạn cũng có thể:
- Gõ mã HEX trực tiếp (#FF5733)
- Nhập giá trị RGB (R, G, B)
- Điều chỉnh giá trị HSL (Hue, Saturation, Lightness)
- Copy bất kỳ định dạng nào vào clipboard

Thay đổi bất kỳ trường nào tự động cập nhật tất cả định dạng khác.

Độ sáng màu là gì?

Độ sáng màu (còn gọi là luminance) đo mức độ sáng hoặc tối của màu:

Tính toán:
- Dùng công thức luminance cảm nhận
- Trọng số theo độ nhạy của mắt người
- Công thức: 0.299*R + 0.587*G + 0.114*B
- Kết quả: 0-255 (0 = đen, 255 = trắng)

Tại sao quan trọng:
- Xác định màu text (trắng trên tối, đen trên sáng)
- Khả năng tiếp cận (yêu cầu tương phản WCAG)
- Quyết định thiết kế UI
- Tạo color scheme

Màu sáng (độ sáng > 128):
- Dùng text tối để dễ đọc
- Phù hợp cho backgrounds
- Độ sáng cảm nhận cao hơn

Màu tối (độ sáng ≤ 128):
- Dùng text sáng để dễ đọc
- Tốt để nhấn mạnh
- Độ sáng cảm nhận thấp hơn

Công cụ này tự động phát hiện và hiển thị màu sáng hay tối.

Tôi có thể chuyển CMYK sang RGB chính xác không?

Chuyển đổi CMYK sang RGB có hạn chế:

Quan trọng cần biết:
- CMYK là subtractive (mực trên giấy)
- RGB là additive (ánh sáng trên màn hình)
- Color spaces khác nhau
- Chuyển đổi là ước tính, không chính xác
- Màu có thể trông khác khi in

Công thức chuyển đổi:
- R = 255 × (1-C) × (1-K)
- G = 255 × (1-M) × (1-K)
- B = 255 × (1-Y) × (1-K)

Hạn chế:
- Một số màu CMYK không thể hiển thị trên màn hình
- Một số màu RGB không thể in được
- Chuyển đổi mất một số thông tin
- In chuyên nghiệp cần color profiles

Best practices:
- Cho in: làm việc với CMYK từ đầu
- Cho web: luôn dùng RGB/HEX
- Cho cả hai: tham khảo chuyên gia
- Test in trước khi production cuối cùng

Công cụ này cung cấp chuyển đổi toán học, hữu ích cho giá trị ước tính nhưng không dùng cho in chuyên nghiệp.

Tính năng chính

• Chuyển đổi giữa HEX, RGB, HSL và CMYK
• Color picker tương tác
• Xem trước màu trực tiếp
• Copy bất kỳ định dạng màu nào vào clipboard
• Phát hiện độ sáng (sáng/tối)
• Hỗ trợ định dạng HEX #RGB và #RRGGBB
• Chuyển đổi real-time khi bạn gõ
• Tính toán độ sáng màu
• Xử lý 100% phía client
• Không giao tiếp server
• Hoạt động offline
• Hỗ trợ chế độ tối
• Thân thiện với mobile