Đổi mã màu HEX sang RGB, CMYK, HSL online trong một lần gõ
Mục lục
Cách đổi mã màu HEX sang RGB, CMYK, HSL, HSV và OKLCH bằng công cụ Đổi mã màu của ColorME: gõ một mã, nhận bảy định dạng, đổi ngược từ rgb(), cmyk(), tên màu về HEX, lấy màu hover từ dải sáng tối, và những lưu ý khi dùng số CMYK để in.
Trả lời nhanh: để đổi mã màu HEX sang RGB, mở công cụ Đổi mã màu của ColorME, gõ hoặc dán mã HEX vào ô nhập. Ví dụ #2563EB cho ngay rgb(37, 99, 235), kèm HSL, HSV, CMYK, OKLCH và một biến CSS; bấm biểu tượng sao chép cạnh dòng bạn cần. Công cụ miễn phí, không cần đăng nhập, chạy trên trình duyệt. Riêng CMYK là số tham khảo, chưa phải số để gửi nhà in (xem phần dưới).
Xem nhanh: gõ một mã HEX, nhận đủ bảy dòng kết quả. Ảnh chụp màn hình: ColorME.
Mã HEX #2563EB đổi ra các hệ màu khác là gì?
Cả bài dùng một màu xanh dương làm ví dụ, coi như màu chính của một bộ nhận diện giả định. Đây là đúng những gì công cụ trả về khi chúng tôi gõ #2563EB:
| Định dạng | Kết quả | Thường dùng ở đâu |
|---|---|---|
| HEX | #2563EB | Web, Figma, Photoshop |
| RGB | rgb(37, 99, 235) | CSS, màn hình, slide |
| HSL | hsl(221, 83%, 53%) | CSS, chỉnh sáng tối bằng tay |
| HSV | hsv(221, 84%, 92%) | Bảng chọn màu của phần mềm đồ hoạ |
| CMYK | cmyk(84%, 58%, 0%, 8%) | Tham khảo trước khi làm file in |
| OKLCH | oklch(54.6% 0.215 262.9) | CSS đời mới, dựng thang màu |
| CSS biến | --color-primary: #2563EB; | Dán vào :root của file CSS |
Chúng tôi tự tính lại các dòng RGB, HSL, HSV, CMYK và OKLCH bằng công thức chuẩn cho sáu màu khác nhau; số của công cụ khớp sau khi làm tròn.
Video quay màn hình (41 giây, không tiếng): gõ HEX, gõ rgb(), cmyk(), tên màu, mã có độ trong suốt, chọn hai ô trong dải sáng tối, rồi sao chép HEX, CMYK và biến CSS. Ảnh chụp màn hình: ColorME.
Cách đổi mã màu HEX sang RGB, CMYK, HSL: 4 bước
Bước 1. Mở công cụ
Vào colorme.vn/tools/color-converter. Trang mở sẵn với một màu mẫu #E11D48: bên trái là ô màu lớn và dải chín ô "Sáng hơn → tối hơn", bên phải là bảng Mã màu với bảy dòng.
Giao diện khi vừa mở. Ảnh chụp màn hình: ColorME.
Bước 2. Gõ hoặc dán mã HEX
Bấm vào ô nhập, xoá mã cũ rồi gõ mã của bạn. Kết quả đổi theo từng ký tự, không có nút "Chuyển đổi" nào phải bấm. Trong lần thử của chúng tôi, mã viết thường và không có dấu # (2563eb) vẫn được nhận và viết lại thành #2563EB; mã rút gọn ba ký tự #26e được hiểu là #2266EE.
Kết quả của #2563EB. Ảnh chụp màn hình: ColorME.
Bước 3. Đọc bảy dòng kết quả
Dòng RGB là ba số từ 0 đến 255 cho đỏ, lục, lam. Dòng HSL và HSV cùng bắt đầu bằng góc màu (221 độ là vùng xanh dương); theo trang công cụ, HSL dùng độ sáng (Lightness) còn HSV dùng độ rực (Value), HSL thường gặp trong CSS, HSV quen với bảng chọn màu của Photoshop. Dòng OKLCH là hệ màu mới trong CSS, chia độ sáng đều theo cảm nhận của mắt hơn HSL. Muốn hiểu vì sao sáu ký tự HEX lại ra ba số RGB, xem bài mã màu HEX là gì.
Bước 4. Sao chép dòng cần dùng
Bấm biểu tượng sao chép ở cuối dòng. Một thông báo "Đã sao chép ..." hiện ở đầu trang, ghi lại đúng chuỗi vừa chép, ví dụ cmyk(84%, 58%, 0%, 8%). Dòng cuối cho sẵn một khai báo biến CSS --color-primary: #2563EB; để dán thẳng vào :root.
Thông báo sau khi bấm sao chép dòng CMYK. Ảnh chụp màn hình: ColorME.
Đổi ngược: từ RGB, CMYK, HSL, OKLCH hoặc tên màu về HEX
Ô nhập không chỉ nhận HEX. Gõ rgb(37, 99, 235), cmyk(84%, 58%, 0%, 8%) hay một tên màu CSS như tomato, dòng HEX đổi theo.
Ba kiểu nhập khác: rgb(), cmyk() và tên màu. Ảnh chụp màn hình: ColorME.
Bảng dưới là các chuỗi chúng tôi đã gõ thử và dòng HEX nhận được:
| Gõ vào | HEX nhận được |
|---|---|
| rgb(37, 99, 235) | #2563EB |
| rgb(37 99 235) | #2563EB |
| rgba(37, 99, 235, 0.5) | #2563EB80 |
| hsl(221, 83%, 53%) | #2463EB |
| hsv(221, 84%, 92%) | #2664EB |
| cmyk(84%, 58%, 0%, 8%) | #2663EB |
| cmyk(84, 58, 0, 8) | #2663EB |
| oklch(54.6% 0.215 262.9) | #2563EB |
| royalblue | #4169E1 |
| tomato | #FF6347 |
| rebeccapurple | #663399 |
| transparent | #00000000 |
Tên màu CSS cũng được nhận: tomato là #FF6347. Ảnh chụp màn hình: ColorME.
Vì sao đổi đi rồi đổi lại, mã HEX lệch một đơn vị?
Nhìn lại bảng trên: gõ lại đúng dòng HSL của #2563EB thì nhận về #2463EB, gõ lại dòng CMYK thì nhận về #2663EB. Kênh đỏ lệch từ 37 thành 36 hoặc 38. Đây không phải lỗi: HSL và CMYK được hiển thị dưới dạng số nguyên, nên phần lẻ đã bị làm tròn trước khi đổi ngược. Dòng OKLCH có số lẻ nên đổi ngược về đúng #2563EB.
Bài học khi làm bộ nhận diện: chọn một mã gốc (thường là HEX), các định dạng khác luôn đổi từ mã gốc đó, đừng đổi nối tiếp từ định dạng này sang định dạng kia.
Màu có độ trong suốt
Gõ #2563EB80 (tám ký tự) hoặc rgba(37, 99, 235, 0.5): dòng HEX giữ #2563EB80, dòng RGB thành rgba(37, 99, 235, 0.5), ô màu nhạt đi một nửa. Các dòng HSL, HSV, CMYK và OKLCH không mang độ trong suốt, đúng như trang công cụ ghi: chỉ HEX và RGB giữ alpha.
Màu trong suốt 50%: HEX tám ký tự và rgba(). Ảnh chụp màn hình: ColorME.
Khi công cụ báo "Chưa nhận ra mã màu này"
Viền ô nhập chuyển đỏ và dòng gợi ý đổi thành "Chưa nhận ra mã màu này"; bảng kết quả vẫn giữ màu hợp lệ gần nhất, nên đừng chép nhầm. Các chuỗi bị từ chối trong lần thử của chúng tôi:
37, 99, 235: ba số trần, thiếurgb( ).#12345: HEX năm ký tự.xanh dương: tên màu tiếng Việt; chỉ tên màu CSS tiếng Anh được nhận.
Một trường hợp không báo lỗi: rgb(300, 0, 0) được kéo về rgb(255, 0, 0), tức #FF0000.
Chuỗi không hợp lệ: viền đỏ và dòng báo ngay dưới ô nhập. Ảnh chụp màn hình: ColorME.
Dải "Sáng hơn → tối hơn": lấy màu hover và màu nền từ một màu
Dưới ô màu là chín ô từ nhạt tới đậm, trong đó có chính màu bạn nhập. Với #2563EB, màu gốc nằm ở ô giữa và chín ô là #E6EFFF, #BED5FF, #91B7FF, #5F94FF, #2563EB, #1754DB, #0033B4, #001D7E, #000057. Bấm một ô, ô đó thành màu chính và cả bảng mã đổi theo.
Chọn màu từ dải sáng tối, rồi sao chép. Ảnh chụp màn hình: ColorME.
Màu gốc không phải lúc nào cũng ở ô giữa. Sau khi chọn một ô rất nhạt (#BED5FF), dải mới là #E6EFFF, #BED5FF, #A2B8E1, #8399C0, #697EA4, #506388, #35476A, #1C2D4E, #061432: màu vừa chọn đứng ở ô thứ hai, và dải vẫn đi đều từ sáng tới tối. Vì vậy hãy nhìn mã từng ô thay vì đếm vị trí.
Với màu chính rất nhạt, màu đó nằm ở ô thứ hai của dải. Ảnh chụp màn hình: ColorME.
Ví dụ dùng thật: lấy màu chính cho nút, ô đậm kế bên cho trạng thái rê chuột, ô nhạt nhất cho nền nút phụ. Hình dưới là một giao diện nhỏ chúng tôi tự dựng bằng đúng các mã công cụ trả về.
Chín mã từ dải sáng tối của #2563EB và một giao diện ví dụ tự dựng từ các mã đó (không phải ảnh chụp công cụ).
Trước khi đặt chữ lên các màu này, hãy đo độ tương phản bằng công cụ Kiểm tra tương phản. Nếu bạn chưa có mã màu mà chỉ có một tấm ảnh, xem cách lấy mã màu từ ảnh rồi quay lại đây để đổi định dạng.
Đổi RGB sang CMYK để in: dùng được tới đâu?
Dòng CMYK được tính bằng công thức số học. Với #2563EB: K = 1 − 235/255 ≈ 8%; C = (235 − 37)/235 ≈ 84%; M = (235 − 99)/235 ≈ 58%; Y = 0%. Công thức này không biết gì về giấy, mực hay máy in.
Trang công cụ nói rõ: đây là công thức chuyển đổi chuẩn, đủ để tham khảo và trao đổi; màu in thật còn phụ thuộc hồ sơ màu ICC, loại giấy và máy in của nhà in, nên hãy in thử trước khi in số lượng lớn. Vì vậy:
- Dùng số CMYK này để ước lượng, ghi chú trong bản mô tả màu, hoặc trao đổi nhanh.
- Với file in thật, đổi màu trong phần mềm dàn trang bằng hồ sơ màu nhà in yêu cầu, và so với bản in thử.
- Màu RGB rất rực (như xanh dương ví dụ ở đây) thường nằm ngoài vùng mực in tái tạo được, nên bản in sẽ trầm hơn màn hình.
Phần nền tảng có trong bài hai hệ màu CMYK và RGB và mục CMYK trong thư viện thuật ngữ.
Dùng trên điện thoại
Ở chiều rộng 390 px (giả lập điện thoại trong Chrome trên máy tính), ô nhập, ô màu, dải sáng tối và bảng mã xếp thành một cột; trang không bị cuộn ngang, nút sao chép vẫn hiện thông báo như trên máy tính. Chúng tôi chưa thử trên một chiếc điện thoại thật.
Giao diện ở chiều rộng 390 px. Ảnh chụp màn hình: ColorME.
Bảy dòng kết quả xếp dọc, mỗi dòng một nút sao chép. Ảnh chụp màn hình: ColorME.
Những gì chúng tôi chưa thử
- Bảng chọn màu của hệ điều hành mở ra từ nút Chọn màu: chúng tôi chỉ đổi giá trị của ô màu bằng lệnh (thành #16A34A, bảng mã đổi theo đúng), chưa thao tác tay trên bảng chọn.
- Dán vào Figma, Photoshop, Illustrator: chúng tôi kiểm tra chuỗi mà nút sao chép tạo ra, chưa dán thử vào từng phần mềm.
- Độ chính xác của CMYK trên bản in thật.
- Trình duyệt khác ngoài Chrome trên máy tính, và điện thoại thật.
Câu hỏi thường gặp
Đổi mã màu HEX sang RGB bằng tay thế nào?
Tách sáu ký tự thành ba cặp, mỗi cặp là một số hệ 16. Với #2563EB: 25 = 2 × 16 + 5 = 37; 63 = 6 × 16 + 3 = 99; EB = 14 × 16 + 11 = 235. Vậy RGB là (37, 99, 235), khớp với công cụ.
HSL và HSV khác nhau thế nào?
Theo trang công cụ, cả hai mô tả màu bằng sắc độ và độ bão hoà, nhưng HSL dùng độ sáng (Lightness) còn HSV dùng độ rực (Value). Cùng màu #2563EB, HSL là 221, 83%, 53% còn HSV là 221, 84%, 92%: đừng chép số của hệ này vào ô của hệ kia.
OKLCH là gì và khi nào nên dùng?
Theo trang công cụ, OKLCH là hệ màu mới trong CSS, chia độ sáng đều theo cảm nhận của mắt hơn HSL, tiện khi tạo bảng màu giao diện và đổi sáng tối mà màu không bị xỉn hay lệch sắc. Trình duyệt cũ có thể chưa hiểu oklch(), nên hãy kiểm tra đối tượng người dùng trước khi dùng trong CSS.
Công cụ có miễn phí không, có cần đăng nhập không?
Trang công cụ ghi: hoàn toàn miễn phí, không cần đăng nhập và không giới hạn số lần dùng. Toàn bộ các lần thử trong bài được làm khi chưa đăng nhập.
Mã màu tôi nhập có bị gửi đi đâu không?
Trang công cụ trả lời: "Việc chuyển đổi chạy ngay trên trình duyệt của bạn. ColorME chỉ ghi nhận lượt dùng kèm mã màu bạn đổi hoặc sao chép để thống kê, không cần tài khoản."
Vì sao cùng một màu mà mỗi trang đổi ra CMYK một khác?
Vì có nhiều cách đổi. Công thức số học như ở đây cho một bộ số; phần mềm dùng hồ sơ màu ICC cho bộ số khác tuỳ loại giấy và máy in. Không bộ nào "sai", nhưng chỉ bộ số đổi theo hồ sơ màu của nhà in mới dùng để in.
