关于网站的配色方案,一万个人看了都说好看.

2023-12-15 02:30

本文主要是介绍关于网站的配色方案,一万个人看了都说好看.,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

引言:

网页需要配色。一种好看、易用、符合心意的配色,是很不容易的,尤其在没有设计师时。

一、Flat UI 色表

最简单的方法是,从一个给定的色表选择颜色。我以前就是这样,主要根据 Flat UI 的色表配色。

在这里插入图片描述

这个色表提供20种颜色(其实是10种,每种颜色有深和浅两个色调),对于简单的网页,基本够用了。实际效果可以参考 Flat UI 官网。
在这里插入图片描述

二、香港地铁色表

后来,我听说香港地铁的每个车站,颜色都不一样。比如,中环是红色。
在这里插入图片描述
金钟是蓝色,北角是橙色。
在这里插入图片描述
在这里插入图片描述
这就是有名的香港地铁配色,目前一共有87种颜色。
在这里插入图片描述
有人将这87种颜色,做成了色表,方便使用(源码)。
在这里插入图片描述
我觉得,这个色表非常漂亮,符合大多数人的审美,87种颜色也足够用了。

三、配色的经验法则

除了使用色表,有人还提出一种配色的经验法则,也很值得参考。

(1)网页的主题色

深颜色使用c、f、6、9这四个字符,组合生成 RGB 色值,比如紫罗兰色是9966ff,靛蓝是6666ff,红色是ff6666。
在这里插入图片描述
在这里插入图片描述
淡颜色使用a、b、c、d、e、f这六个字符,组合生成 RGB 色值。
在这里插入图片描述
(2)文字的颜色

文字最好不要使用全黑,而是使用深蓝色,可以从下面几种颜色挑。1a2a3a最深,2a3a4a次之,7a8a9a最浅
在这里插入图片描述
(3)背景色、阴影色、边框色

背景色、阴影色、边框色都属于衬托,建议使用灰色,可以从aaaaa、bbbbbb、cccccc、dddddd这四个色值挑选。
在这里插入图片描述
文源-阮一峰的网络日志

这篇关于关于网站的配色方案,一万个人看了都说好看.的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/494765

相关文章

C#高效实现在Word文档中自动化创建图表的可视化方案

《C#高效实现在Word文档中自动化创建图表的可视化方案》本文将深入探讨如何利用C#,结合一款功能强大的第三方库,实现在Word文档中自动化创建图表,为你的数据呈现和报告生成提供一套实用且高效的解决方... 目录Word文档图表自动化:为什么选择C#?从零开始:C#实现Word文档图表的基本步骤深度优化:C

Python + Streamlit项目部署方案超详细教程(非Docker版)

《Python+Streamlit项目部署方案超详细教程(非Docker版)》Streamlit是一款强大的Python框架,专为机器学习及数据可视化打造,:本文主要介绍Python+St... 目录一、针对 Alibaba Cloud linux/Centos 系统的完整部署方案1. 服务器基础配置(阿里

SpringSecurity中的跨域问题处理方案

《SpringSecurity中的跨域问题处理方案》本文介绍了跨域资源共享(CORS)技术在JavaEE开发中的应用,详细讲解了CORS的工作原理,包括简单请求和非简单请求的处理方式,本文结合实例代码... 目录1.什么是CORS2.简单请求3.非简单请求4.Spring跨域解决方案4.1.@CrossOr

使用MyBatis TypeHandler实现数据加密与解密的具体方案

《使用MyBatisTypeHandler实现数据加密与解密的具体方案》在我们日常的开发工作中,经常会遇到一些敏感数据需要存储,比如用户的手机号、身份证号、银行卡号等,为了保障数据安全,我们通常会对... 目录1. 核心概念:什么是 TypeHandler?2. 实战场景3. 代码实现步骤步骤 1:定义 E

Python实现繁体转简体功能的三种方案

《Python实现繁体转简体功能的三种方案》在中文信息处理中,繁体字与简体字的转换是一个常见需求,无论是处理港澳台地区的文本数据,还是开发面向不同中文用户群体的应用,繁简转换都是不可或缺的功能,本文将... 目录前言为什么需要繁简转换?python实现方案方案一:使用opencc库方案二:使用zhconv库

MyBatis Plus中执行原生SQL语句方法常见方案

《MyBatisPlus中执行原生SQL语句方法常见方案》MyBatisPlus提供了多种执行原生SQL语句的方法,包括使用SqlRunner工具类、@Select注解和XML映射文件,每种方法都有... 目录 如何使用这些方法1. 使用 SqlRunner 工具类2. 使用 @Select 注解3. 使用

SpringBoot基于注解实现数据库字段回填的完整方案

《SpringBoot基于注解实现数据库字段回填的完整方案》这篇文章主要为大家详细介绍了SpringBoot如何基于注解实现数据库字段回填的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解... 目录数据库表pom.XMLRelationFieldRelationFieldMapping基础的一些代

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,:本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”:浏览器到底缓存了谁?三、设计思路:把“发版”做成“自愈”四、代码

解决docker目录内存不足扩容处理方案

《解决docker目录内存不足扩容处理方案》文章介绍了Docker存储目录迁移方法:因系统盘空间不足,需将Docker数据迁移到更大磁盘(如/home/docker),通过修改daemon.json配... 目录1、查看服务器所有磁盘的使用情况2、查看docker镜像和容器存储目录的空间大小3、停止dock

Spring Gateway动态路由实现方案

《SpringGateway动态路由实现方案》本文主要介绍了SpringGateway动态路由实现方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随... 目录前沿何为路由RouteDefinitionRouteLocator工作流程动态路由实现尾巴前沿S