Chuyển đổi màu sắc
#ca4e4e
≈ Chestnut Rose
Biến thể
Mục đích của phần này là tạo ra chính xác các sắc thái (thêm màu trắng tinh khiết) và sắc độ (thêm màu đen tinh khiết) của màu bạn đã chọn theo mức tăng 10%.
Mẹo chuyên nghiệp: Sử dụng sắc thái cho trạng thái di chuột và bóng đổ, sắc độ cho điểm sáng và nền.
Sắc thái
Các biến thể tối hơn được tạo ra bằng cách thêm màu đen vào màu cơ bản.
Sắc thái
Các biến thể nhẹ hơn được tạo ra bằng cách thêm màu trắng vào màu cơ bản.
Các trường hợp sử dụng phổ biến
- • Trạng thái thành phần UI (di chuột, hoạt động, vô hiệu hóa)
- • Tạo chiều sâu bằng bóng đổ và điểm sáng
- • Xây dựng hệ thống màu sắc nhất quán
Mẹo hệ thống thiết kế
Những biến thể này tạo thành nền tảng cho một bảng màu thống nhất. Hãy xuất chúng để duy trì tính nhất quán trong toàn bộ dự án của bạn.
Kết hợp màu sắc
Mỗi sự hài hòa đều mang một sắc thái riêng. Hãy sử dụng sự hài hòa để tìm ra những sự kết hợp màu sắc phù hợp với nhau.
Cách sử dụng
Nhấp vào bất kỳ màu nào để sao chép giá trị hex của màu đó. Những kết hợp này đã được chứng minh về mặt toán học là tạo nên sự hài hòa về mặt thị giác.
Tại sao nó quan trọng
Sự hài hòa màu sắc tạo nên sự cân bằng và gợi lên những cảm xúc cụ thể trong thiết kế của bạn.
Bổ sung
Một màu và màu đối diện của nó trên vòng tròn màu, +180 độ sắc độ. Độ tương phản cao.
Bổ sung phân chia
Một màu và hai màu liền kề với màu bổ sung, chênh lệch +/-30 độ sắc độ so với giá trị đối diện với màu chính. Đậm nét như màu bổ sung thẳng, nhưng linh hoạt hơn.
Bộ ba
Ba màu được bố trí đều nhau trên vòng tròn màu, mỗi màu cách nhau 120 độ sắc độ. Tốt nhất nên để một màu chủ đạo và sử dụng các màu còn lại làm điểm nhấn.
Tương tự
Ba màu có cùng độ sáng và độ bão hòa với các sắc thái nằm cạnh nhau trên bánh xe màu, cách nhau 30 độ. Chuyển tiếp mượt mà.
Đơn sắc
Ba màu có cùng tông màu với giá trị độ sáng +/-50%. Tinh tế và tao nhã.
Tứ giác
Hai bộ màu bổ sung, cách nhau 60 độ sắc độ.
Nguyên lý lý thuyết màu sắc
Sự cân bằng
Sử dụng một màu chủ đạo, hỗ trợ bằng màu phụ và nhấn nhá một cách tiết kiệm.
Sự tương phản
Đảm bảo độ tương phản đủ để dễ đọc và dễ tiếp cận.
Hòa hợp
Màu sắc nên kết hợp với nhau để tạo nên trải nghiệm thị giác thống nhất.
Công cụ kiểm tra độ tương phản màu
Kiểm tra các kết hợp màu sắc để đảm bảo chúng đáp ứng các tiêu chuẩn trợ năng WCAG về khả năng đọc văn bản.
Văn bản màu
Màu nền
Sự tương phản
Tiêu chuẩn WCAG
Mọi người đều là một thiên tài. Nhưng nếu bạn đánh giá một con cá bằng khả năng trèo cây của nó, nó sẽ sống cả đời với niềm tin rằng nó ngu ngốc.