Bộ chuyển đổi màu

Hiểu về các định dạng màu

Một bộ chuyển đổi xử lý HEX, RGB, HSL, HSV và CMYK đang chạm vào năm cách khá khác nhau để mô tả cùng một hiện tượng tri giác. Chúng được phát minh bởi những người khác nhau, trong những thập kỷ khác nhau, cho những máy móc khác nhau, và với những ưu tiên khác nhau. Trượt một giá trị từ một ký hiệu sang ký hiệu khác trông giống như số học tầm thường, và trên bề mặt thường là vậy, nhưng lịch sử giải thích tại sao mỗi ký hiệu tồn tại, và toán học giải thích tại sao chuyến đi vòng giữa chúng không phải lúc nào cũng không mất mát.

HEX, Cách viết tắt Cơ số 16 cho Bộ ba sRGB

Ký hiệu màu thập lục phân có trước CSS một số năm trên các máy trạm và trong các định dạng tệp đồ họa, nhưng ý nghĩa web phổ quát của nó đã được cố định bởi Khuyến nghị CSS1 mà W3C đã xuất bản vào ngày 17 tháng 12 năm 1996. CSS1 là tác phẩm của Håkon Wium Lie và Bert Bos: Lie đã đề xuất Cascading Style Sheets khi ở CERN vào tháng 10 năm 1994, và Bos tham gia dự án tại INRIA vào tháng 7 năm 1995. Trước CSS, HTML 1.0 không có khái niệm về màu sắc nào cả, bộ ban đầu gồm 18 thẻ của nó hoàn toàn là cấu trúc. Một màu hex là một số nguyên ba byte (hoặc bốn byte, với alpha) mà trình duyệt chia thành các kênh đỏ, xanh lá và xanh dương. Hình thức 6 chữ số #RRGGBB cho mỗi kênh một giá trị 8 bit, 0-255, được mã hóa trong hai chữ số hex. Cách viết tắt 3 chữ số #RGB hoàn toàn tương đương với hình thức 6 chữ số với mỗi chữ số được nhân đôi, vì vậy #F0A và #FF00AA là cùng một màu. CSS Color Module Level 4 đã chính thức thêm các hình thức 4 chữ số (#RGBA) và 8 chữ số (#RRGGBBAA) với kênh alpha, trong đó 00 là hoàn toàn trong suốt và FF là hoàn toàn mờ. Hỗ trợ trình duyệt đã đến trong Chrome 62, Firefox 49, Safari 10 và Edge 79, vì vậy tính đến năm 2026, nó về cơ bản là phổ quát. Hex phổ biến vì nó ngắn, có thể sao chép-dán, và không mơ hồ, background: #1e90ff tồn tại qua sao chép/dán giữa Figma, VS Code, Slack và email mà không cần ai phải suy nghĩ về khoảng trắng hoặc dấu phẩy.

RGB, Nguyên tắc Ba Màu của Maxwell, Được Số hóa

Ý tưởng "RGB", rằng bất kỳ màu nào mắt thấy đều có thể được khớp bằng cách trộn các lượng được kiểm soát của ba ánh sáng chính, có trước nhiếp ảnh màu. James Clerk Maxwell lần đầu đề xuất nó trong bài báo năm 1855 của ông "Experiments on Colour, as Perceived by the Eye, with Remarks on Colour Blindness," được trình bày tại Royal Society of Edinburgh. Sáu năm sau, vào ngày 17 tháng 5 năm 1861, Maxwell đã chứng minh nguyên tắc này công khai: ông yêu cầu nhiếp ảnh gia Thomas Sutton làm ba tấm phim đen trắng của một dải ruy băng tartan, mỗi tấm được chụp qua một bộ lọc đỏ, xanh lá hoặc xanh dương, và sau đó chiếu ba tấm phim đó trở lại qua cùng các bộ lọc lên một màn hình. Các phép chiếu chồng chéo tạo ra một hình ảnh có màu sắc có thể nhận biết, bức ảnh màu đầu tiên trên thế giới bằng tổng hợp cộng. RGB cộng của Maxwell đã trở thành nền tảng của mọi màn hình điện tử kể từ đó. RGB web hiện đại cụ thể có nghĩa là sRGB, không gian màu "chuẩn RGB" được Hewlett-Packard và Microsoft đề xuất vào năm 1996 (tác giả Michael Stokes và Ricardo Motta của HP, Matthew Anderson và Srinivasan Chandrasekar của Microsoft) và được chuẩn hóa thành IEC 61966-2-1:1999. Động cơ là tầm thường: web ban đầu cần một không gian màu đủ đơn giản để giả định theo mặc định, đủ mạnh mẽ để trông chấp nhận được trên các CRT rẻ tiền, và đủ nhỏ để không phình to các tệp hình ảnh. Hai mươi lăm năm sau, nó vẫn là không gian làm việc mặc định của mọi trình duyệt, mọi JPEG và mọi PNG không mang theo hồ sơ ICC nhúng. Trong CSS, RGB được viết rgb(255, 0, 153) (cú pháp dấu phẩy legacy) hoặc rgb(255 0 153) (hiện đại được phân tách bằng khoảng trắng, theo CSS Color Level 4).

HSL và HSV, Trục Tri giác của Alvy Ray Smith

RGB tuyệt vời cho phần cứng (một màn hình thực sự có các pixel phụ đỏ, xanh lá và xanh dương) và vô dụng cho trực giác con người. Không ai chỉnh sửa một thiết kế web bằng cách lý luận rằng họ muốn "thêm mười hai đơn vị xanh lá và bớt bảy đơn vị đỏ." Các nhà thiết kế suy nghĩ theo các thuật ngữ hue (màu nào), độ bão hòa (rực rỡ thế nào), và độ sáng (sáng thế nào). Phép chuyển đổi được chính thức hóa bởi Alvy Ray Smith trong bài báo SIGGRAPH năm 1978 của ông "Color Gamut Transform Pairs," được xuất bản trong số tháng 8 năm 1978 của Computer Graphics, trang 12-19. Smith đang ở Phòng thí nghiệm Đồ họa Máy tính của Học viện Công nghệ New York, trước đó đã làm việc tại Xerox PARC. Bài báo lưu ý rằng phép chuyển đổi RGB-to-HSV đã được "sử dụng thành công khoảng bốn năm" trong các chương trình vẽ frame-buffer vào thời điểm nó được xuất bản, Smith đang ghi lại thực hành làm việc, không phát minh từ đầu. Ông đã được đồng trao Giải thưởng Thành tựu Đồ họa Máy tính SIGGRAPH năm 1990 cho, trong số những điều khác, "mô hình không gian màu HSV (còn gọi là HSB)." HSL và HSV chia sẻ trục hue (một góc, 0°-360°, xung quanh một bánh xe màu: 0° đỏ, 120° xanh lá, 240° xanh dương) và một trục độ bão hòa (0% xám đến 100% thuần), nhưng chúng khác nhau trong trục thứ ba của chúng. HSV (Hue, Saturation, Value) coi V là cực đại của các kênh RGB, trắng thuần yêu cầu V=100% VÀ S=0%, đỏ thuần là V=100%, S=100%; cả trắng và đỏ đều sống ở đỉnh hình trụ. HSL (Hue, Saturation, Lightness) coi L là điểm giữa của các kênh sáng nhất và tối nhất, trắng thuần là L=100% bất kể S, đỏ thuần là L=50%, S=100%; trắng sống ở đỉnh hình trụ, các màu rực rỡ nhất sống ở xích đạo. HSL được chọn cụ thể cho CSS vì tính đối xứng của nó xung quanh L=50% phù hợp với cách các nhà thiết kế nghĩ về tints và shades.

CMYK, Mô hình Trừ của Thợ in

Trong khi các màn hình phát ra ánh sáng (cộng: nhiều hơn là sáng hơn, cả ba ở đầy đủ = trắng), mực hấp thụ ánh sáng (trừ: nhiều hơn là tối hơn, cả ba ở đầy đủ = đen, về lý thuyết). In quy trình bốn màu, xanh lơ, đỏ tươi, vàng, cộng với tấm "key" đen, lần đầu tiên được sử dụng thương mại vào những năm 1890 cho các minh họa báo màu. Công ty Mực In Eagle thường được ghi nhận với quy trình mực ướt bốn màu thực sự đầu tiên vào năm 1906. "K" đến từ "key" (tấm đăng ký tất cả các tấm khác, theo truyền thống là tấm chi tiết đen), không phải từ "black," đó là lý do tại sao mô hình là CMYK chứ không phải CMYB. Tấm key tồn tại vì bốn lý do thực tế: kết hợp 100% C, M và Y trong mực thực mang lại màu nâu đậm bùn lầy, không phải màu đen thực sự, vì các pigment thực sự không hoàn toàn tinh khiết; màu đen ba màu lãng phí mực và làm chậm việc làm khô; màu đen ba màu ướt khiến giấy cong và rách; và kiểu chữ và đường viền tinh tế cần một tấm tương phản cao duy nhất để có độ sắc nét.

Toán học Chuyển đổi, Tóm tắt

HEX ↔ RGB là tầm thường, chia chuỗi hex thành ba chuỗi con hai-ký tự và phân tích cú pháp mỗi cái như một số nguyên cơ số-16 với parseInt(hex, 16); đảo ngược với n.toString(16).padStart(2, '0'). RGB → HSL là toán học max/min: chroma = max(R,G,B) − min(R,G,B); độ sáng = (max + min) / 2; độ bão hòa = chroma / (1 − |2L − 1|); hue được tính qua một công thức từng đoạn chọn kênh trội và dịch vị trí của nó thành một góc trong một trong sáu cung 60° của vòng tròn hue. (Một số triển khai sử dụng atan2, nhưng bài báo của Smith năm 1978 cố ý tránh lượng giác vì lý do hiệu suất, atan2 là một lệnh đắt tiền trên một frame buffer của những năm 1970, và công thức từng đoạn đã ở lại vì nó cho câu trả lời như nhau nhanh hơn.) HSL → RGB đảo ngược quá trình thông qua một ánh xạ tuyến tính từng đoạn với chroma và một offset dịch bộ ba chroma đến điểm bên phải của trục độ sáng. RGB ↔ HSV sử dụng cùng khung xương nhưng với trục dọc khác: V = M thay vì L = (M+m)/2, và S = Δ/M thay vì ước số nhận biết độ sáng. RGB ↔ CMYK sử dụng công thức đơn giản K = 1 − max(R,G,B), sau đó C, M, Y là (1 − kênh − K) / (1 − K). Điều này tự nhất quán về mặt toán học nhưng không mô tả cách mà bất kỳ máy in thực sự nào sẽ tái tạo màu, hãy xem cảnh báo in dưới đây.

Vấn đề Chuyến đi Vòng

Chuyển đổi #7A3D5C (HEX) → HSL → HEX. Bạn sẽ không nhất thiết nhận được #7A3D5C trở lại. Lý do hoàn toàn tầm thường. Cắt số nguyên: các kênh HEX là số nguyên 0-255; chuyển đổi HSL tạo ra số thực; làm tròn (1, 121.987, 47.512) thành số nguyên mất thông tin sub-pixel mà chuyến đi vòng không thể khôi phục. Sự không chính xác Float64: kiểu số duy nhất của JavaScript là số thực nhị phân chính xác kép IEEE 754, với mantissa 52 bit cho khoảng 15-17 chữ số thập phân có nghĩa, đủ cho một lần chuyển đổi nhưng tích lũy nếu bạn xích nhiều phép toán. Bản đồ không đối xứng: nhiều bộ ba (R,G,B) khác nhau có thể ánh xạ tới cùng bộ ba (H,S,L) khi chroma là không (bất kỳ xám nào có hue không xác định; các quy ước chọn H = 0 hoặc giữ lại H trước đó). Đối với một công cụ trình duyệt thực dụng, điều này tốt, người dùng đã gõ #7A3D5C, thấy (322°, 32%, 36%) trong HSL, và nhận được #7A3D5C (hoặc #7A3E5D, sai một) trở lại. Miễn là swatch hiển thị khớp với những gì mắt mong đợi, chuyến đi là tốt. Nhưng đáng để trung thực: chuyến đi vòng không mất mát không được đảm bảo.

Không gian Màu CSS Hiện đại Ngoài sRGB

Trong nhiều thập kỷ, "màu web" có nghĩa là sRGB và chỉ sRGB. Giả định đó đã phá vỡ vào năm 2015, khi Apple xuất xưởng iMac cuối-2015 như "máy tính tiêu dùng đầu tiên với màn hình gamut rộng tích hợp" hỗ trợ không gian màu Display P3 của Apple. P3 bắt nguồn từ DCI-P3, được định nghĩa năm 2005 bởi Sáng kiến Điện ảnh Kỹ thuật số cho phép chiếu rạp. Biến thể Display P3 của Apple giữ các nguyên thủy của DCI nhưng chuyển điểm trắng sang D65 (phù hợp với sRGB) và áp dụng đường cong tái tạo tông của sRGB để làm cho nó phù hợp cho xem desktop/di động chứ không phải các rạp tối. Gamut của Display P3 lớn hơn khoảng 25% theo diện tích bề mặt so với sRGB và cho phép điện thoại và laptop hiển thị màu đỏ và xanh lá rực rỡ hơn đo lường được. Để cho phép CSS mô tả các màu bên ngoài sRGB, CSS Color Module Level 4 của W3C đã giới thiệu hàm color() với tham số không gian màu rõ ràng: color(srgb 1 0.5 0.2), color(display-p3 1 0.5 0.2), color(rec2020 1 0.5 0.2). Các không gian màu được định nghĩa trước bao gồm srgb, srgb-linear, display-p3, a98-rgb (Adobe RGB), prophoto-rgb, rec2020, xyz, xyz-d50 và xyz-d65. Trên màn hình sRGB bình thường, một màu P3 ngoài gamut được ánh xạ gamut xuống tương đương sRGB gần nhất mà màn hình có thể hiển thị.

CSS Color Level 4 cũng đã thêm các hàm hạng nhất lab(), lch(), oklab(), và oklch(). lab() và lch() sử dụng không gian màu CIE 1976 L*a*b*, được chuẩn hóa bởi Commission Internationale de l'Éclairage vào năm 1976, không gian màu đồng nhất về tri giác đầu tiên được triển khai rộng rãi, với các trục a* và b* tương ứng với các cặp đối kháng đỏ-xanh lá và xanh dương-vàng phù hợp với cách hệ thống thị giác con người thực sự mã hóa màu sắc. Vào tháng 12 năm 2020, nhà phát triển Thụy Điển Björn Ottosson đã xuất bản "A perceptual color space for image processing" trên blog của ông và giới thiệu Oklab. Ottosson đã dành nhiều năm trong ngành công nghiệp game làm các thao tác màu đơn giản và kết luận rằng mọi không gian màu hiện có đều thất bại tại chúng theo cách nào đó. Oklab được điều chỉnh cụ thể cho các hoạt động xử lý hình ảnh: các gradient giữa hai màu Oklab vẫn mượt mà về tri giác, và điều chỉnh độ sáng trong Oklab cảm thấy giống như điều chỉnh độ sáng đối với mắt người. Hình dạng hình trụ, OKLCH, là thứ mà hầu hết các nhà thiết kế thực sự viết. Oklab đã được thêm vào CSS Color Level 4 một năm sau bài blog, vào tháng 12 năm 2021, và bây giờ là không gian nội suy mặc định cho các gradient CSS trong các trình duyệt thực hiện Color Level 4. Bảng màu Tailwind CSS v4 được tạo từ các tọa độ OKLCH. Hàm color-mix() (CSS Color Module Level 5) được xuất xưởng trong Safari 16.2 (tháng 12 năm 2022), Chrome 111 (tháng 3 năm 2023) và Firefox 113 (tháng 5 năm 2023), làm cho nó có sẵn baseline trên các trình duyệt từ tháng 5 năm 2023.

Mini-Lịch sử Lý thuyết Màu sắc

Bộ chuyển đổi màu web nằm ở cuối một vòng cung 360 năm cố gắng hiểu màu sắc một cách hệ thống. Các cột mốc đáng chú ý: Newton (1665-66) đã sử dụng một lăng kính thủy tinh để phân tách ánh sáng mặt trời thành quang phổ nhìn thấy và xác định bảy màu sắc trong Opticks của ông. Goethe (1810) đã xuất bản Theory of Colours, một luận thuyết chống Newton quan tâm hơn đến các khía cạnh tri giác và cảm xúc của màu sắc hơn vật lý của nó, sai về khoa học nhưng đúng rằng tri giác quan trọng. Maxwell (1855/1861) như đã đề cập ở trên. Itten (1961) đã xuất bản The Art of Color tại Bauhaus, hệ thống hóa bánh xe màu 12-hue và bảy loại tương phản màu sắc vẫn được dạy trong các trường thiết kế ngày nay. Pantone (1963) đã giới thiệu Hệ thống Phối hợp Pantone (PMS), biến giao tiếp màu sắc giữa các nhà thiết kế và nhà in thành một danh mục được đánh số, một số Pantone có nghĩa là cùng một màu sắc tại bất kỳ máy in nào trên thế giới đăng ký hệ thống. Stack màu web kế thừa từ tất cả các truyền thống này: Newton cho chúng ta quang phổ nhìn thấy, Maxwell các nguyên thủy cộng, Itten từ vựng trường thiết kế của các sơ đồ bổ sung và tương tự, Pantone thực tế thực tế là một số có thể đại diện cho một trải nghiệm tri giác.

Khả năng tiếp cận: Tương phản WCAG trên Bất cứ điều gì Bạn Chọn

Khi bạn có một màu, bạn cần biết liệu bạn có thể đặt văn bản lên trên nó không. WCAG 2.1 Tiêu chí Thành công 1.4.3 (Tương phản, Tối thiểu) yêu cầu tỷ lệ tương phản 4.5:1 cho văn bản thông thường và 3:1 cho văn bản lớn (được định nghĩa là 18pt / 24 pixel CSS thông thường, hoặc 14pt / 19 pixel CSS đậm). Tỷ lệ tương phản được tính từ độ sáng tương đối: (L1 + 0.05) / (L2 + 0.05), trong đó L1 là độ sáng của màu sáng hơn và L2 là tối hơn, và độ sáng là tổng có trọng số của các kênh R, G, B được giải mã gamma với trọng số 0.2126, 0.7152 và 0.0722 (phù hợp với độ nhạy của mắt người với các bước sóng đó). WCAG 2.1 SC 1.4.6 (Nâng cao) nâng cao thanh lên 7:1 thông thường / 4.5:1 lớn cho sự tuân thủ AAA. WCAG 2.1 SC 1.4.11 bao gồm tương phản không phải văn bản (thành phần UI, chỉ báo focus, đối tượng đồ họa cần thiết để hiểu) ở 3:1. APCA mới hơn (Thuật toán Tương phản Tri giác Nâng cao) là một sự thay thế giai đoạn nghiên cứu phù hợp tốt hơn với tương phản được cảm nhận cho văn bản chính và đang được đánh giá cho WCAG 3, nó trả về một giá trị Lc có hướng trong đó ±60 là tương đương sơ bộ của 4.5:1 của WCAG. Luôn kiểm tra các cặp màu so với công thức tương phản thực tế, không phải bằng mắt của bạn; các nhà thiết kế liên tục đánh giá quá cao về khả năng dễ đọc của các cặp tương phản thấp.

Cảnh báo In Trung thực: CMYK Ngây thơ Không phải CMYK Thật

Công thức đơn giản K = 1 − max(R,G,B) mà mọi bộ chuyển đổi trình duyệt sử dụng là tự nhất quán về mặt toán học, chuyến đi vòng RGB → CMYK → RGB trả về cùng RGB chính xác, modulo floating-point. Nhưng nó không mô tả cách mà bất kỳ máy in thực sự nào sẽ tái tạo màu đó trên giấy. Một sự chuyển đổi RGB-sang-CMYK thực sự cần ba thứ mà công cụ này không thể cung cấp: một hồ sơ ICC mục tiêu (xác định sự kết hợp máy in + giấy, giấy phủ hấp thụ mực khác với không phủ, và các máy in thương mại cao cấp chạy các hồ sơ khác với máy in inkjet để bàn), một ý định kết xuất (tri giác, đo màu tương đối, độ bão hòa, đo màu tuyệt đối, chúng đánh đổi cách các màu ngoài gamut được ép vào), và một mô hình đo màu thực sự (CIE Lab như lớp trung gian độc lập-thiết bị, với các bảng tra cứu hồ sơ ICC đầy đủ ở mỗi bên). Đây là những gì Adobe Photoshop làm phía sau menu chuyển đổi CMYK của nó và những gì phần mềm prepress chuyên nghiệp (Esko, Heidelberg Prinect, Caldera) làm cho công việc sản xuất. Công thức ngây thơ tốt để hiểu mối quan hệ giữa các mô hình màu cộng và trừ, và hữu ích cho khám phá màu sắc đầu tiên, nhưng nếu bạn đang gửi tệp đến một máy in thương mại, hãy thực hiện chuyển đổi trong Photoshop (hoặc công cụ ưa thích của máy in của bạn) với hồ sơ ICC chính xác được tải, sự khác biệt nhìn thấy có thể đáng kể.

Màu Có tên và Câu chuyện rebeccapurple

CSS3 xuất xưởng 147 màu có tên (148 nếu bạn tính bí danh aqua = cyan), được kế thừa từ sự kết hợp của 16 màu có tên HTML 4 ban đầu và danh sách dài hơn của Hệ thống Cửa sổ X11. Màu có tên được thêm gần đây nhất có một câu chuyện. Vào ngày 7 tháng 6 năm 2014, con gái của người ủng hộ các tiêu chuẩn web Eric Meyer, Rebecca, đã qua đời vì một dạng ung thư não hung hãn một ngày sau sinh nhật thứ sáu của cô. Màu yêu thích của Rebecca là tím. Trong vài ngày, các thành viên của CSS Working Group, do biên tập viên Tab Atkins Jr. dẫn dắt, đã đề xuất thêm rebeccapurple (#663399) vào đặc tả CSS Color Level 4 như một màu có tên, để tưởng nhớ cô. Màu được thêm vào tháng 6 năm 2014 và được xuất xưởng trong các trình duyệt ngay sau đó. Giá trị hex được chọn cụ thể như giá trị mà chính Eric Meyer đã sử dụng trên trang web của mình. rebeccapurple bây giờ ở trong bảng màu-có-tên của mọi trình duyệt, màu tưởng niệm duy nhất trong đặc tả CSS, và một lời nhắc nhở rằng các đặc tả kỹ thuật khô khan của web được viết bởi những người chú ý khi một trong số họ đang đau buồn.

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

Định dạng nào để sử dụng trong CSS?

Cả ba đều hoạt động trong CSS hiện đại. HEX nhỏ gọn nhất và phổ biến nhất. RGB hữu ích khi bạn cần tính toán giá trị trong mã. HSL tốt nhất để tạo các biến thể màu · chỉ cần điều chỉnh độ sáng hoặc độ bão hòa trong khi giữ sắc thái.

Sự khác biệt giữa #FFF và #FFFFFF là gì?

Hex 3 chữ số là phím tắt trong đó mỗi chữ số được nhân đôi: #FFF = #FFFFFF, #09C = #0099CC. Cả hai đều hợp lệ trong CSS, nhưng 6 chữ số rõ ràng hơn và bao phủ tất cả 16 triệu màu.

Tôi có thể chuyển đổi màu với độ trong suốt (alpha) không?

Công cụ này chuyển đổi màu mờ. Đối với alpha, CSS hỗ trợ rgba(r,g,b,a) và hsla(h,s%,l%,a), cũng như hex 8 chữ số (#RRGGBBAA). Chúng tôi có thể thêm hỗ trợ alpha trong bản cập nhật trong tương lai.

Việc chuyển đổi CMYK của tôi có khớp với những gì ra khỏi máy in không?

Có lẽ không chính xác. Toán học đơn giản mà công cụ này sử dụng là tự nhất quán về đo màu (RGB → CMYK → RGB trả về cùng RGB) nhưng không tính đến hồ sơ ICC của sự kết hợp máy in + giấy cụ thể của bạn, ý định kết xuất (tri giác, đo màu tương đối, v.v.), hoặc đặc tính dot-gain của máy in. Đối với công việc liên quan đến in, hãy thực hiện chuyển đổi CMYK cuối cùng trong Photoshop hoặc công cụ ưa thích của máy in của bạn với hồ sơ ICC chính xác được tải, sự khác biệt nhìn thấy giữa một chuyển đổi ngây thơ và một chuyển đổi nhận biết hồ sơ có thể đáng kể, đặc biệt là đối với màu đỏ và xanh dương bão hòa ở rìa của gamut CMYK.

Còn OKLCH và các không gian màu CSS hiện đại thì sao?

CSS hiện đại hỗ trợ oklab(), oklch(), lab(), lch() và color(display-p3 ...) cho công việc màu gamut rộng hơn và đồng nhất về tri giác. Hỗ trợ trình duyệt cho những thứ đó là baseline từ khoảng năm 2023 (Safari 16.4, Chrome 111, Firefox 113 cho oklch(); color() với các không gian được đặt tên được xuất xưởng sớm hơn một chút trong Safari). Chúng chưa được hiển thị trong bộ chuyển đổi này, một phần vì toán học khó hiển thị ở dạng nhỏ gọn (Lab có các trục có dấu không ánh xạ tới thanh trượt 0-100%) và một phần vì hầu hết các quy trình làm việc sản xuất hiện tại vẫn nhắm mục tiêu sRGB. Nếu bạn đang làm việc trong một hệ thống thiết kế hiện đại sử dụng OKLCH (Tailwind CSS v4, ví dụ), hãy sử dụng công cụ của hệ thống đó để tạo màu; bộ chuyển đổi này là câu trả lời phù hợp cho công việc sRGB cũ.

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

Không. Chuyển đổi màu là số học thuần túy, không có gì máy chủ có thể làm mà trình duyệt của bạn không thể. Mỗi chuyển đổi chạy cục bộ trong JavaScript. Bạn có thể xác minh trong tab Network của DevTools khi bạn thay đổi màu: không có yêu cầu đi ra. Đưa trang offline (chế độ máy bay) sau khi nó tải xong và bộ chuyển đổi sẽ vẫn hoạt động.

Công cụ liên quan