Công Cụ Chuyển Đổi Màu Sắc

Cách Sử Dụng Công Cụ Chuyển Đổi Màu Sắc

1. 1. Nhập một màu. Dán hoặc gõ theo bất kỳ dạng nào ô nhập chấp nhận — #336699, rgb(51 102 153), hsl(210 50% 40%), hwb(210 20% 40%), cmyk(67%, 33%, 0%, 40%) hoặc tên CSS như rebeccapurple. Dãy 51 102 153 không kèm gì thêm được đọc là RGB.
2. 2. Hoặc dùng bộ chọn. Bộ chọn đặt màu và giữ nguyên độ trong suốt bạn đã nhập trước đó.
3. 3. Sao chép phần bạn cần. Mỗi hệ có nút sao chép riêng, và Sao chép CSS cho bạn các giá trị HEX, RGB, HSL và OKLCH dưới dạng thuộc tính tùy chỉnh cho một bảng định kiểu.
4. 4. Kiểm tra tên. Công cụ hiển thị từ khóa CSS khi màu của bạn trùng khớp chính xác (rebeccapurple là #663399), và hiển thị từ khóa gần nhất khi không trùng.

Các Phép Chuyển Đổi Hoạt Động Như Thế Nào

Mọi thứ đều được chuyển qua sRGB, không gian màu mà trình duyệt vẽ. Mã HEX chỉ là RGB ở cơ số 16: #336699 là đỏ 0x33 = 51, xanh lục 0x66 = 102, xanh dương 0x99 = 153. Các hệ khác sắp xếp lại đúng ba số đó.

• HSL mô tả màu bằng sắc độ (góc trên bánh xe màu, 0–360°), độ bão hòa và độ sáng. Với kênh lớn nhất max và kênh nhỏ nhất min (mỗi giá trị chia cho 255), độ sáng là (max + min) ÷ 2, và độ bão hòa là (max − min) ÷ (1 − |2L − 1|). Sắc độ lấy từ kênh nào lớn nhất.
• HSV (còn gọi là HSB) giữ nguyên sắc độ nhưng đo giá trị là max và độ bão hòa là (max − min) ÷ max. Đây là mô hình mà hầu hết bộ chọn màu hiển thị.
• HWB là độ trắng (min) và độ đen (1 − max) cộng với một sắc độ thuần; dễ suy luận hơn HSL khi bạn muốn một màu nhạt hoặc đậm. Nếu độ trắng cộng độ đen đạt 100%, kết quả là một màu xám.
• CMYK được hiển thị dưới dạng chuyển đổi thiết bị đơn giản: K = 1 − max, rồi mỗi C, M và Y là (1 − kênh − K) ÷ (1 − K). Không liên quan đến mực in, giấy hay hồ sơ màu nào.
• OKLCH là độ sáng, độ đậm sắc (chroma) và sắc độ trong không gian OKLab của Björn Ottosson, mà CSS Color 4 hỗ trợ dưới dạng oklch(). Các bước đều nhau theo L trông gần đều nhau về độ sáng hơn nhiều so với trong RGB hay HSL.

Vì Sao CMYK Ở Đây Không Phải Màu In

Màn hình cộng ánh sáng đỏ, xanh lục và xanh dương; máy in phủ mực lục lam, đỏ tươi, vàng và đen lên giấy. Hai gamut khác nhau, và màu mực trên trang phụ thuộc vào giấy, máy in và hồ sơ ICC mô tả chúng. Một công thức chỉ dựa trên RGB không thể biết những điều đó, nên CMYK ở trên là một cách ký hiệu chứ không phải dự đoán: xanh dương thuần trên màn hình #0000ff trở thành 100% lục lam và 100% đỏ tươi, khi in sẽ thành màu tím xỉn hơn. Với áp phích hoặc hình in, hãy gửi cho nhà in tệp thiết kế ở RGB và hỏi hồ sơ của họ, hoặc chuyển đổi bằng hồ sơ đó trong một ứng dụng thiết kế.

Làm Tròn, Giới Hạn và Độ Trong Suốt

• Làm tròn. HEX và rgb() chỉ giữ số nguyên từ 0 đến 255, nên một màu nhập là hsl(210 50% 41%) được làm tròn đến giá trị 8 bit gần nhất. Chuyển ngược giá trị đó sẽ cho HSL hơi khác — lưới 8 bit thô hơn lưới của HSL.
• Kênh ngoài phạm vi. Giá trị ngoài phạm vi được giới hạn, như trình duyệt vẫn làm: rgb(300 0 0) là #ff0000, và kênh âm thành 0.
• Đơn vị sắc độ. deg, grad, rad và turn đều được chấp nhận, và sắc độ được quấn vòng: −150° giống với 210°.
• Alpha. #rrggbbaa, #rgba và / 50% đều hoạt động. Alpha được lưu với 8 bit trong HEX 8 chữ số, nên 50% thành 80 và đọc lại là 50,2%.

Câu Hỏi Thường Gặp

Làm thế nào để chuyển HEX sang RGB?

Chia sáu chữ số thành ba cặp và đọc mỗi cặp như một số cơ số 16: #336699 là 33, 66 và 99, tức 51, 102 và 153. Dán mã HEX vào ô và giá trị RGB xuất hiện ngay, cùng với HSL, HWB, HSV, CMYK và OKLCH.

HSL và HSV khác nhau thế nào?

Cả hai dùng cùng góc sắc độ. HSL đặt màu trắng ở độ sáng tối đa bất kể độ bão hòa, nên phần giữa của nó là màu thuần; HSV đặt màu thuần ở giá trị và độ bão hòa tối đa, và màu trắng ở độ bão hòa bằng không. HSL là thứ CSS hỗ trợ dưới dạng hsl(), còn HSV (hay HSB) là thứ hầu hết bộ chọn màu hiển thị.

Giá trị CMYK có chính xác để in không?

Không. Đó là chuyển đổi đơn giản từ RGB, không có mực, giấy hay hồ sơ ICC, nên nó mô tả cùng các con số theo cách khác chứ không dự đoán máy in sẽ in ra gì. Màu nằm ngoài gamut của máy in, như xanh dương và xanh lục rực trên màn hình, sẽ in xỉn hơn. Hãy dùng hồ sơ của máy in cho mọi thứ quan trọng.

Tên CSS gần nhất nghĩa là gì?

CSS định nghĩa 148 từ khóa màu. Nếu màu của bạn trùng khớp chính xác với một trong số đó, công cụ hiển thị tên đó mà không cần điều kiện. Nếu không, nó hiển thị từ khóa gần nhất trong OKLab, một không gian được xây dựng sao cho khoảng cách khớp với sự khác biệt được cảm nhận — hữu ích để đặt tên màu trong một chú thích, không thay thế được mã màu.

Vì sao giá trị HSL của tôi thay đổi chút ít sau khi chuyển đi rồi chuyển lại?

HEX và RGB lưu mỗi kênh là một trong 256 giá trị, và HSL không ánh xạ một-một lên lưới đó. Màu nhập bằng HSL được làm tròn đến giá trị RGB gần nhất, và HSL hiển thị được tính từ giá trị đã làm tròn. Bắt đầu từ mã HEX, mọi phép chuyển đổi đều chính xác đến độ chính xác đã hiển thị.

Dữ liệu màu của tôi có được gửi đi đâu không?

Không. Phép chuyển đổi là số học thuần túy trong trình duyệt của bạn; không có gì bạn gõ được tải lên hay lưu lại.