如何为按钮的悬停状态创建较浅/较深的颜色阴影

平面设计 网站设计 颜色 按钮
2022-01-02 20:19:48

我设计按钮已经有一段时间了,但是在为渐变或纯色的悬停状态选择颜色时,它主要是关注更暗的色调。

有没有一种结构化的色彩理论可以帮助更好地判断什么是更合适的色调?

我应该从原版变暗到什么程度?

如何定义“相同”颜色的浅色或深色?

2个回答

当寻找亮度的轻微变化时,我通常会做数学 - 真的很简单。

颜色的十六进制格式是RRGGBB,表示红色、绿色和蓝色。十六进制从 0-F 开始计数(所以 9 之后是 A)。

如果我有#191970我的主要按钮颜色,我将为每个颜色值添加 1 或 2,从而产生相似但更浅的颜色。每个加 1 将导致#1A1A71.

寻找更暗的阴影也可以这样做。从每个颜色值中减去 1#191970将导致#18186F.

但是,从每个颜色值中添加或减去 1 或 2 可能会导致无法区分的差异,因此您可能需要从每个颜色值中添加或减去至少 10。

如果您使用的是数字格式(255, 255, 255),您可以使用普通的以 10 为底的运算来添加每个数字。

为每个颜色值添加相同的数量可确保色调和饱和度保持一致,并且生成的颜色在设计中和谐地融合在一起。

或者,您可以让一些在线生成器为您选择颜色,然后只需在您需要的代码上加上:CSS 渐变按钮只是一个示例。