如何为您的网站设计选择配色方案
您的公司很可能在其信纸上带有徽标或首选的外观,这是开始查找您网站的配色方案的第一步。对于那些从头开始的人,请选择两种或三种互补色并坚持使用,不要在每一页上都更改颜色;您希望整个网站保持一致。但是,两种或三种颜色又如何互补呢?
您的裤子西装颜色可能与您穿的那件衬衫相匹配,但是为网站选择正确的配色方案比选择合适的衣服要困难得多。您的网站将长期穿着相同的颜色,并且每天都不能更改颜色。除非您当然向观众提供了即时修改其配色方案的能力,否则最终用户体验的额外好处将是一大优势。
许多网页设计师犯了严重的错误,即使用不匹配的错误配色方案。您是否在网站上看到带有深色文本的深色背景?尽管有些方法做得不错,但我发现其中大多数实现都很难在线阅读。我的视线绷紧了视线,立即单击或关闭,但还不够快。
我喜欢的一个很酷的工具是配色方案设计器;它提供了六个模型供您选择,从“单声道”选择到“重读类比”模型。选择模型和原色后,您可以预览和标记当前的方案ID,然后以浅色或深色页面示例查看。还有其他功能,例如随机化调色板和各种色盲设置,您可以将方案导出为带有样式表的HTML + CSS表。默认屏幕截图显示在图A中:
配色方案设计器网站默认为单色方案,并打开了色相选项卡并将其设置为0°,R 100%,G 0%,B 0%,RGB:FF0000。请注意,在右上方的Scheme ID:0011Tw0w0w0w0 ; 当您修改设计模型时,此信息将更新,使您对配色方案满意后可以将其另存为收藏,以备将来参考。请注意,原色点位于色轮的顶部,即0°倾斜度,也更接近光谱的“温暖”一半。通过单击并拖动色轮周围的斑点来更改该值,可以修改原色。或者,您也可以双击该点以输入数字值,然后输入0°至360°之间的Hue值,如图B所示:
坚持使用默认的单色模型,假设我想要的颜色更接近“冷”部分。我在该位置上双击并输入233,然后单击“确定”。这是最终的原色方案,如图C所示:
我同样可以单击并将该点移动到所需位置,预览窗格将通过点调整即时进行调整,如图D所示。
单击左下角的“调整方案”选项卡,将得到“饱和度/亮度”和“对比度”的预设方案设置。您可以手动调整设置,也可以从一组预定义的预设中进行选择,如图D所示:
如果选择“浅色粉彩”预设,则预览中生成的配色方案如下图所示,如页面右侧所示,并在图E下方显示。
选择“颜色列表”选项卡将显示方案中的五种颜色以及相关的编号。
Adjust Scheme选项卡的另一个子选项卡是Adjust Variants选项卡。此时,您可以返回并更改原色的变体,包括基础色和四个变体。这允许更新方案中所有五种颜色的变体,包括生成图F中所示的三种色调的文本样式。
单击“显示示例文本”,您还可以查看文本在所选预览窗格中的显示方式。
在预览窗格上显示“已启用文本”,如图G所示:
现在,选择“浅色”页面示例或“深色”页面示例,我现在可以看到这种配色方案是否适合样本内容;暗页示例显示在下面的图H中:
浅色柔和的配色方案适用于主体和选择区域。但是,如果选择了深色主题,则需要调整文本颜色。看看这如何为您提供一种快速的方法来确定您的配色方案可能适合或不适合以及您可能需要在编码中调整哪些地方?
我更喜欢下面显示的浅页示例-在查看和阅读文本时不那么费劲。同样,某些文本样式仍然需要工作,但这仍然为我提供了一个很好的起点来调整文本,如图I所示:
如果不确定要选择哪种配色方案,请浏览Internet并找到所需的网站,记下其主题,颜色,布局,色调和配色方案,然后可以返回到配色方案设计器,然后单击“确定”。根据已证明有效的模型对配色方案进行建模;很有可能其他人也会喜欢它。