Cách tạo màu sáng hơn / tối hơn của màu cho trạng thái di chuột của nút

Tôi đã thiết kế các nút trong một thời gian nhưng khi nói đến việc chọn (các) màu cho trạng thái di chuột của một gradient hoặc rắn thì chủ yếu là vấn đề về màu mắt tối hơn.

Có một lý thuyết màu sắc có cấu trúc ngoài kia sẽ giúp đánh giá tốt hơn những gì sẽ là một tông màu phù hợp hơn để sử dụng?

Làm thế nào tối nên đi từ bản gốc?

Làm cách nào để xác định màu sáng hơn hoặc tối hơn của màu "giống nhau"?

Khi tìm kiếm một sự thay đổi nhỏ về độ sáng, tôi thường làm toán - đếm đơn giản thực sự.

Định dạng hex cho màu sắc RRGGBB, có nghĩa là đỏ, xanh lá cây và xanh dương. Hệ thập lục phân được tính từ 0-F (vì vậy sau 9 đến A).

Nếu tôi có #191970màu nút chính, tôi sẽ thêm 1 hoặc 2 cho mỗi giá trị màu, dẫn đến màu tương tự nhưng nhạt hơn. Thêm 1 cho mỗi sẽ dẫn đến #1A1A71.

Điều tương tự có thể được thực hiện để tìm một màu tối hơn. Trừ đi 1 từ mỗi giá trị màu #191970sẽ dẫn đến #18186F.

Tuy nhiên, việc thêm hoặc bớt 1 hoặc 2 từ mỗi giá trị màu có thể dẫn đến sự khác biệt không thể phân biệt, do đó, có lẽ bạn sẽ cần phải thêm hoặc trừ ít nhất 10 từ mỗi giá trị.

Nếu bạn đang sử dụng định dạng số (255, 255, 255), bạn chỉ có thể thêm vào từng số bằng các thao tác cơ bản 10 thông thường.

Thêm cùng một lượng cho mỗi giá trị màu đảm bảo rằng màu sắc và độ bão hòa vẫn nhất quán và màu sắc kết quả hòa trộn hài hòa trong một thiết kế.

Hoặc, bạn có thể để một số trình tạo trực tuyến thực hiện các lựa chọn màu cho bạn và chỉ cần đặt tên cho mã bạn cần: Nút CSS CSS chỉ là một ví dụ.