HEX, RGB và HSL: chọn định dạng màu web

Mọi màu trong các ký hiệu này là cùng màu sRGB mặc áo khác. HEX là RGB viết ở cơ số mười sáu: #4F46E5 là kênh đỏ, lục và lam mỗi kênh hai chữ số hex. rgb(79, 70, 229) phát biểu cùng ba kênh ở thập phân, và hsl() mô tả cùng pixel đó như một vị trí trên bánh xe màu.

HEX và rgb() có thể biểu diễn chính xác cùng các kênh sRGB tám bit. hsl() cũng mô tả màu đó, nhưng làm tròn sắc độ, độ bão hòa hoặc độ sáng có thể làm lệch kết quả chuyển đổi qua lại.

• HEXHEX gọn và ổn định để sao chép-dán giữa công cụ thiết kế và mã, và đó là lý do bảng màu cùng style guide thường xuất bản dạng hex.
• RGBRGB đọc như ba cường độ kênh từ 0 đến 255 và khớp cách màn hình cùng định dạng ảnh thực sự lưu pixel.
• HSLHSL đọc như hue, saturation và lightness — gần cách con người mô tả màu hơn, và dễ điều chỉnh theo ý đồ hơn nhiều.

Độ trong suốt gắn thêm vào mọi ký hiệu. rgb() và hsl() nhận tham số thứ tư — rgba(79, 70, 229, 0.5) — và HEX có thêm dạng tám chữ số, #4F46E580, trong đó cặp cuối là alpha từ 00 đến FF.

• 0–1 hoặc 00–FFAlpha trong cú pháp hàm có giá trị 0 đến 1; hex tám chữ số dùng 00 đến FF. Byte 80 bằng 128/255, xấp xỉ 0,502: gần 0,5 nhưng không hoàn toàn bằng.
• Thử trên bề mặtLớp phủ trong suốt được tổng hợp với nền theo alpha của nó; hãy thử trên mọi bề mặt sẽ sử dụng.
• Token liên hệKhi hệ thống thiết kế phát hành phiên bản đặc và bán trong suốt của cùng một hue, một hex tám chữ số giữ chúng liên hệ rõ ràng với nhau.

Chỉnh kênh RGB trực tiếp là số học; chỉnh ý đồ dễ hơn trong HSL. Tint là cùng hue với lightness cao hơn, shade là cùng hue với ít hơn, và biến thể dịu là cùng hue với saturation vặn xuống — ba thao tác một núm thay vì ba kênh trôi cùng nhau.

Color Shades Generator pha màu hex về phía đen và trắng để tạo từ ba đến hai mươi bước có trọng số. Các bước này không đồng đều về cảm nhận thị giác; hãy kiểm tra từng màu trong giao diện thực tế.

• Tint và shadeTint và shade: giữ hue và saturation, quét lightness từ gần trắng tới gần đen, và bạn có dải dùng được cho nền, trạng thái và chữ.
• Trạng thái saturationBiến thể dịu và rực đến từ riêng núm saturation, và đó là cách trạng thái hover và disabled ở trong cùng một họ.
• Xoay hueXoay hue tạo màu liên hệ: láng giềng tương tự nằm trong khoảng ba mươi độ, màu bù cách một trăm tám mươi độ.

Hài hòa màu là hình học trên bánh xe hue: cặp bù nằm đối diện, bộ ba chia bánh xe thành ba phần, nhóm tương tự tụ lại. HSL làm phép toán hiện rõ — đổi một số và cả sơ đồ dịch chuyển.

Color Harmony Builder áp dụng đúng mô hình đó. Từ một hex hạt giống sáu chữ số, nó tạo bảng năm màu theo sáu sơ đồ kinh điển — tương tự, bù, bù tách, tam hợp, tứ hợp và đơn sắc — và kiểm tra độ tương phản từng mẫu với chữ đen và trắng ở ngưỡng tỷ lệ WCAG 3, 4.5 hoặc 7.

Có thể xuất kết quả thành thuộc tính CSS và JSON. Để tái tạo năm màu, hãy chia sẻ màu gốc và sơ đồ; thêm ngưỡng tương phản nếu cần giữ nguyên nhãn đạt hoặc không đạt.

CSS hiện đại hợp nhất các dạng hàm cũ: kênh cách nhau bằng khoảng trắng với dấu gạch chéo tùy chọn cho alpha — rgb(79 70 229 / 0.5) — thay rgba() đầy dấu phẩy. Đặc tả level 4 còn thêm các ký hiệu như hwb(), lab() và oklch() cho gamut rộng hơn và dải đều về cảm nhận.

Color Mixer nhận màu hex được hỗ trợ, cho phép nội suy có tính alpha hoặc tổng hợp source-over, rồi hiển thị kết quả ở dạng hex và RGBA. Chọn phép xử lý và tỷ trọng trước khi so sánh hai màu.

Ô nhập chỉ nhận văn bản hex, không nhận mọi biểu thức màu CSS. Hãy chuyển rgb() hoặc hsl() sang dạng hex được hỗ trợ trước khi dùng.

• Cú pháp mớiKênh cách khoảng trắng với alpha gạch chéo hợp lệ trong mọi trình duyệt hiện tại; dạng dấu phẩy vẫn được hỗ trợ như bí danh legacy.
• Vì sao OKLCHoklch() sửa một lỗi thật của HSL: bước lightness bằng nhau trong HSL không trông sáng bằng nhau qua các hue, trong khi OKLCH giữ lightness cảm nhận nhất quán.
• Áp dụng có chủ đíchÁp dụng ký hiệu mới ở nơi chúng giải quyết vấn đề — dải nhất quán, màn hình gamut rộng — và giữ hex hoặc rgb() nơi công cụ và thói quen đã ổn.

Bảng màu thường bắt đầu từ ảnh chụp màn hình, logo hoặc ảnh. Lấy mẫu pixel đã giải mã trong trình duyệt cho phép đo hữu ích, nhưng có thể khác giá trị mã hóa trong tệp gốc.

Image Color Picker mở PNG, JPEG hoặc WebP và báo giá trị RGBA mà Canvas lấy mẫu từ pixel đã giải mã. Giá trị đó có thể chịu ảnh hưởng của giải mã và chuyển đổi màu; đừng xem nó là byte gốc của tệp.

Mọi thứ chạy cục bộ: hình ảnh được giải mã trong trình duyệt của bạn và không bao giờ tải lên, điều quan trọng khi artwork là thiết kế chưa công bố. Mang giá trị đã chọn sang công cụ shade hay harmony và cả chuỗi từ artwork tới bảng màu ở lại trên thiết bị của bạn.