Bộ chuyển đổi màu

Chuyển đổi một màu giữa các định dạng HEX, RGB, HSL, HSV và CMYK với mẫu màu xem trước và đầu ra sẵn sàng để sao chép.

Tất cả phép chuyển đổi màu được thực hiện cục bộ trên trình duyệt của bạn. Không có giá trị màu nào được gửi lên máy chủ của chúng tôi.

Bộ chuyển đổi định dạng màu

Dán một màu web và sao chép các định dạng bạn cần.

Đã phát hiện
hex
HEX
#3366FF

Hỗ trợ HEX, RGB, HSL, HSV và CMYK dựa trên sRGB đơn giản.

Các định dạng đã chuyển đổi

CMYK là xấp xỉ dựa trên sRGB, không phải quản lý màu in ICC.

HEX
#3366FF
RGB
rgb(51, 102, 255)
HSL
hsl(225, 100%, 60%)
HSV
hsv(225, 80%, 100%)
CMYK
cmyk(80%, 60%, 0%, 0%)

Ví dụ nhanh

Bộ chuyển đổi màu là gì?

Một bộ chuyển đổi màu chuyển đổi một giá trị màu sang các định dạng thường dùng trong thiết kế web, CSS, hệ thống thiết kế và ghi chú giao nhận. Một màu thương hiệu duy nhất có thể được lưu dưới dạng HEX trong hướng dẫn phong cách, RGB trong token thiết kế, HSL trong trình chỉnh sửa chủ đề và CMYK trong ghi chú dành cho in ấn. Công cụ này giữ các biểu diễn đó cùng nhau để bạn có thể sao chép phiên bản phù hợp mà không phải tính lại bằng tay.

Bộ chuyển đổi được thiết kế gọn nhẹ. Nó tập trung vào màu web sRGB thực tiễn: HEX, RGB, HSL, HSV và một phép xấp xỉ CMYK đơn giản. Nó không thay thế phần mềm quản lý màu chuyên nghiệp hoặc quy trình làm việc dựa trên hồ sơ ICC.

Các định dạng màu được hỗ trợ

Format Example Phù hợp nhất cho
HEX #3366FF CSS, token thiết kế, giao nhận trực quan nhanh
RGB rgb(51, 102, 255) Các giá trị CSS, công việc canvas, kênh màu cho lập trình
HSL hsl(225, 100%, 60%) Điều chỉnh chủ đề theo sắc độ, độ bão hòa và độ sáng
HSV hsv(225, 80%, 100%) Quy trình chọn màu kiểu picker và điều chỉnh trực quan
CMYK cmyk(80%, 60%, 0%, 0%) Ghi chú in ước lượng, không phải quản lý màu in cuối cùng

Những hạn chế quan trọng

  • Đầu ra CMYK được tính từ giá trị sRGB và chỉ là một phép xấp xỉ.
  • Các màu tên CSS, gradient, Lab, LCH, OKLCH và Display-P3 nằm ngoài phạm vi gọn nhẹ v1 này.
  • Các giá trị alpha có thể được phân tích cho các dạng HEX/RGB/HSL phổ biến, nhưng preview swatch gốc hiển thị màu nền không trong suốt.
  • Các công cụ thiết kế khác nhau có thể làm tròn giá trị HSL, HSV hoặc CMYK hơi khác nhau.

Các quy trình làm việc phổ biến

Dọn dẹp CSS

Dán một màu HEX từ hướng dẫn phong cách và sao chép RGB hoặc HSL cho trạng thái component, bảng màu biểu đồ hoặc biến chủ đề.

Giao nhận thiết kế

Giữ nhiều ký hiệu màu cùng nhau khi nhà phát triển, nhà thiết kế hoặc biên tập nội dung sử dụng các công cụ khác nhau.

Kiểm tra token

Kiểm tra xem một token màu có khớp với sắc độ và độ bão hòa mong muốn trước khi sử dụng trong giao diện công cộng hay không.

Ghi chú in

Tạo các giá trị CMYK ước lượng để thảo luận, trong khi để đầu ra in cuối cùng cho các công cụ nhận diện hồ sơ màu.

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

Đầu ra CMYK có chính xác không?

Không. Giá trị CMYK là một chuyển đổi đơn giản từ sRGB, hữu ích cho ghi chú sơ bộ. Công việc in cuối cùng phụ thuộc vào giấy, mực, cài đặt máy in và hồ sơ ICC.

Tôi có thể dán các hàm màu CSS không?

Có, cho cú pháp hàm RGB, HSL, HSV và kiểu CMYK phổ biến. Các không gian màu mới hơn như Lab, LCH, OKLCH và Display-P3 được chủ ý loại ra khỏi phạm vi công cụ gọn nhẹ này.

Công cụ có hỗ trợ độ trong suốt alpha không?

Nó có thể phân tích các dạng alpha phổ biến như RGBA, HSLA và HEX tám chữ số, nhưng swatch chính và đầu ra sao chép tập trung vào màu web không trong suốt (opaque).

Tại sao giá trị đôi khi khác với công cụ thiết kế khác?

Sự khác biệt nhỏ thường xuất phát từ quy tắc làm tròn hoặc giả định quản lý màu. Đối với màu sRGB web, những khác biệt đó thường rất nhỏ.

Khi nào nên dùng trình kiểm tra tương phản?

Sử dụng trình kiểm tra tương phản khi bạn cần so sánh hai màu để kiểm tra khả năng đọc chữ. Bộ chuyển đổi này chỉ chuyển đổi một màu giữa các định dạng.