Cách sử dụng

1. Nhấp vào bất cứ đâu trên bánh xe màu để chọn một màu, hoặc điều chỉnh các thanh trượt sắc thái, độ bão hòa và độ sáng.
2. Xem màu được chọn ở các định dạng HEX, RGB và HSL bên dưới bánh xe.
3. Nhấp vào một mẫu hài hòa để xem các lược đồ bổ sung, analog, tam giác và bổ sung phân chia.

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

Hài hòa màu sắc là gì?

Hài hòa màu sắc đề cập đến một sự sắp xếp dễ chịu của các màu sắc dựa trên vị trí của chúng trên bánh xe màu. Các hài hòa phổ biến bao gồm bổ sung (đối diện), analog (liền kề) và tam giác (cách đều nhau).

Sự khác biệt giữa HEX, RGB và HSL là gì?

HEX là mã thập lục phân 6 chữ số (#RRGGBB). RGB sử dụng các giá trị đỏ, xanh lá và xanh dương (0-255). HSL sử dụng sắc thái (0-360°), độ bão hòa (0-100%) và độ sáng (0-100%).

Tôi có thể sử dụng các màu này trong thiết kế của mình không?

Có! Sao chép bất kỳ giá trị nào và dán nó trực tiếp vào CSS, phần mềm thiết kế hoặc ứng dụng web của bạn. Tất cả các giá trị đều phù hợp với các tiêu chuẩn và được hỗ trợ rộng rãi.

Lịch Sử Ngắn Gọn Về Vòng Màu Sắc

Isaac Newton đã vẽ chiếc đầu tiên. Trong Opticks (1704), ông trình bày các thí nghiệm lăng kính mà ông đã lần đầu trình bày trước Hội Hoàng Gia vào năm 1672, chứng minh rằng ánh sáng trắng là hỗn hợp của các màu quang phổ, và sắp xếp quang phổ thành một vòng tròn khép kín để đầu đỏ có thể gặp đầu tím. Ông đặt tên bảy màu (đỏ, cam, vàng, xanh lá, xanh dương, chàm, tím) bằng cách tương tự với bảy nốt của thang âm nhạc diatonic, vì ông tin rằng màu sắc và hài hòa chia sẻ cấu trúc toán học. Chàm là màu tách biệt với xanh dương là nạn nhân nổi tiếng nhất của sự lựa chọn thẩm mỹ đó.

Theory of Colours (1810) của Goethe đã tái định khung vòng màu xung quanh nhận thức thay vì vật lý. Ông sắp xếp các màu đối xứng thành hai nửa «cộng» ấm và «trừ» lạnh và ghi nhận rằng các màu đối diện «qua lại gợi nhau trong mắt», một sự biểu đạt sớm của lý thuyết quá trình đối lập, tiên đoán định luật tương phản đồng thời mà Michel Eugène Chevreul sẽ công bố vào năm 1839 từ xưởng thảm Gobelins.

A Color Notation (1905) của Albert Munsell là vòng màu đầu tiên được cơ sở trên nhận thức con người được đo đạc thay vì quy ước, tách hue, value (độ sáng) và chroma (độ bão hòa) thành các chiều độc lập, tổ tiên trực tiếp của mọi không gian màu nhận thức hiện đại, bao gồm CIELAB và OKLCH. Vòng màu mà hầu hết designer được học ở trường còn trẻ hơn: Johannes Itten đã hệ thống hóa vòng màu RYB 12 màu tại Bauhaus từ năm 1919 đến 1922, xác định ba màu cơ bản (đỏ, vàng, xanh dương), ba màu thứ cấp, sáu màu cấp ba và bảy loại tương phản màu. Các vòng màu thực sự được dùng trên màn hình lại khác: HSL và HSV là các tái tham số hóa hình trụ của RGB được phát minh tại PARC và các phòng thí nghiệm đồ họa khác vào những năm 1970, để designer có thể nghĩ bằng ba thanh trượt trực quan («hue này, sống động hơn, sáng hơn») thay vì ba kênh RGB mờ đục. Bước gần đây nhất là OKLCH (Björn Ottosson, tháng 12 năm 2020), hiện có trong CSS Color Module Level 4, một vòng màu nơi các bước góc đều nhau trông như các bước hue nhận thức đều nhau.

Ba Họ Vòng Màu

«Vòng màu» che giấu thực tế rằng có ba loại khác nhau, mỗi loại đúng cho một tình huống vật lý khác nhau:

• RYB (đỏ, vàng, xanh dương), vòng màu giảng dạy nghệ thuật mà Itten phổ biến. Đây là quy ước dựa trên kinh nghiệm với sắc tố, không phải mô hình vật lý. Không có tổ hợp sơn đỏ, vàng và xanh dương nào có thể pha trộn được mọi màu hiển thị.
• RGB (đỏ, xanh lá, xanh dương) (cộng). Được dùng ở bất cứ nơi nào màu sắc được phát ra: màn hình, điện thoại, máy chiếu, đèn sân khấu. Được neo trong sinh lý học: võng mạc người có ba loại tế bào nón nhạy cảm với bước sóng dài, trung và ngắn. Trình duyệt và CSS hoạt động trong RGB, do đó vòng màu HSL của công cụ này là một tái tham số hóa cực của sRGB.
• CMY / CMYK (cyan, magenta, vàng + key/đen), trừ. Được dùng ở bất cứ nơi nào màu sắc được phản chiếu: in ấn, mực, nhuộm. Pha trộn làm giảm độ sáng; máy in thương mại thêm màu đen để có màu đen thực sự và tiết kiệm mực.

Hậu quả thực tế: các giá trị HEX, RGB và HSL xuất ra từ vòng màu này chính xác cho màn hình. Chúng không chính xác cho sơn, và một lần in CMYK sẽ cần chuyển đổi riêng, bước mà các nhà in thường xử lý cho bạn.

Cách HSL Ánh Xạ Lên Một Vòng Tròn

HSL là viết tắt của hue, saturation, lightness. Hue là một góc quanh trục trung tâm với đỏ ở 0°, xanh lá ở 120°, xanh dương ở 240°, quay trở lại đỏ ở 360°. Saturation chạy từ 0% (xám) đến 100% (sống động hoàn toàn). Lightness chạy từ 0% (đen) qua màu hue tự nhiên ở 50% đến trắng ở 100%. Về mặt hình học, mô hình là một bicone (hai nón đầu chạm nhau) với các màu bão hòa nhất ở đường xích đạo. HSV tương tự nhưng dùng Value thay vì Lightness, với các màu bão hòa đầy đủ ở V=100 và toàn bộ mô hình có dạng một nón đơn.

Hàm hsl() của CSS nhận ba số giống nhau. Cú pháp hiện đại cách nhau bằng khoảng trắng với alpha tùy chọn sau dấu gạch chéo:

hsl(210 80% 50%)
hsl(210 80% 50% / 0.5)
hsl(0.5turn 80% 50%)        /* turns also accepted */

Cú pháp kế thừa cách nhau bằng dấu phẩy hsl(210, 80%, 50%) và bí danh hsla() vẫn được hỗ trợ để tương thích ngược. CSS Color Module Level 4 đã được hỗ trợ rộng rãi trên các trình duyệt từ khoảng năm 2015 cho HSL cơ bản, với cú pháp hiện đại ra mắt sau.

Cảnh báo thành thật: HSL không đồng đều về mặt nhận thức. Màu vàng ở L=50% trông sáng hơn nhiều so với màu xanh ở L=50% mặc dù cả hai có cùng số lightness, và một vòng màu cắt theo hue ở S và L không đổi sẽ có màu vàng nặng về thị giác và màu xanh yếu. Đối với trực quan hóa dữ liệu và bảng màu thương hiệu được hiệu chỉnh cẩn thận, không gian màu oklch() mới là lựa chọn tốt hơn: các bước góc đều nhau trông như các bước hue nhận thức đều nhau. Để chọn màu và lấy HEX, HSL là đủ tốt.

Các Kết Hợp Màu Cổ Điển Và Toán Học

Mỗi sơ đồ hài hòa được định nghĩa bởi một tập hợp các độ lệch góc từ hue cơ sở. Gọi B là hue bạn đã chọn:

Sơ đồ	Màu Hue	Cảm giác
Đơn sắc	B (chỉ thay đổi S và L)	Tinh tế, ít tương phản, bình yên
Tương đồng	B − 30°, B, B + 30°	Phong phú, hài hòa, hoàng hôn, tán lá
Bổ sung	B, B + 180°	Năng động, thu hút sự chú ý
Bổ sung chia	B, B + 150°, B + 210°	Tương phản mạnh nhưng mềm hơn bổ sung thuần túy
Tam sắc	B, B + 120°, B + 240°	Tương phản sắc nét với sự cân bằng và phong phú
Tứ sắc (hình chữ nhật)	B, B + 60°, B + 180°, B + 240°	Hai cặp bổ sung, để một cặp chiếm ưu thế
Hình vuông	B, B + 90°, B + 180°, B + 270°	Chia đều bốn chiều, cân bằng khó hơn

Các góc này là quy ước giảng dạy kế thừa từ Goethe và Itten, không phải các định luật tâm sinh lý. Chúng tạo ra tương phản và sự cân bằng một cách đáng tin cậy, đó là lý do tại sao designer dùng chúng, nhưng chúng là heuristic chứ không phải quy tắc. Hãy coi các mẫu màu hài hòa ở trên là điểm khởi đầu để lặp lại từ đó.

Khi Nào Bạn Cần Vòng Màu

• Thiết kế web và UI. Chọn màu chính của thương hiệu, dẫn xuất màu bổ sung cho nhấn cảnh báo / call-to-action, dẫn xuất màu thứ ba theo tam sắc cho biểu đồ. Sau đó kiểm tra độ tương phản so với nền và văn bản.
• Nhận dạng thương hiệu. Màu logo cộng với bảng màu hài hòa được ghi lại cho tài liệu tiếp thị.
• Trực quan hóa dữ liệu. Bảng màu phân loại (10+ hue khác biệt ở khoảng cách nhận thức đều nhau) và thang màu tuần tự hoặc phân kỳ, tốt hơn khi làm trong OKLCH thay vì HSL khi vượt quá ba hoặc bốn chuỗi.
• Thiết kế nội thất. Màu tường cơ sở, màu viền tương đồng, màu nhấn bổ sung trong gối hoặc tranh.
• Phân loại màu nhiếp ảnh. Teal-và-cam (một cặp bổ sung) là sáo ngữ điện ảnh hiện đại vì tông màu da ấm trên bóng mát lạnh trông có vẻ điện ảnh.
• Nghệ thuật game và minh họa. Đánh dấu nhân vật theo hue so với môi trường, với màu nhấn bổ sung cho các điểm tiêu cự.

Mù Màu Và Vòng Màu Sắc

Khoảng 8% nam giới và 0,5% phụ nữ gốc Bắc Âu có một số dạng thiếu hụt thị giác màu sắc (tỷ lệ thay đổi theo dân số). Gen cho các tế bào nón L và M nằm trên nhiễm sắc thể X, đó là lý do tại sao tình trạng này phổ biến hơn nhiều ở nam giới. Một số kết hợp màu (đặc biệt là các cặp bổ sung đỏ/xanh lá) thu gọn thành gần như đơn sắc cho các dạng phổ biến nhất:

• Deuteranopia / deuteranomaly: tế bào nón bước sóng trung không hoạt động hoặc yếu. Dạng phổ biến nhất (khoảng 6% nam giới). Đỏ và xanh lá bị nhầm lẫn.
• Protanopia / protanomaly: tế bào nón bước sóng dài không hoạt động hoặc yếu (khoảng 2% nam giới). Đỏ trông tối hơn, đôi khi bị nhầm với đen.
• Tritanopia / tritanomaly: tế bào nón bước sóng ngắn không hoạt động hoặc yếu. Rất hiếm. Xanh dương và vàng bị nhầm lẫn.

Nguyên tắc «không dựa vào màu sắc đơn thuần» của WCAG 2.1 trực tiếp liên quan: không bao giờ dùng màu sắc như là phương tiện duy nhất mang thông tin. Thêm tương phản độ sáng bên cạnh tương phản hue, dùng các mẫu hoặc hình dạng cùng với màu sắc trong biểu đồ, và chạy bất kỳ kết hợp màu nào bạn tạo ra qua bộ mô phỏng mù màu trước khi xác nhận. Cũng kiểm tra độ tương phản WCAG, tối thiểu 4,5:1 cho văn bản thông thường ở AA, 7:1 ở AAA.

Câu Hỏi Thêm

Tại sao đỏ, vàng và xanh dương được gọi là màu «cơ bản»?

Trong truyền thống nghệ thuật / RYB (vòng màu Itten dạy tại Bauhaus), chúng là ba sắc tố từ đó mọi màu khác được cho là có thể pha trộn. Giả định đó là quy ước chứ không phải vật lý: không có tổ hợp sắc tố đỏ, vàng và xanh dương thực sự nào có thể pha trộn được mọi màu hiển thị. Trong ánh sáng cộng, các màu cơ bản thực sự là đỏ, xanh lá và xanh dương (RGB); trong in ấn trừ, chúng là cyan, magenta và vàng (CMY). RYB tồn tại trong giáo dục nghệ thuật vì nó đơn giản về mặt sư phạm và cho kết quả hợp lý khi pha trộn sơn thực tế.

16:9 có giống với tỷ lệ vàng cho màu sắc không?

Không, đó là hai khái niệm không liên quan. «Tỷ lệ vàng» xuất hiện trong tỷ lệ (hình chữ nhật, bố cục) và bằng khoảng 1,618. Các kết hợp màu trong lý thuyết màu xuất phát từ hình học góc trên vòng tròn hue: 180° cho bổ sung, 120° cho tam sắc, 90° cho hình vuông. Không có kết hợp tỷ lệ vàng nào được tích hợp trong giảng dạy vòng màu chuẩn.

Các màu tôi thấy ở đây có khớp với những gì được in ra không?

Gần như chắc chắn là không hoàn toàn. Vòng màu này là HSL trên nền sRGB, màu cộng, được thiết kế cho màn hình. In ấn là CMYK trừ. Màu xanh dương sống động và xanh lá sáng trông ổn trên màn hình thường bị giảm bão hòa đáng kể trên giấy, và các chuyển đổi ngoài gamut có thể làm dịch chuyển hue. Designer in ấn thường giữ bản in thử hiệu chuẩn trước mặt hoặc làm việc trực tiếp trong CMYK trong công cụ thiết kế. Dùng vòng màu này cho bản mock-up màn hình, sau đó chuyển đổi.

«Tâm lý học màu sắc» (đỏ = đam mê, xanh dương = bình tĩnh) có dựa trên bằng chứng thực tế không?

Nó có sức mạnh dân gian nhưng hỗ trợ thực nghiệm yếu và biến đổi theo văn hóa. Các nền văn hóa khác nhau liên kết cùng một màu sắc với các ý tưởng rất khác nhau (trắng là màu đám cưới ở Tây Âu và là màu tang lễ ở một số vùng Đông Á). Dùng tâm lý học màu sắc như điểm khởi đầu thiết kế và từ vựng để nói chuyện với khách hàng, không phải như một định luật.

Có dữ liệu nào được gửi đến máy chủ không?

Không. Vòng màu được kết xuất trong canvas HTML5; các góc hài hòa được tính toán cục bộ trong JavaScript; các chuỗi HEX, RGB và HSL được ghi vào clipboard của bạn qua API trình duyệt. Trang hoạt động offline sau khi đã tải.

Công cụ liên quan