Trình Tạo Bảng Màu

Tại sao một bảng màu tốt có thể định hình cả một thiết kế

Chọn màu sai và người xem cảm nhận được ngay trước khi họ có thể gọi tên nó. Một trang trông rẻ tiền, logo trông đục ngầu, biểu đồ biến thành nhiễu loạn. Chọn màu đúng và công việc trở nên chỉnh tề: nó trông có chủ ý, nhẹ nhàng và dễ duyệt. Màu sắc thực hiện rất nhiều công việc âm thầm — tạo tâm trạng, hướng dẫn mắt nhìn, và cho người đọc biết điều gì quan trọng nhất. Vì vậy, bảng màu không phải là trang trí bạn gắn vào ở cuối. Đó là quyết định bạn đưa ra sớm, và hầu hết mọi thứ khác đều dựa vào nó.

Tin tốt là bạn không cần bằng nghệ thuật để có được một bộ màu vững chắc. Bạn cần một vài quy tắc từ lý thuyết màu sắc và một cách nhanh để thử ý tưởng. Đó chính xác là công dụng của công cụ tạo bảng màu: nó giúp bạn duyệt hàng chục tổ hợp trong thời gian mà trước đây phải mất để loay hoay với một cái.

Lý thuyết màu sắc, bỏ qua biệt ngữ

Hầu hết các hòa âm màu đều xuất phát từ một ý tưởng đơn giản: các màu nằm ở đâu trên bánh xe màu so với nhau. Học bốn mô hình và bạn có thể đọc hoặc xây dựng hầu hết bất kỳ bộ màu nào.

• Bổ sung dùng hai màu đối diện trực tiếp nhau, như xanh dương và cam. Năng lượng cao và tuyệt vời để thu hút sự chú ý, dù quá nhiều cả hai sẽ tranh nhau tiêu điểm, vì vậy hãy để một màu dẫn đầu và dùng màu kia làm điểm nhấn.
• Tương tự dùng ba màu cạnh nhau, như đỏ, cam và vàng. Ít tương phản, nhẹ nhàng, và là loại hòa âm bạn thấy khắp nơi trong tự nhiên. Dễ nhìn, nhưng bạn có thể cần thêm tương phản ở đâu đó để tránh phẳng lặng.
• Bộ ba dùng ba màu cách đều nhau xung quanh bánh xe, như đỏ, vàng và xanh dương. Tươi sáng và cân bằng, hoạt động tốt nhất khi một màu chiếm ưu thế và hai màu còn lại đóng vai phụ.
• Đơn sắc gắn với một màu và thay đổi độ sáng và độ bão hòa. Đây là bộ màu an toàn nhất, sạch và gắn kết, và là phương án dự phòng tốt khi không có gì khác có vẻ đúng.

Công cụ tạo ngẫu nhiên thú vị cho cảm hứng, nhưng các chế độ hòa âm mới là nơi giá trị thực sự nằm. Chúng giữ các màu của bạn liên quan về mặt toán học, vì vậy chúng trông như thuộc về nhau ngay cả trước khi bạn tinh chỉnh bất cứ điều gì.

HEX, RGB và HSL giải thích đơn giản

Mỗi màu bạn sao chép đều có một vài ký hiệu, và tất cả chúng đều mô tả cùng một thứ theo những cách khác nhau.

HEX là mã sáu ký tự bạn thấy nhiều nhất, như #3A7BD5. Đó chỉ là đỏ, xanh lá và xanh dương được đóng gói vào một chuỗi, hai ký tự mỗi kênh. Nó gọn gàng và là thứ bạn sẽ dán vào CSS hoặc công cụ thiết kế.

RGB ghi rõ ba kênh tương tự dưới dạng số từ 0 đến 255, như rgb(58, 123, 213). Cùng màu, dễ đọc hơn và tiện dụng khi bạn muốn kênh alpha để điều chỉnh độ trong suốt.

HSL mô tả màu sắc theo cách mọi người thực sự nghĩ: sắc độ (màu nào, từ 0 đến 360 độ xung quanh bánh xe), độ bão hòa (mức độ rực rỡ) và độ sáng (mức độ tươi sáng). Đây là định dạng dễ chỉnh sửa bằng tay nhất, vì việc điều chỉnh độ sáng hay độ bão hòa sẽ cho kết quả đúng như bạn kỳ vọng mà không cần phỏng đoán. Nếu bạn cần chuyển đổi giữa các định dạng, một lần chuyển đổi HEX sang RGB nhanh sẽ làm cho việc đó dễ dàng.

Đừng quên tương phản và khả năng tiếp cận

Một bảng màu có thể trông đẹp và vẫn thất bại ngay khi ai đó cố gắng đọc văn bản trên đó. Tương phản là nơi cái đẹp gặp tính khả dụng. Hướng dẫn khả năng tiếp cận nội dung web đặt ra một tiêu chí rõ ràng: văn bản thân bài thông thường phải đạt tỷ lệ tương phản ít nhất 4,5:1 so với nền, và văn bản lớn ít nhất 3:1. Đó không phải thủ tục hành chính — đó là sự khác biệt giữa người đọc lướt qua trang của bạn và người nheo mắt, từ bỏ và rời đi.

Bước thực tế là kiểm tra các cặp nền trước và nền sau khi bạn xây dựng, không phải sau đó. Xám nhạt trên trắng có thể trông thanh lịch trong bản mockup và trở nên vô hình trên điện thoại dưới ánh sáng ban ngày. Khi một tổ hợp không đạt, bạn thường chỉ cần đẩy một màu tối hơn hoặc sáng hơn, không phải vứt bỏ toàn bộ bộ màu. Giữ màu nhấn tươi sáng cho nút bấm, đường dẫn và điểm nổi bật thay vì các đoạn văn bản dài, và bạn sẽ tránh được hầu hết các vấn đề tương phản trước khi chúng bắt đầu.

Quy trình thực tế

Đây là quy trình hoạt động tốt cho các dự án. Bắt đầu với một màu neo bạn chắc chắn — thường là màu thương hiệu hoặc màu phù hợp với tâm trạng bạn muốn. Khóa nó lại, rồi để công cụ tạo bảng màu xây dựng hòa âm xung quanh nó. Duyệt qua bổ sung, tương tự và bộ ba cho đến khi có thứ gì đó cảm thấy đúng — và đừng suy nghĩ quá nhiều ở lần đầu; bạn đang tìm kiếm hướng đi, không phải câu trả lời cuối cùng.

Khi bạn có ứng cử viên, hãy gán vai trò. Chọn màu chủ đạo cho nền và các khu vực lớn, màu phụ cho cấu trúc, và một màu nhấn nổi bật cho những phần cần nổi lên. Tỷ lệ phân chia thoải mái 60-30-10 — chủ đạo, phụ, nhấn — giữ mọi thứ cân bằng mà không cứng nhắc. Sau đó kiểm tra tương phản trên mỗi cặp văn bản, sao chép mã hex, và bạn xong rồi. Lưu những bộ màu hoạt động tốt, vì bảng màu bạn tạo tốt cho một dự án thường là hạt nhân cho dự án tiếp theo. Khi bạn sẵn sàng tiếp tục xây dựng, phần còn lại của bộ sưu tập tất cả công cụ tạo của chúng tôi có thể xử lý các phần khác.

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