如何选择合适的颜色来获得网页设计中想要的效果?

平面设计 adobe-photoshop 颜色
2022-02-28 17:36:49

例如,在本教程中,作者如何知道选择哪种颜色来创建导航栏?为什么他/她知道从#d0d0d0to的渐变#f9f9f9会产生以下效果?

替代文字

这些神奇的颜色代码#xxxxx是从哪里来的?有没有什么原则,还是只靠经验?

谢谢。

3个回答

“神奇颜色代码#xxxxxx”是颜色的十六进制 RGB 值,是在 Web(HTML 和 CSS)上表示颜色的标准格式。第一对数字是红色的十六进制值,第二对是绿色的十六进制值,第三对是蓝色的十六进制值。还有一些名称可以用于标准颜色,而不是使用十六进制格式。您可以在此处查看列表。

大多数设计工具,当然还有好的工具,都会帮助你产生这个价值。在 Photoshop 中,如果您选择使用 Web 颜色滑块显示颜色窗口,您可以看到这些值。您还将在前面有 # 的框中的颜色选择器中看到它。

RGB 值范围为 0 - 255,十六进制范围为 0 - FF。

因此,如果您的 RGB 值为 181,210,16(有点 pukey 浅橄榄绿),您的网页(十六进制)颜色代码将是 #B5D210。

  • 181 十进制 = B5 十六进制
  • 210 十进制 = D2 十六进制
  • 16 十进制 = 10 十六进制
  • 组合十六进制值(按 RGB 顺序),您就有了 #B5D210

如果您没有可以为您生成十六进制值的设计工具,那么您可以使用任何科学计算器或网络上任何过多的转换工具手动完成。

总的来说,我会说没有人真正知道#d0d0d0 到#f9f9f9 会产生很好的渐变(尽管考虑到网页设计经验,这更容易识别 - 相等的RGB值将代表灰度颜色) . 他们通过设计工具可视化他们想要的东西,并根据他们的设计生成值或编辑它们。

adobe 非常好的网站之一是http://kuler.adobe.com/我经常用它来为我设计的网站设计配色方案。

十六进制代码来自 256 种网页颜色,当时显示器只能显示 256 种颜色。每个数字/字母从 0 到 F - 0 1 2 3 4 5 6 7 8 9 ABCDEF

#000000 是黑色

#FFFFFF 是白色的

#F9F9F9 是很浅的灰色

#D0D0D0 是地面中间较深的灰色

这是一张可以帮助您理解它的图像:

替代文字