Đỏ ớt - vàng nghệ
Nhà hàng & quán ăn
Xem trướcNút hành độngchữ trên nút 5.8:1
Đang tải…
16 bảng màu chọn sẵn theo ngành (ẩm thực, cà phê, giáo dục, công nghệ, y tế, làm đẹp, thời trang, tài chính, bất động sản, du lịch, thể thao, mẹ và bé, nông sản, nội thất, xe cộ, thương mại điện tử), mỗi bảng ghi rõ vì sao ngành đó hợp bộ màu ấy và cách chia tỉ lệ khi dựng trang. Kèm công cụ tự sinh dải sắc độ, bộ hòa sắc và gradient từ màu của bạn. Bấm vào ô màu là sao chép mã HEX; mọi cặp chữ trên nền ở đây đều đã đạt chuẩn tương phản WCAG AA. Công cụ chạy ngay trong trình duyệt, không gửi gì lên máy chủ.
16 bộ màu chọn sẵn cho các ngành hay chạy quảng cáo tại Việt Nam. Mỗi bộ ghi rõ vì sao ngành đó hợp màu đó và cách chia tỉ lệ khi dựng trang. Bấm vào ô màu là sao chép mã, hoặc sao chép cả bộ dưới dạng CSS/Tailwind/JSON.
Đang hiện 16 bảng màu
Nhà hàng & quán ăn
Cà phê & trà
Nông sản & thực phẩm hữu cơ
Giáo dục & khóa học online
Công nghệ & SaaS
Y tế & sức khỏe
Làm đẹp & mỹ phẩm
Thời trang
Tài chính & ngân hàng
Bất động sản
Du lịch & nghỉ dưỡng
Thể thao & phòng gym
Mẹ & bé
Nội thất & trang trí
Ô tô & xe máy
Thương mại điện tử
Đã có màu thương hiệu rồi thì không cần chọn bộ khác - chỉ cần dựng dải sắc độ và bộ hòa sắc quanh chính màu đó. Dán mã màu vào ô dưới, mọi thứ tính ngay trong máy bạn.
H 356° · S 83% · L 58%
Giữ nguyên góc màu H và độ tươi S, chỉ thay đổi độ sáng L đều tay từ 96% xuống 8%. Đây chính là cách sinh bộ 50-900 của một màu thương hiệu: bậc sáng làm nền khối và nền nhãn, bậc giữa làm nút, bậc tối làm chữ và trạng thái di chuột.
Tất cả sinh bằng cách xoay góc H trên vòng tròn màu và giữ nguyên S/L - nhờ giữ nguyên độ tươi và độ sáng nên các màu đứng cạnh nhau không chỏi, đó là toàn bộ bí mật của việc phối màu bằng công thức.
Tương đồng (xoay -30 và +30 độ)
Ba màu nằm cạnh nhau trên vòng tròn - êm mắt, hợp làm nền và minh họa, nhưng yếu khi cần nút nổi bật.
Bổ túc (xoay 180 độ)
Màu đối diện - tương phản mạnh nhất, dùng cho nút hành động chính. Chỉ nên chiếm dưới 10% diện tích.
Tam giác (xoay 120 và 240 độ)
Ba màu chia đều vòng tròn - cân bằng và sinh động, hợp infographic, biểu đồ, trang cho trẻ em.
Bổ túc xen kẽ (xoay 150 và 210 độ)
Mạnh gần bằng bổ túc nhưng dễ chịu hơn vì tránh cặp đối đầu trực diện - lựa chọn an toàn khi mới bắt đầu.
Gradient dễ nhìn có công thức: hai màu cách nhau không quá một phần tư vòng tròn màu (dưới 90 độ) và chênh độ sáng vừa phải. Hai màu đối diện nhau sẽ đi qua vùng xám đục ở giữa, còn chênh sáng quá lớn làm dải chuyển bị gãy khúc.
Hai màu lệch nhau 19° trên vòng tròn màu, chênh 6% độ sáng. Trong ngưỡng dễ nhìn.
background: linear-gradient(135deg, #ED3C47 0%, #FF7849 100%);Bắt đầu từ liên tưởng sẵn có của khách trong ngành đó rồi mới tính đến sở thích cá nhân: ăn uống hợp đỏ và cam vì gợi thức ăn chín và tạo cảm giác khẩn trương; tài chính, y tế và giáo dục hợp xanh dương vì gợi tin cậy và ổn định; nông sản, thực phẩm sạch hợp xanh lá vì gợi tự nhiên. Sau khi chọn được màu chủ đạo, hãy thêm đúng một màu nhấn tương phản cao cho nút hành động và một dải trung tính cho chữ với nền - ba nhóm đó đủ dựng cả website, thêm màu thứ tư thường chỉ làm trang rối.
Đây là cách chia tỉ lệ diện tích: khoảng 60% là màu nền chủ đạo (thường là trắng hoặc một sắc rất nhạt), 30% là màu phụ trợ cho các khối và ảnh, 10% còn lại là màu nhấn dồn vào nút hành động, giá khuyến mãi và nhãn quan trọng. Tỉ lệ này giữ cho mắt có chỗ nghỉ và làm màu nhấn thật sự nổi. Nếu màu nhấn bị dùng tràn lan ở mọi khối thì nó không còn nhấn được gì nữa - đó là lỗi phổ biến nhất khi tự phối màu.
Mắt người quét trang theo độ tương phản trước khi đọc chữ, nên thứ tương phản mạnh nhất với xung quanh sẽ được nhìn thấy đầu tiên. Nút mua hàng hay đăng ký cần đúng vị trí đó. Trong thực tế nghĩa là: nút dùng màu khác hẳn nền, không đặt hai nút cùng độ nổi cạnh nhau (nút phụ nên là viền hoặc chữ), và chữ trên nút phải đạt tối thiểu 4,5:1 so với nền nút. Một nút đẹp mà chữ mờ sẽ mất lượt bấm nhiều hơn là một nút xấu mà rõ ràng.
WCAG là bộ tiêu chuẩn về khả năng tiếp cận nội dung web; mức AA yêu cầu chữ thường đạt tỉ lệ tương phản tối thiểu 4,5:1 so với nền, chữ lớn từ khoảng 24px hoặc 19px in đậm thì 3:1, mức AAA khắt khe hơn là 7:1. Không chỉ để phục vụ người khiếm thị: người dùng điện thoại ngoài nắng, màn hình cũ hay mắt mỏi buổi tối đều đọc dễ hơn khi đạt chuẩn. Đây cũng là hạng mục bị chấm trong báo cáo Lighthouse phần Accessibility, thứ ảnh hưởng gián tiếp tới trải nghiệm mà công cụ tìm kiếm đánh giá. Mọi bảng màu trên trang này đều hiện sẵn tỉ lệ chữ trên nền để bạn khỏi phải tự đo.
Không có màu thần thánh - các thử nghiệm nổi tiếng kiểu nút đỏ thắng nút xanh chỉ đúng trong đúng bối cảnh trang đó, vì cái thắng là độ tương phản của nút với phần còn lại chứ không phải bản thân màu đỏ. Thứ thật sự tác động là ba điều: nút nổi rõ so với nền, cùng một màu chỉ mang một ý nghĩa xuyên suốt trang, và màu nhấn không bị dùng lặp ở chỗ không bấm được. Muốn biết chắc thì phải chạy A/B test trên chính lưu lượng của bạn, thay đổi một biến mỗi lần.
Chọn hai màu cách nhau không quá một phần tư vòng tròn màu (khoảng 90 độ) và chênh độ sáng vừa phải; hai màu đối diện nhau sẽ đi qua vùng xám đục ở giữa nên dải chuyển trông bẩn. Chỉ đặt gradient ở một hoặc hai chỗ trong trang (thường là khối mở đầu hoặc nút chính), phần còn lại để màu đặc. Chữ đặt trực tiếp lên gradient rất dễ mất tương phản vì nền đổi màu dọc theo dải - nên đặt chữ trong một khối nền đục hoặc chỉ dùng gradient cho vùng không có chữ.