Trộn màu

Trộn hai hoặc nhiều màu với trọng số có thể điều chỉnh. Xem màu kết quả ở dạng HEX, RGB và HSL.

Kết quả trộn

Cách hoạt động của việc trộn màu

Công cụ này sử dụng trộn cộng trong không gian màu RGB. Các thành phần RGB của mỗi màu được tính trung bình theo trọng số của chúng. Điều này mô phỏng cách ánh sáng trộn lẫn (như đèn chiếu chồng lên nhau), khác với trộn trừ (như trộn sơn).

Tôi có thể trộn nhiều hơn hai màu không?

Có! Nhấp «+ Thêm màu» để thêm tối đa 8 màu. Sử dụng các thanh trượt trọng số để kiểm soát đóng góp của mỗi màu vào hỗn hợp.

Cách sử dụng

  1. Chọn màu của bạn: sử dụng bộ chọn để chọn mỗi màu. Nhấp «+ Thêm màu» để thêm vị trí (tối đa 8).
  2. Điều chỉnh trọng số của mỗi màu: kéo thanh trượt dưới mỗi màu để kiểm soát đóng góp của nó vào hỗn hợp cuối cùng.
  3. Xem trước kết quả: màu được trộn được hiển thị trực tiếp với các giá trị hex, RGB và HSL của nó.
  4. Sao chép màu được trộn: nhấp để sao chép giá trị hex hoặc RGB thu được, để sử dụng trong thiết kế hoặc mã của bạn.

Tại sao sử dụng bộ trộn màu?

Trộn màu là một thao tác cơ bản trong thiết kế, tạo ra các sắc thái (bằng cách trộn với trắng), các nuance (với đen), các tông (với xám) hoặc các màu trung gian hài hòa giữa hai màu thương hiệu. Các nhà thiết kế sử dụng nó để tạo các biến thể bảng màu, tìm các tông trung gian cho các điểm gradient, đảm bảo tỷ lệ tương phản dễ tiếp cận giữa các màu liền kề và tạo các trạng thái di chuột/focus liên kết trực quan với màu cơ bản.

Ba điều mà mọi người ngụ ý khi nói "trộn màu"

Khi một người không chuyên nói "trộn hai màu," họ hầu như luôn có nghĩa là một trong ba thao tác hoàn toàn khác nhau. Chọn sai mô hình là nguồn nhầm lẫn lớn nhất trong các công cụ màu.

Trộn cộng là những gì xảy ra khi các chùm ánh sáng có màu chồng lên nhau. Hai đèn pin, một đỏ và một xanh lá cây, hướng vào cùng một mảng tường trắng, tạo ra một mảng màu vàng. Một chiếc đèn pin xanh dương thứ ba được thêm vào trên cùng tạo ra màu trắng. Mô hình trộn là "nhiều ánh sáng hơn = sáng hơn," và ba màu sơ cấp là đỏ, xanh lá cây và xanh dương vì các tế bào hình nón của con người có độ nhạy cảm cực đại xấp xỉ trong các dải đó. Mọi màn hình, điện thoại, monitor, ti vi, máy chiếu đều sử dụng trộn cộng. Mỗi pixel chứa ba pixel phụ (R, G, B), và đặt cả ba ở mức tối đa tạo ra màu trắng. Đây là lý do tại sao mô hình màu mặc định của web là RGB: phương tiện là phát quang, và toán học phù hợp với phương tiện.

Trộn trừ là những gì xảy ra khi các chất tạo màu hấp thụ các bước sóng từ ánh sáng trắng. Mực xanh lơ hấp thụ ánh sáng đỏ và phản xạ xanh lá cây và xanh dương. Mực vàng hấp thụ xanh dương và phản xạ đỏ và xanh lá cây. Lớp xanh lơ trên đầu vàng và các bước sóng duy nhất tồn tại qua cả hai bộ lọc là những bước sóng xanh lá cây. Mô hình là "nhiều sắc tố hơn = tối hơn," và ba màu sơ cấp trừ là xanh lơ, đỏ tươi và vàng. CMY về lý thuyết trộn thành đen ở cường độ đầy đủ, nhưng trong thực tế các sắc tố không hoàn hảo và kết quả là một màu nâu lầy lội, vì vậy in ấn thương mại đã thêm một mực đen riêng (K trong CMYK) cho màu đen thật. Một máy trộn màu chạy trên màn hình không thể thực sự thực hiện trộn trừ vì bản thân màn hình là cộng; nó chỉ có thể mô phỏng diện mạo.

Lý thuyết màu nghệ thuật truyền thống dạy chúng ta rằng các màu sơ cấp là đỏ, vàng và xanh dương. Truyền thống hội họa, và Lý thuyết Màu sắc năm 1810 của Goethe, và sách giáo khoa Bauhaus năm 1961 của Itten Nghệ thuật của Màu sắc, đã hệ thống hóa RYB như nền tảng của bảng màu nghệ sĩ. RYB không chính xác về mặt vật lý. Các sơ cấp trừ thực sự tối đa hóa gam màu là CMY, không phải RYB. Nhưng RYB đã tồn tại trong nhiều thế kỷ vì sơn thực sự không phải là bộ lọc trừ thuần khiết: một ống cadmi đỏ và một ống xanh lam ultramarine trộn thành một màu tím có thể nhận biết, và hệ thống "hoạt động" đủ tốt trên giá vẽ để dạy nhiều thế hệ sinh viên. Công cụ này là một máy trộn RGB cộng, đó là những gì web thực sự làm, vì vậy "đỏ cộng xanh lá cây" cho ra màu vàng, không phải màu nâu mà máy trộn sơn sẽ tạo ra.

Không gian màu, sRGB, Display P3, Rec. 2020, Adobe RGB

Một mô hình màu (RGB, CMYK, HSL) cho bạn biết bạn có những chiều nào. Một không gian màu cho bạn biết chính xác mỗi bộ ba số tương ứng với màu vật lý nào: nó xác định chính xác sắc độ của các sơ cấp, điểm trắng và hàm chuyển. Hai màn hình đều nói "RGB" có thể tạo ra màu đỏ nhìn thấy khác nhau cho cùng một mã nếu chúng nhắm đến các không gian màu khác nhau.

Không gian màu tri giác, và tại sao trộn trong sRGB cho ra điểm giữa lầy lội

Các tọa độ sRGB và HSL mà hầu hết các công cụ web lưu trữ và thao tác màu không đồng nhất về mặt tri giác. Một bước đơn vị trong kênh L của HSL không tương ứng với một bước đơn vị về việc màu trông sáng đến mức nào. Đây là lý do sâu xa tại sao việc trộn hai màu bằng cách trung bình các kênh của chúng cho ra kết quả không trực quan.

Ví dụ kinh điển: lấy đỏ thuần #ff0000 và xanh lá cây thuần #00ff00. Trung bình các kênh RGB theo từng thành phần: đỏ đi từ 255 xuống 127, xanh lá cây đi từ 0 lên 127, xanh dương vẫn ở 0. Kết quả là #7f7f00, một màu ô liu trông xỉn, tối và hơi đục. Nó không giống chút nào với màu vàng rực rỡ #ffff00 mà bạn sẽ nhận được nếu bạn thực sự chiếu đèn pin đỏ và xanh lá cây vào cùng một mảng tường. Hai vấn đề kết hợp giải thích điều này.

Thứ nhất, sRGB được mã hóa gamma. Con số được lưu trữ là 127 không đại diện cho một nửa ánh sáng mà 255 đại diện. Hàm chuyển là phi tuyến: 127 trong sRGB tương ứng với khoảng 21% cường độ ánh sáng tuyến tính, không phải 50%. Vì vậy khi bạn trung bình các giá trị được mã hóa gamma, bạn đang trung bình thứ gì đó giống như căn bậc hai của cường độ, không phải bản thân cường độ, và kết quả ra tối hơn nhiều so với mức cần thiết. Cách khắc phục chỉ riêng vấn đề đó là chuyển đổi sRGB sang linear-RGB trước khi trung bình, sau đó chuyển đổi lại. Với trung bình linear-RGB, đỏ cộng xanh lá cây chia cho hai trở thành màu vàng-xanh lá cây sáng hơn nhiều, đáng tin cậy hơn.

Thứ hai, ngay cả linear-RGB cũng không phù hợp với tri giác. Các bước bằng nhau trong linear-RGB vẫn không phải là các bước bằng nhau trong độ sáng hoặc sắc độ được cảm nhận. Điểm giữa của đỏ và xanh dương trong linear-RGB là một màu hoa oải hương không bão hòa, không phải là màu tím phong phú mà một nhà thiết kế mong đợi. Cách khắc phục vấn đề sâu hơn đó là trộn trong một không gian đồng nhất tri giác, Lab, Oklab, OKLCH. Chuyển đổi cả hai endpoint sang Oklab, nội suy tuyến tính các kênh L, a và b, chuyển đổi trở lại sRGB. Điểm giữa của đỏ và xanh lá cây trong Oklab là màu vàng sống động, đáng tin cậy. Điểm giữa của đỏ và xanh dương là màu đỏ tươi bão hòa. Điểm giữa của vàng và xanh dương là màu xám trung tính sạch sẽ thay vì màu xanh lá cây đầm lầy mà bạn nhận được từ RGB ngây thơ.

Công cụ này hiện trung bình trong sRGB được mã hóa gamma, mô hình đơn giản nhất và mô hình tạo ra những điểm giữa lầy lội đó. Nó đúng cho trường hợp đơn giản đó nhưng không khớp với những gì ánh sáng vật lý hoặc tri giác con người thực sự làm. Nếu bạn đang chọn các điểm dừng gradient hoặc tông màu trung gian của bảng màu và bạn không muốn cái bẫy xám lầy lội, hãy sử dụng hàm CSS color-mix() mới được mô tả bên dưới hoặc một trong các thư viện toán màu.

CIE Lab, Oklab, OKLCH, ngăn xếp tri giác

CIE Lab (cũng được viết CIELAB) được công bố bởi Ủy ban Chiếu sáng Quốc tế vào năm 1976. Nó có ba trục: L* cho độ sáng từ 0 (đen) đến 100 (trắng), a* cho trục sắc độ xanh-tới-đỏ, và b* cho trục sắc độ xanh-tới-vàng. Được thiết kế sao cho sự khác biệt số bằng nhau tương ứng với sự khác biệt được cảm nhận xấp xỉ bằng nhau. Trong nửa thế kỷ, nó là không gian tri giác chuẩn trong đồ họa, khoa học thị giác và quản lý màu. Điểm yếu đã biết: màu xanh dương trở nên tím không tự nhiên khi được nội suy; trục độ sáng không hoàn toàn theo dõi tri giác đối với các màu rất bão hòa.

CIE LCH chỉ là CIE Lab được biểu thị dưới dạng tọa độ cực: L cho độ sáng, C cho sắc độ (khoảng cách từ trục trung tính), H cho góc sắc thái. Hữu ích hơn các giá trị a*/b* thô cho các nhà thiết kế vì các thao tác như "dịch sắc thái 30 độ" hoặc "giảm sắc độ xuống 0" ánh xạ trực tiếp đến các mô hình tinh thần tự nhiên.

Oklab, bởi Björn Ottosson, được công bố vào tháng 12 năm 2020 trong một tiểu luận có tựa đề "A perceptual color space for image processing" trên bottosson.github.io. Ottosson là một kỹ sư Thụy Điển đã làm việc về màu trong ngành công nghiệp game. Oklab khắc phục hầu hết các thiếu sót đã biết của CIE Lab, đặc biệt là sự chuyển đổi xanh-tím trong nội suy và việc dự đoán quá mức sự khác biệt sắc độ trong các màu bão hòa. W3C đã chấp nhận Oklab vào CSS Color Module Level 4 trong vòng khoảng một năm sau bài đăng blog của Ottosson, một sự chuẩn hóa cực kỳ nhanh cho một không gian màu mới. Ngày nay, mọi trình duyệt chính đều hỗ trợ oklab() nguyên bản.

OKLCH là Oklab trong tọa độ trụ: L cho độ sáng 0 đến 1, C cho sắc độ 0 đến khoảng 0,4, H cho góc sắc thái 0 đến 360 độ. Nó đang trở thành không gian màu được khuyên dùng nhất cho các bảng màu hệ thống thiết kế chính xác vì các thao tác trên các trục của nó ánh xạ một cách rõ ràng đến trực giác của nhà thiết kế, và vì nội suy giữa hai màu OKLCH tạo ra các gradient mượt mà nhất, dễ chịu nhất của bất kỳ không gian nào hiện có sẵn trong CSS.

Hàm CSS color-mix(), trộn tri giác không cần JS

CSS Color Module Level 5 đã giới thiệu color-mix(), hàm này nhận hai màu, một không gian màu nội suy và trọng số tùy chọn, và trả về kết quả trộn được tính toán hoàn toàn bởi trình duyệt. Cú pháp là color-mix(in oklch, red 50%, blue 50%). Bạn có thể thay đổi không gian (in srgb, in oklab, in lch, in hsl longer hue, v.v.) và toán học chạy trong không gian đó. Hỗ trợ trình duyệt đến vào đầu năm 2023:

Một máy trộn màu không cần JavaScript, gốc CSS đã có sẵn rộng rãi trong hơn hai năm nay. Bất kỳ công cụ nào được xây dựng trên color-mix() đều có được kết quả chính xác về mặt tri giác "miễn phí," trình duyệt xử lý ngăn xếp chuyển đổi. Bản thân CSS Color Module Level 4 đã đạt trạng thái Candidate Recommendation vào năm 2022 và được hỗ trợ rộng rãi trên các trình duyệt hiện đại.

Thư viện JavaScript cho toán học màu

Ba thư viện thống trị khi bạn không thể hoặc không muốn dựa vào color-mix():

Một lịch sử ngắn về lý thuyết màu sắc

Lý thuyết màu sắc phương Tây bắt đầu với Isaac Newton vào năm 1665. Trong khi bị cách ly khỏi Cambridge trong dịch bệnh, Newton đã cho ánh sáng mặt trời đi qua một lăng kính và xác định bảy màu khác biệt (đỏ, cam, vàng, xanh lá cây, xanh dương, chàm, tím). Sau đó, ông sắp xếp chúng trên một vòng tròn khép kín, bánh xe màu của Newton, kết nối các cực phổ (tím và đỏ) thông qua một màu đỏ tươi không phải phổ. Bánh xe được công bố trong Opticks của ông vào năm 1704 nhưng được phát triển vào năm 1665-1666.

Johann Wolfgang von Goethe đã công bố Lý thuyết Màu sắc (Zur Farbenlehre) vào năm 1810. Trong khi Newton là một nhà vật lý học, Goethe là một nhà thơ điều tra tâm lý màu sắc: cách các màu cảm thấy, tương phản và kết hợp trong tâm trí của người xem. Công việc của ông sai về mặt khoa học trên nhiều điểm nhưng đã giới thiệu các ý tưởng về màu bổ sung, dư ảnh màu và đặc tính cảm xúc của bảng màu ấm và lạnh vẫn được dạy ngày nay.

Johannes Itten, một bậc thầy Bauhaus, đã xuất bản Nghệ thuật của Màu sắc (Kunst der Farbe) vào năm 1961. Bánh xe màu RYB mười hai nan của Itten và bảy độ tương phản màu của ông (sắc thái, sáng-tối, lạnh-ấm, bổ sung, đồng thời, bão hòa, mở rộng) trở thành khung giảng dạy chiếm ưu thế cho giáo dục thiết kế vào nửa sau của thế kỷ XX.

Pantone được tạo ra bởi Lawrence Herbert, người gia nhập Pantone Inc. với tư cách là nhân viên vào năm 1956 và mua công ty vào năm 1962. Vào năm 1963, ông đã ra mắt Pantone Matching System (PMS): một thư viện được chuẩn hóa của mực màu điểm được xác định bằng số, với các sách mẫu in cho phép một nhà thiết kế ở New York và một thợ in ở Hồng Kông chỉ định và tái tạo chính xác cùng một màu mà không có sự mơ hồ. Pantone không phải là một không gian màu theo nghĩa CIE kỹ thuật, đó là một danh mục độc quyền của các hỗn hợp mực vật lý, nhưng ảnh hưởng của nó đối với quy trình màu chuyên nghiệp là rất lớn.

HSL và HSV được giới thiệu bởi Alvy Ray Smith trong bài báo năm 1978 của ông "Color Gamut Transform Pairs," được công bố trong kỷ yếu SIGGRAPH khi ông ở Xerox PARC (Smith sau đó đồng sáng lập Pixar). Ông đang tìm kiếm tọa độ màu ánh xạ tự nhiên hơn đến trực giác của nghệ sĩ so với RGB. HSL trở thành mô hình màu "thân thiện với nhà thiết kế" mặc định trên web và vẫn là ký hiệu phi RGB được công nhận rộng rãi nhất trong CSS. Tuy nhiên, nó không đồng nhất về tri giác, OKLCH là người kế nhiệm hiện đại của nó.

Độ tương phản và khả năng truy cập, WCAG 1.4.3

Khi một nhà thiết kế trộn hai màu để tạo ra màu thứ ba, một trạng thái hover, một nền có sắc, một điểm dừng gradient, màu kết quả vẫn phải đáp ứng các yêu cầu tương phản đối với bất kỳ văn bản hoặc biểu tượng nào được đặt ở trên cùng. Tiêu chí thành công WCAG 2.x 1.4.3, "Tương phản (Tối thiểu)," yêu cầu:

Tỷ lệ tương phản được tính bằng cách sử dụng độ sáng tương đối, chuyển đổi linear-RGB được mô tả ở trên và tổng có trọng số của các kênh được tuyến tính hóa (L = 0,2126·R + 0,7152·G + 0,0722·B). Tỷ lệ giữa hai màu là (L_sáng_hơn + 0,05) / (L_tối_hơn + 0,05). Hàm ý thực tế: các điểm dừng trung gian dọc theo gradient có thể vượt qua kiểm tra tương phản ở endpoint nhưng thất bại đáng kể ở giữa. Nếu một thương hiệu trộn xanh navy đậm với vàng sáng để tạo ra trạng thái hover ô liu, ô liu đó có thể nằm trong vùng thất bại WCAG so với cả văn bản trắng và văn bản đen.

Câu hỏi khác

Tại sao đỏ cộng xanh lá cây không cho tôi màu nâu?

Bởi vì công cụ này, giống như mọi màn hình, sử dụng trộn RGB cộng, và ánh sáng đỏ cộng ánh sáng xanh lá cây cho màu vàng. Nâu là những gì bạn nhận được khi bạn trộn sơn đỏ và xanh lá cây, đó là trừ: mỗi sắc tố hấp thụ các bước sóng khác nhau và các bước sóng còn lại trông giống nâu. Để mô phỏng chính xác "trộn sơn" trên màn hình, bạn cần một mô hình phổ hoặc nhận thức sắc tố (Procreate và Adobe Fresco làm điều này cho các ứng dụng nghệ thuật); các máy trộn màu web chung, bao gồm cả cái này, là các máy trộn RGB cộng trung thực và sẽ cho bạn màu vàng, không phải nâu.

Các điểm giữa của tôi trông lầy lội, cách khắc phục là gì?

Hai lớp khắc phục. Bước tối thiểu chính xác là trộn ánh sáng tuyến tính: chuyển đổi sRGB sang linear-RGB trước khi trung bình, sau đó trở lại. Chỉ riêng điều đó làm cho đỏ+xanh lá cây→vàng trông sáng hơn nhiều và đáng tin cậy hơn. Khắc phục tri giác đầy đủ là trộn trong OKLCH hoặc Oklab, chuyển đổi cả hai endpoint sang OKLCH, nội suy, chuyển đổi trở lại. CSS color-mix(in oklch, red, green) của trình duyệt thực hiện chính xác điều này trong một dòng và hoạt động trên mọi trình duyệt được phát hành sau tháng 5 năm 2023. Đối với đường ống JavaScript, culori.js là thư viện tham chiếu.

Không gian màu phù hợp để trộn cho các bảng màu hệ thống thiết kế là gì?

OKLCH là câu trả lời đồng thuận hiện tại. Nó đồng nhất về tri giác, có các trục sạch khớp với trực giác của nhà thiết kế (độ sáng / sắc độ / sắc thái), tạo ra nội suy gradient không có điểm giữa lầy lội và được vận chuyển trong mọi trình duyệt hiện đại qua oklch() trong CSS Color 4 và color-mix(in oklch, ...) trong CSS Color 5. Các hệ thống thiết kế được xây dựng vào năm 2024-2026 ngày càng chuyển từ các bảng màu dựa trên HSL sang các bảng dựa trên OKLCH chính xác vì lý do này.

Màu trộn của tôi có vượt qua kiểm tra tương phản WCAG không?

Công cụ này hiện không hiển thị tỷ lệ tương phản của kết quả, nhưng bạn có thể tính nó: độ sáng WCAG là L = 0,2126·R + 0,7152·G + 0,0722·B sau khi tuyến tính hóa các kênh sRGB, và tỷ lệ tương phản giữa hai màu là (L_sáng_hơn + 0,05) / (L_tối_hơn + 0,05). Mục tiêu là 4,5:1 cho văn bản thường và 3:1 cho văn bản lớn hoặc các thành phần UI. Color Contrast Checker trong khu vực công cụ liên quan chạy phép tính này trực tiếp.

Công cụ liên quan

Trình tạo sắc thái

Tạo sắc thái và nuance.

Bộ chuyển đổi màu

Chuyển đổi giữa các định dạng màu.

Trình tạo bảng màu

Tạo các bảng màu.