Tạo hệ thống thiết kế của bạn, phần 3: Màu sắc

Trong bài viết này, chúng tôi sẽ xem xét cách thiết lập hệ thống màu trong CSS và cách thực hành tốt nhất để đảm bảo hệ thống dễ sử dụng và bảo trì.

Bài viết này là một phần của loạt bài về các hệ thống thiết kế lấy cảm hứng từ thư viện các thành phần web của chúng tôi. Thư viện dựa trên một hệ thống vững chắc của CSS toàn cầu. Vì vậy, đây là chúng tôi chia sẻ những điều chúng tôi đã học cách thiết lập phong cách toàn cầu của thư viện của chúng tôi!

Loạt bài viết:
- Phần 1: Kiểu chữ
- Phần 2: Lưới & Bố cục
- Phần 3: Màu sắc
- Phần 4: Giãn cách
- Phần 5: Biểu tượng
- Phần 6: Nút

Chúng tôi đã ra mắt Trình chỉnh sửa màu! Một công cụ thiết kế web tạo các bảng màu và chủ đề tương thích với Khung CodyHouse.

Biến màu 101

Không giống như các thế giới CSS khác, việc tạo ra một hệ thống màu là 10% về mã hóa và 90% về ngữ nghĩa. Trong khi làm việc với tệp _colors.scss của bạn, bạn muốn ghi nhớ các mục tiêu sau:

  1. Các biến màu phải dễ nhớ → Bạn không muốn kiểm tra tệp toàn cầu bất cứ khi nào bạn phải chọn màu.
  2. Hệ thống phải dễ dàng cập nhật → Bạn sẽ thêm, xóa và đổi tên màu. Hãy chắc chắn rằng làm như vậy không phức tạp.
  3. Hệ thống chỉ nên bao gồm các màu thiết yếu → chúng tôi đã nghe thấy điều này rất nhiều lần, nhưng chúng tôi luôn kết thúc với nhiều màu hơn mức cần thiết! Chìa khóa thành công thực sự của một hệ thống thiết kế là loại bỏ tất cả những gì không cần thiết (bao gồm màu sắc).

Màu sắc ngữ nghĩa và màu khai báo

Khi nói đến việc thiết lập các biến màu, có hai cách tiếp cận chính: màu ngữ nghĩa và màu khai báo.

Cách tiếp cận ngữ nghĩa giống như:

Trong khi ở đây, một ví dụ về cách tiếp cận khai báo:

Không ai trong số họ là sai. Chọn một trong những đáp ứng nhu cầu của bạn phụ thuộc vào rất nhiều yếu tố (ví dụ: quy mô dự án, màu sắc thương hiệu phù hợp, v.v.).

Trong khi làm việc với tệp _colors.scss trong khung của chúng tôi, tôi đã phải tính đến người dùng sẽ chỉnh sửa nó (100%). Điều đó có nghĩa là ngay cả khi cách tiếp cận khai báo là dễ sử dụng nhất, tôi phải trộn nó với cách tiếp cận ngữ nghĩa để có được một hệ thống cũng dễ bảo trì.

Bảng màu thiết yếu

Bước số một là khai báo số lượng màu tối thiểu cần thiết để tạo các thành phần web. Nói chung, bảng màu thiết yếu bao gồm:

  1. Màu chính / màu chính → được sử dụng cho các liên kết, màu nền của nút, v.v. Nói chung, nó LÊN màu gọi hành động chính.
  2. Màu nhấn → được sử dụng để làm nổi bật một cái gì đó quan trọng trên trang. Nó không nên là một biến thể của màu chính, nhưng là màu bổ sung.
  3. Thang đo của các màu trung tính → Nó nói chung là thang màu của các thang độ xám, được sử dụng cho các yếu tố văn bản, các yếu tố tinh tế, đường viền, v.v.
  4. Màu sắc phản hồi → thành công, lỗi, cảnh báo.

Một số màu này cần một biến thể (phiên bản tối hơn / sáng hơn), thường được sử dụng để làm nổi bật tính tương tác (ví dụ: hover /: trạng thái hoạt động).

Trong CSS, điều này dịch là:

* lưu ý: chúng tôi đã sử dụng plugin chức năng postcss-color-mod để dịch các chức năng màu thành mã RGBA tương thích với tất cả các trình duyệt.

Đoạn mã trên biểu thị bảng màu: tất cả các màu được sử dụng trong toàn dự án.

Các biến thể của màu chính và màu nhấn được tạo bằng các hàm màu. Cách tiếp cận này có ích nếu bạn có tệp demo.html (và chúng tôi thực hiện trong khung của chúng tôi) để bạn có thể điều chỉnh các giá trị của các hàm cho đến khi bạn hài lòng với màu sắc thu được. Các sắc thái (hoặc trung tính) được tạo bằng chroma.js. Trong trường hợp này, sử dụng các hàm là không lý tưởng, vì bạn thường có hai màu đối lập (đen và trắng) và bạn cần tạo một thang giá trị dựa trên hai màu này.

Thêm màu sắc ngữ nghĩa vào hỗn hợp

Khi bảng màu đã sẵn sàng, chúng ta có thể thêm các màu ngữ nghĩa. Tạo màu sắc ngữ nghĩa không có nghĩa là tăng số lượng màu, mà phân phối màu bằng cách sử dụng các tham chiếu ngữ nghĩa.

Tại sao tôi nghĩ rằng đây là một cách tiếp cận tốt

Trước hết, hệ thống này dựa trên hai màu thiết yếu: màu chính và màu nhấn. Điều đó có nghĩa là khi bạn cần sử dụng các biến màu, bạn sẽ khó nhớ được những biến đó đại diện cho điều gì (ngay cả khi bạn không sử dụng tên khai báo như là màu xanh da trời và màu đỏ).

Hệ thống của bạn có thể cần bao gồm nhiều màu hơn (ví dụ: màu thứ cấp). Bạn vẫn đang xử lý chỉ với ba màu. Việc quản lý một hệ thống dựa trên 10+ màu chính sẽ khó khăn cho dù bạn sử dụng phương pháp nào, vì vậy bạn có thể muốn xem xét đơn giản hóa nó.

Các màu thang độ xám sử dụng một quy ước đặt tên khác: cao hơn là số ở cuối biến, màu tối hơn là màu.
Cách tiếp cận này trở nên tiện dụng khi bạn không chắc chắn bạn muốn áp dụng màu trung tính nào. Nếu màu xám-2 trông quá tinh tế, bạn có thể thử màu xám-3. Bạn có thể nhận thấy một số sắc thái bị thiếu (ví dụ: màu xám-5). Chúng không cần thiết trong trường hợp của chúng tôi (chúng tôi không bao giờ sử dụng chúng trong khi tạo các thành phần web), vì vậy chúng tôi đã xóa chúng khỏi bảng màu.

Màu sắc ngữ nghĩa được thêm vào hỗn hợp vì ba lý do chính:

  1. Tệp _colors.scss trở thành nguồn sự thật bất cứ lúc nào bạn cần sửa đổi màu. Bạn có cảm thấy các yếu tố tiêu đề văn bản nên tối hơn? Mở tệp _colors.scss và chỉnh sửa biến tiêu đề màu văn bản.
  2. Ví dụ, nếu bạn xác định đường viền màu, thì bạn đã thắng phải tìm kiếm màu xám nào mà bạn đã sử dụng trong các thành phần khác vào lần tới khi bạn tạo thành phần viền. Khái niệm tương tự áp dụng cho nhiều yếu tố, không chỉ biên giới.
  3. Nó làm cho nó một miếng bánh để tạo và duy trì các chủ đề khác nhau.

Chủ đề

Ngay khi chúng ta có thể sử dụng các biến CSS mà không cần phải dựa vào plugin hoặc polyfill, việc tạo chủ đề màu sẽ cực kỳ đơn giản *! Điều đó có nghĩa là chúng ta có thể tạo ra các chủ đề ngày hôm nay? Không, chúng ta có thể. Chúng tôi có hai lựa chọn.

* trong khung của chúng tôi, chúng tôi sử dụng plugin postcss-css-biến để biên dịch các biến CSS. Hiện tại nó không hỗ trợ cập nhật các biến trong một lớp CSS.

Tùy chọn 1 đang cập nhật các biến CSS. Các trình duyệt không hỗ trợ các biến hỗ trợ sẽ hiển thị chủ đề màu mặc định của Wikipedia. Đây không phải là một vấn đề, miễn là nội dung có thể truy cập.

Ví dụ: bạn có chủ đề màu mặc định → nền trắng và màu văn bản đen và màu .theme-dark → nền đen và màu văn bản trắng. Sau đó, bạn tạo hai thành phần, một thành phần có chủ đề mặc định, phần còn lại có chủ đề .dark. Nếu việc có cả hai thành phần với chủ đề mặc định không ảnh hưởng đến trải nghiệm người dùng, thì bạn có thể coi chủ đề .dark là một cải tiến (tùy chọn). Trong trường hợp này, nên cập nhật các biến để tạo các chủ đề khác nhau ngay cả khi chúng không được hỗ trợ ở mọi nơi.

Đây là cách bạn tạo một chủ đề mới cập nhật một số biến CSS chính:

Tôi thích giải pháp này vì nó trừu tượng hóa việc hiệu chỉnh màu sắc và nó cho phép bạn giữ các chủ đề màu của mình trong một tệp duy nhất. Bằng cách đó, chúng ta có thể thay đổi trạng thái của từng thành phần (từ chủ đề-a sang chủ đề-b) chỉ bằng cách áp dụng một lớp CSS.

Tùy chọn 2 sẽ nhắm mục tiêu tất cả các yếu tố có ngoại hình bị ảnh hưởng bởi chủ đề. Ưu điểm của phương pháp này là nó được hỗ trợ bởi tất cả các trình duyệt. Tuy nhiên, nó không dễ bảo trì so với cái dựa hoàn toàn vào các biến CSS.

Dưới đây, một ví dụ về tùy chọn 2 đang hoạt động:

Bây giờ bạn biết cách chúng tôi lên kế hoạch xử lý màu sắc trong khung của chúng tôi! Nếu bạn có phản hồi / đề xuất, hãy cho chúng tôi biết trong phần bình luận!

Tôi hy vọng bạn thích bài viết này! Để biết thêm về thiết kế web, hãy theo dõi chúng tôi tại đây trên Medium hoặc Twitter.