Trình tạo bảng màu trực tuyến miễn phí

Cách sử dụng

• Chọn một chế độ phối màu (Analogous, Complementary, Triadic, v.v.) hoặc giữ ở Ngẫu nhiên.
• Nhấp Tạo mới hoặc nhấn Space để có bảng màu mới.
• Nhấp vào biểu tượng khóa để khóa một màu, màu đó sẽ giữ nguyên khi tạo lại.
• Nhấp vào mã HEX để sao chép vào bộ nhớ tạm.
• Dùng Sao chép CSS để lấy CSS custom properties hoặc tải xuống dưới dạng hình ảnh.

Lý thuyết màu và các chế độ phối màu

Trình tạo này hỗ trợ 7 chế độ phối màu dựa trên lý thuyết màu. Analogous các bảng màu dùng những màu cách nhau trong 30° trên vòng tròn màu · mang lại cảm giác êm dịu và gắn kết. Complementary các bảng màu ghép hai màu cách nhau 180° để tạo độ tương phản tối đa. Triadic các bảng màu dùng ba sắc màu cách đều nhau (120°) cho sự đa dạng rực rỡ. Split-Complementary lấy một màu gốc cùng hai màu liền kề với màu bổ túc của nó · nổi bật nhưng tinh tế hơn. Monochromatic các bảng màu chỉ thay đổi độ sáng và độ bão hòa của một sắc màu · thanh lịch và tối giản. Square dùng bốn màu cách nhau 90° để tạo bảng màu cân bằng và đa sắc.

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

Làm thế nào để dùng những màu này trong dự án của tôi?

Nhấp "Sao chép CSS" để lấy CSS custom properties sẵn sàng dán. Bạn cũng có thể nhấp từng mã HEX để sao chép, hoặc xuất toàn bộ bảng màu thành hình PNG để tham khảo trong các công cụ thiết kế như Figma hay Canva.

Một bảng màu nên có bao nhiêu màu?

Hầu hết các thiết kế hoạt động tốt nhất với 3-5 màu: một màu chính, một màu phụ, một màu nhấn, và 1-2 màu trung tính. Dùng nút "+ Thêm màu" để mở rộng bảng màu hoặc giảm màu bằng cách tạo với số lượng ít hơn.

Tôi có thể khóa những màu tôi thích không?

Có! Nhấp vào biểu tượng khóa trên bất kỳ ô màu nào. Khi bạn tạo bảng màu mới, các màu đã khóa vẫn giữ nguyên trong khi những màu chưa khóa sẽ được sinh ngẫu nhiên. Đây là cách tuyệt vời để xây dựng bảng màu quanh một màu thương hiệu cụ thể.

Các chế độ phối màu là gì?

Chế độ phối màu tạo bảng màu dựa trên các mối quan hệ trong lý thuyết màu. Analogous dùng các sắc màu gần nhau cho bảng màu nhẹ nhàng. Complementary dùng các sắc màu đối diện để tạo tương phản mạnh. Triadic, Split-Complementary và Square phân bố các sắc màu đều quanh vòng tròn màu. Monochromatic giữ một sắc màu và thay đổi độ sáng · hoàn hảo cho các thiết kế sạch và tối giản.

Bộ tạo bảng màu là gì?

Bộ tạo bảng màu chọn một tập hợp các màu sắc hoạt động cùng nhau về mặt hình ảnh, dựa trên các quy tắc của lý thuyết màu sắc. Bạn cung cấp cho nó một gợi ý ban đầu (màu cơ bản, chế độ hài hòa, hoặc ngẫu nhiên thuần túy), và nó trả về ba đến năm mã thập lục phân nằm ở các vị trí có chủ ý trên bánh xe màu. Đầu ra sẵn sàng để đưa vào các biến CSS, một tệp Figma, hướng dẫn thương hiệu, hoặc một bộ slide.

Các công cụ web hiện đại biểu thị màu sắc bằng hệ thập lục phân (#2b7190), RGB (43, 113, 144), HSL (199, 54%, 37%), hoặc OKLCH (51,3% 0,066 233,4). Hex là dễ dàng nhất để sao chép-dán; HSL là dễ dàng nhất để điều chỉnh bằng tay (giảm độ sáng cho biến thể tối hơn); OKLCH (được giới thiệu trong CSS Color 4, được hỗ trợ trong các trình duyệt từ năm 2023) đồng đều về mặt nhận thức, điều quan trọng đối với các token thiết kế. Công cụ này xuất hex theo mặc định và cho phép bạn sao chép các thuộc tính tùy chỉnh CSS cho các biến và các bước rông thân thiện với OKLCH.

Tất cả việc tạo ra diễn ra trong trình duyệt của bạn. Các chế độ hài hòa được tính toán từ màu cơ bản thông qua xoay tông màu HSL, sau đó được chuyển đổi trở lại hex. Nút khóa giữ các yêu thích của bạn trong khi phần còn lại của bảng màu được xáo trộn lại. Phím Space kích hoạt một lần tạo mới mà không cần rời khỏi trang, điều này làm cho việc khám phá nhanh chóng.

Bên trong bộ tạo có gì

Thanh trên cùng nhóm ba nút điều chỉnh thay đổi việc tạo: một nút Generate tạo ra một bảng màu mới, một menu thả xuống Mode với bảy quy tắc hài hòa (Ngẫu nhiên, Tương tự, Bổ sung, Tam giác, Bổ sung Chia, Đơn sắc, Vuông), và bộ chọn màu Base để gieo các chế độ không ngẫu nhiên. Nút Add Color mở rộng bảng màu vượt quá năm mẫu mặc định, hữu ích cho các hệ thống thiết kế cần nhiều tông màu hơn.

Mỗi mẫu hiển thị mã hex của nó trên một viên thuốc tối vẫn dễ đọc trên bất kỳ nền nào. Nhấp vào hex để sao chép nó. Nhấp vào khóa để đóng băng mẫu qua các lần tạo trong tương lai, và đây là cách bạn xây dựng một bảng màu xung quanh một màu thương hiệu: khóa thương hiệu, tạo lại, lấy ba người bạn phù hợp. Thanh hành động bên trong mỗi mẫu giữ các biểu tượng khóa, sao chép và xóa trong các mục tiêu cảm ứng 32 pixel để đáp ứng quy tắc target-size của Lighthouse.

Bên dưới bảng màu, khối xuất CSS Variables cập nhật trực tiếp với các màu hiện tại của bạn dưới dạng thuộc tính tùy chỉnh :root. Nút Export Image tuần tự hóa bảng màu thành PNG thông qua canvas ẩn, hữu ích để chia sẻ trong các đánh giá thiết kế hoặc ghim vào moodboard. Phím tắt Space tạo lại ngay lập tức, không cần thay đổi tiêu điểm.

Lịch sử và bối cảnh

Isaac Newton phân tách ánh sáng trắng (1666)

Thí nghiệm lăng kính của Isaac Newton năm 1666 tại Cambridge cho thấy ánh sáng trắng được cấu thành từ một quang phổ liên tục của các màu sắc. Trong Opticks (1704), ông đặt ra một bánh xe bảy màu với đỏ, cam, vàng, xanh lá cây, xanh dương, chàm và tím được định vị sao cho các màu đối diện theo đường kính tạo ra các phần bổ sung hài hòa. Mỗi bánh xe màu hiện đại đều bắt nguồn từ sơ đồ này.

Lý thuyết màu sắc của Goethe (1810)

Theory of Colours của Johann Wolfgang von Goethe (1810) đã định khung lại vật lý của Newton theo nhận thức của con người. Goethe là người đầu tiên mô tả một cách có hệ thống các hình ảnh dư, sự tương phản đồng thời, và sự ấm áp tâm lý của màu đỏ so với sự lạnh lẽo của màu xanh dương. Tác phẩm của ông ảnh hưởng đến Turner, Schopenhauer, và toàn bộ lĩnh vực tâm lý học màu sắc mà các trường nghệ thuật dạy ngày nay.

Johannes Itten chính thức hóa các quy tắc hài hòa (1961)

Johannes Itten, một giáo viên Bauhaus, đã xuất bản The Art of Color (Kunst der Farbe) vào năm 1961. Bánh xe màu mười hai nan và bảy sự tương phản (sắc thái, giá trị, nhiệt độ, bổ sung, đồng thời, độ bão hòa, mở rộng) đã trở thành chương trình giảng dạy tiêu chuẩn trong các trường nghệ thuật và thiết kế. Các chế độ hài hòa trong công cụ này (Tương tự, Bổ sung, Tam giác, Bổ sung Chia, Vuông) đến trực tiếp từ các chương của Itten.

Hệ thống Pantone Matching (1963)

Lawrence Herbert tại Pantone, một máy in thương mại M. Harris and Sons, đã ra mắt Hệ thống Pantone Matching vào năm 1963. Cuốn sách chip đã cung cấp cho các nhà thiết kế và máy in một tài liệu tham khảo số được chia sẻ, để một màu thương hiệu có thể tồn tại khi được tái tạo trên giấy, màn hình và vải. Color of the Year, bắt đầu vào năm 2000, hiện đang thúc đẩy các xu hướng bảng màu trong thời trang, nội thất và thiết kế web.

Bảng màu an toàn web và 216 màu (1996)

Khi các màn hình 8-bit thống trị web sớm, Lynda Weinman đã hệ thống hóa bảng màu an toàn web 216 màu vào năm 1996 để đảm bảo render nhất quán trên Mac và Windows. Bảng màu trở nên lỗi thời khi màu 24-bit trở nên phổ biến (khoảng năm 2000), nhưng cú pháp hex mà nó phổ biến hóa (#RRGGBB) vẫn là cách thống trị để viết màu trong CSS, HTML và các công cụ thiết kế.

OKLCH và màu đồng đều về mặt nhận thức (2020)

Bài báo OKLab năm 2020 của Bjoern Ottosson đã giới thiệu một không gian màu đồng đều về mặt nhận thức không có sự không nhất quán về độ sáng của HSL. CSS Color Level 4 (trình duyệt từ Chrome 111, Safari 15.4, Firefox 113) đã thêm cú pháp oklch(). Tương lai của các token thiết kế, độ tương phản màu dễ tiếp cận và việc tạo bảng màu ngày càng sống trong OKLCH vì sự đồng nhất nhận thức có nghĩa là hai màu có cùng giá trị L thực sự trông sáng bằng nhau.

Quy trình làm việc thực tế

Xây dựng nhận diện thương hiệu từ một màu

Đặt màu Base thành hex thương hiệu của bạn, khóa mẫu đầu tiên, chuyển chế độ sang Tương tự hoặc Bổ sung Chia, và nhấp Generate cho đến khi bốn màu đồng hành cảm thấy đúng. Sao chép các biến CSS và dán chúng vào các token hệ thống thiết kế của bạn. Kết quả là một bảng màu được neo vào thương hiệu của bạn với những hài hòa được hỗ trợ bởi lý thuyết.

Thiết kế các cặp chế độ tối

Chọn một bảng màu Đơn sắc với nền chế độ tối của bạn làm cơ sở. Năm mẫu cung cấp cho bạn nền, bề mặt, dải phân cách, văn bản phụ và văn bản chính trong độ sáng được phân cấp. Đối với chế độ sáng, tạo một bảng màu Đơn sắc riêng với một cơ sở sáng. Hai bảng màu được ghép thông qua prefers-color-scheme bao gồm hầu hết các nhu cầu chủ đề mà không cần điều chỉnh đặc biệt.

Chọn màu cho trực quan hóa dữ liệu

Đối với dữ liệu phân loại (biểu đồ cột, các phân đoạn bánh), các bảng màu Tam giác hoặc Vuông cung cấp cho bạn ba hoặc bốn sắc thái riêng biệt đọc riêng biệt trên một biểu đồ bận rộn. Đối với dữ liệu tuần tự (heatmap, bản đồ choropleth), sử dụng Đơn sắc để thay đổi độ sáng trong khi giữ sắc thái không đổi. Kiểm tra độ tương phản với nền biểu đồ; các công cụ trực quan hóa dữ liệu như Vega-Lite mong đợi ít nhất 3:1 giữa các danh mục liền kề.

Bản nháp bảng màu ưu tiên khả năng tiếp cận

Tạo một bảng màu, sau đó dán mỗi cặp vào một trình kiểm tra độ tương phản (WebAIM, Tanaguru). Đối với văn bản chính trên nền, bạn muốn ít nhất 4,5:1 (WCAG AA). Đối với văn bản lớn hoặc thành phần UI, 3:1 là ngưỡng. Nếu một bảng màu thất bại, tạo một bảng mới hoặc khóa mẫu thương hiệu và để những cái khác xáo trộn lại để tìm một bộ tuân thủ.

Khám phá moodboard

Nhấn Space lặp lại để chu kỳ qua hàng chục bảng màu ngẫu nhiên. Khi một cái thu hút mắt bạn, khóa mẫu tốt nhất, chuyển sang Tương tự và tiếp tục tạo để tìm các biến thể được xây dựng trên đó. Vòng phím cách nhanh hơn nhấp chuột, điều này cho phép bạn ở lại trong chế độ khám phá não phải mà không phá vỡ luồng.

Khớp màu in-sang-màn hình

Khi bạn có một tham chiếu in (một chip Pantone hoặc một mẫu vải), hãy dùng eyedrop để tìm tương đương kỹ thuật số gần nhất và sử dụng nó làm màu Base. Các chế độ hài hòa sau đó sẽ tỏa ra xung quanh tham chiếu của bạn. Hãy lưu ý rằng in là CMYK và màn hình là RGB, vì vậy một sự khớp chính xác là không thể; mục tiêu là một bảng màu đủ gần để đọc như cùng một thương hiệu.

Các cạm bẫy phổ biến

Độ tương phản WCAG không tự động

Một bảng màu đẹp về mặt lý thuyết vẫn có thể thất bại về khả năng tiếp cận. Các cặp pastel-trên-pastel (vàng nhạt trên hồng nhạt) trông dễ chịu nhưng có độ tương phản dưới 2:1. Luôn kiểm tra các cặp văn bản-trên-nền được đề xuất trong trình kiểm tra WCAG. Nếu bảng màu phải hoạt động cho văn bản chính, hãy xây dựng nó xung quanh yêu cầu độ tương phản trước, hài hòa thứ hai.

Mù màu ảnh hưởng đến 8% nam giới

Deuteranopia đỏ-xanh là dạng phổ biến nhất của thiếu hụt thị lực màu, ảnh hưởng đến khoảng 8% nam giới và 0,5% nữ giới. Một bảng màu Bổ sung đỏ-xanh trở thành một vết bẩn nâu duy nhất đối với người xem deuteranopic. Đối với màu phân loại (biểu đồ, huy hiệu trạng thái, đèn giao thông), kết hợp màu với hình dạng, nhãn hoặc mẫu, và kiểm tra trong một trình mô phỏng như Stark hoặc Sim Daltonism.

HSL không đồng đều về mặt nhận thức

Trong HSL, vàng ở độ sáng 50% trông sáng hơn nhiều so với xanh ở độ sáng 50%. Mô hình HSL xử lý tất cả các sắc thái số bằng nhau, nhưng mắt người thì không. Bộ tạo hoạt động trong HSL nội bộ cho xoay sắc thái, vì vậy hai mẫu với S và L tương tự vẫn có thể có trọng lượng nhận thức khác biệt rõ rệt. Đối với các bảng màu cân bằng về mặt nhận thức, chuyển sang các công cụ nhận thức OKLCH (Leonardo, Open Color).

Sự khác biệt gamut giữa sRGB và Display P3

Các màn hình Apple hiện đại (kể từ iMac 2015, MacBook Pro 2016, tất cả iPhone từ 7) sử dụng Display P3, gamut màu rộng hơn sRGB. Một màu đỏ bão hòa trông sống động trên Display P3 có thể trông xỉn màu khi cùng hex được render trên một màn hình chỉ-sRGB cũ hơn. Đối với các màu thương hiệu phải trông giống hệt nhau ở mọi nơi, ở lại trong gamut sRGB nhỏ hơn.

Mã hex không mang alpha theo mặc định

Hex ba chữ số (#abc) và sáu chữ số (#aabbcc) là không trong suốt. Hex tám chữ số (#aabbcc80, trong đó 80 là alpha 50%) được hỗ trợ trong CSS Color 4 và các trình duyệt hiện đại nhưng không phải trong các công cụ kế thừa. Nếu bạn cần độ trong suốt, hãy sử dụng rgba() hoặc hsla() thay thế, hoặc gắn bó với các màu không trong suốt và để độ mờ của cha mẹ xử lý việc trộn.

Sự trôi dạt hiệu chuẩn bộ chọn màu

Một màn hình không được hiệu chuẩn có thể trôi dạt vài đơn vị Delta-E khỏi tham chiếu, có nghĩa là một bảng màu trông sạch sẽ trên màn hình của bạn có thể trông bùn lầy hoặc quá bão hòa trên người khác. Đối với công việc quan trọng cho thương hiệu, hiệu chuẩn với thiết bị Spyder hoặc i1Display. Đối với hầu hết thiết kế web, sự biến động của màn hình là không thể tránh khỏi; chọn màu sắc hoạt động trên phạm vi trung bình.

Quyền riêng tư và xử lý dữ liệu

Mọi thứ chạy trong trình duyệt của bạn. Toán học hài hòa là JavaScript, xuất canvas là cục bộ, và API clipboard yêu cầu cử chỉ người dùng. Chúng tôi không gửi mã hex của bạn đến bất cứ đâu, không theo dõi những bảng màu bạn tạo, và không lưu trữ bất cứ điều gì trong cookie hoặc localStorage. Tải lại trang và bảng màu trước đã biến mất.

Sau khi trang được tải, trình tạo hoạt động ngoại tuyến. Bạn có thể sử dụng nó trên chuyến bay, bên trong proxy doanh nghiệp, hoặc trong môi trường không có mạng. Hành động duy nhất chạm vào mạng là Export Image tùy chọn, tải xuống thông qua một URL blob, và việc tải xuống chính nó không truyền màu sắc của bạn đến bất cứ đâu.

Khi không sử dụng trình tạo này

Thiết lập hệ thống thiết kế với token ngữ nghĩa

Hệ thống thiết kế cần token được đặt tên, ngữ nghĩa (color-primary-500, color-error, color-warning) với các giá trị chế độ sáng và tối được ghép đôi, đảm bảo độ tương phản và các bước thang đo được đặt tên. Sử dụng một công cụ chuyên dụng (Material Color Tool, Open Color, Leonardo by Adobe) hoặc hệ thống quản lý token (Style Dictionary, Tokens Studio). Trình tạo này dành cho khám phá, không phải thiết kế hệ thống.

Quản lý màu in (CMYK, Pantone)

Các phân tách màu CMYK cho in offset yêu cầu các công cụ chuyên nghiệp (bảng mẫu của Adobe Illustrator, Pantone Connect). Chuyển đổi RGB sang CMYK là có mất mát và các giới hạn phủ mực quan trọng. Nếu bảng màu của bạn sẽ được in ở quy mô lớn, hãy làm việc với thông số kỹ thuật màu của máy in ngay từ đầu, không phải một trình tạo hex chỉ-màn-hình.

Tạo bảng màu có thể tiếp cận cho văn bản chính

Đối với các bảng màu phải đảm bảo độ tương phản WCAG AA hoặc AAA trong mọi cặp, hãy sử dụng một công cụ ưu tiên độ tương phản như Tanaguru Contrast-Finder, Adobe Leonardo, hoặc các công cụ dựa trên APCA. Trình tạo này tuân theo các quy tắc hài hòa, không phải các quy tắc tương phản, vì vậy một bảng màu Tương tự đẹp có thể có cặp văn bản-đến-nền 1,5:1 thất bại về khả năng tiếp cận.

Hoạt ảnh và nội suy màu

Đối với các điểm dừng gradient hoặc hoạt ảnh màu, bạn cần một nội suy đồng đều về mặt nhận thức trong OKLCH hoặc LCH, không phải HSL thô hoặc hex. Nội suy gradient CSS mặc định là sRGB tạo ra các điểm giữa bùn lầy (điểm giữa xám nổi tiếng giữa vàng và xanh dương). Sử dụng các công cụ nội suy màu (chroma.js của Erin Kissane, oklch.com) cho các chuyển tiếp hoạt ảnh.

Các câu hỏi khác

Khi nào tôi nên sử dụng hex vs RGB vs HSL?

Hex là gọn gàng nhất và được sao chép nhiều nhất, tuyệt vời cho việc bàn giao thiết kế. RGB là dễ tính toán nhất trong code (mỗi kênh 0-255). HSL là dễ điều chỉnh bằng tay nhất: thay đổi sắc thái để dịch chuyển màu, độ sáng cho các biến thể. Đối với CSS hiện đại, OKLCH là tương lai-bảo đảm nhất cho hệ thống thiết kế vì nó đồng đều về mặt nhận thức.

Tôi nên chọn chế độ hài hòa nào?

Bắt đầu với Tương tự cho các bảng màu yên tĩnh, mạch lạc (giao diện, blog). Sử dụng Bổ sung cho các cặp call-to-action tương phản cao. Tam giác và Vuông cung cấp các bảng màu phân loại sống động cho biểu đồ hoặc các thương hiệu vui nhộn. Đơn sắc là tốt nhất cho chế độ tối và các hệ thống thiết kế tông màu. Bổ sung Chia là lựa chọn an toàn nhất "táo bạo nhưng không gây khó chịu".

Làm cách nào để kiểm tra khả năng tiếp cận?

Dán mỗi cặp văn bản-trên-nền vào WebAIM Contrast Checker, Tanaguru, hoặc APCA Contrast Tool. Nhắm tới ít nhất 4,5:1 (WCAG AA) cho văn bản chính, 3:1 cho văn bản lớn và các thành phần UI, 7:1 (WCAG AAA) cho các ứng dụng đọc nhiều văn xuôi. Kiểm tra với các trình mô phỏng mù màu (Stark, Sim Daltonism) cho việc sử dụng phân loại.

Tôi có thể xuất sang Figma hoặc Sketch không?

Copy CSS cho bạn các thuộc tính tùy chỉnh sẵn sàng để dán. Cả Figma và Sketch đều nhập mã hex trực tiếp qua bộ chọn màu của họ. Nút Export Image cung cấp cho bạn một PNG phù hợp cho moodboard hoặc ảnh chụp màn hình. Đối với xuất thân-thiện-token (định dạng W3C Design Token Community Group), sao chép mã hex và điều chỉnh chúng trong Tokens Studio hoặc Style Dictionary.

Một bảng màu nên có bao nhiêu màu?

Ba đến năm cho hầu hết các trang web và ứng dụng: một màu thương hiệu chính, một điểm nhấn hoặc thứ cấp, một màu trung tính cho văn bản, và một hoặc hai màu trung tính tiện ích (viền, nền). Các hệ thống thiết kế lớn hơn sử dụng 9 đến 12 token được đặt tên (chính, phụ, thành công, cảnh báo, lỗi, thông tin, cộng với các màu trung tính). Công cụ bắt đầu ở năm nhưng Add Color mở rộng nó.

OKLCH là gì và tôi có nên sử dụng nó không?

OKLCH là một không gian màu đồng đều về mặt nhận thức được thêm vào CSS năm 2023. Không giống như HSL, hai màu OKLCH có cùng giá trị L thực sự trông sáng bằng nhau. Đối với các hệ thống thiết kế và các thang đo tông màu nhất quán, đó là thực tiễn tốt nhất mới. Hỗ trợ trình duyệt là phổ biến trong các phiên bản hiện tại (Chrome 111+, Safari 15.4+, Firefox 113+). Đối với fallback duyên dáng trong các trình duyệt cũ hơn, vận chuyển một giá trị hex sRGB cùng với oklch().

Công cụ liên quan