网页布局基础
网页设计排版知识点汇总
网页设计排版知识点汇总一、网页设计排版概述在网页设计中，排版是至关重要的一环。
良好的排版可以提升网页的可读性，增强信息的传递效果，使用户更加舒适地浏览网页内容。
本文将对网页设计排版中的重要知识点进行汇总，包括字体选择、行高与字距、对齐方式、布局等方面。
二、字体选择1. 字体类型在网页设计中，选择适合的字体类型对于页面的整体风格与氛围非常重要。
常用的字体类型包括无衬线字体（如Arial、Helvetica）、衬线字体（如Times New Roman、Georgia）和等宽字体（如Courier New、Monaco）。
根据网页的主题和风格，选择相应字体类型以增加页面的可读性和美感。
2. 字体大小字体大小的合理选择可以使文字内容更加易读，一般来说，标题需要使用大号字体（如24px），正文部分则选用中号字体（如14px），较小的字体适用于注释、引用等次要内容。
3. 粗体和斜体粗体和斜体是在网页设计中常用的强调手段，可以突出某些重要信息或者强调关键词汇。
但是需要注意，过多地使用粗体和斜体会导致排版混乱，建议谨慎使用。
三、行高与字距1. 行高行高是指行与行之间的竖直间距，合理设置行高可以使文字更易读。
一般来说，行高设置为字体大小的1.5倍到2倍之间，具体的行高选择可以根据页面的风格和排版效果进行微调。
2. 字距字距是指字母与字母之间的水平间距，过于紧密或过于宽松的字距都会影响阅读体验。
一般来说，正常的字距设置可以使文字看起来更加紧凑、整齐。
但是需要根据字体的具体形态和页面的需要进行适当调整。
四、对齐方式1. 左对齐左对齐是最常见的对齐方式，文字以页面左边缘对齐，行的末尾可能会产生不对齐的情况。
左对齐适用于大多数情况，能够保持内容的整齐和易读性。
2. 居中对齐居中对齐使文字相对于页面居中显示，可以给人以美观和稳定的感觉。
适用于标题、短句或者需要强调的文字。
3. 右对齐右对齐是文字相对于页面右边缘对齐，与左对齐相反。
第6章 Div+CSS布局网页
6.2 使用Div+CSS布局网页
（21）设置分类项定位的Overflow值为hidden。 （22）连续单击“确定”按钮，完成Div区域的插入，最终结果如图6-19所示。
图6-19 完成Div区域的插入
6.2 使用Div+CSS布局网页
（23）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （24）如图6-20所示，设置插入栏为“在标签之后”。
6.2 使用Div+CSS布局网页
（10）如图6-11所示，单击分类栏中的方框，然后设置Width为720像素， Height为120像素。
图6-11 设置宽度和高度
6.2 使用Div+CSS布局网页
（11）如图6-12所示，取消“margin”中对“全部相同”复选框的勾选， 然后分别设置Right和Left均为auto。这样设置可以保证Div区域在网页中居中显 示。
（30）设置分类项定位的Overflow为hidden。 （31）连续单击“确定”按钮，完成新的Div区域添加。最终结果如图6-24所示。
图6-24 完成新的Div区域添加
6.2 使用Div+CSS布局网页
（32）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （33）按图6-25所示设置，然后单击“新建CSS规则”按钮，打开“新建CSS规则” 对话框。
图6-3 切换到布局选项卡
6.2 使用Div+CSS布局网页
（3）执行“修改/页面属性”命令，打开图6-4所示的“页面属性”对话框。
图6-4 “页面属性”对话框
6.2 使用D0像素，单击“确定”按钮。 （5）如图6-5所示，单击“插入Div标签”按钮，打开“插入Div标签”对话框。
网页设计与布局知识点总结
网页设计与布局知识点总结在当今数字化时代，网页已成为人们获取信息和交流的重要渠道之一。
而一个高效、美观并且用户友好的网页设计与布局，对于吸引用户、提升用户体验以及传递有效信息至关重要。
在这篇文章中，我们将汇总一些关键的网页设计与布局知识点，帮助您了解如何打造出令人印象深刻的网页。
一、色彩运用色彩是网页设计中最具视觉冲击力的元素之一。
合理运用色彩可以吸引用户的眼球，提升用户体验。
以下是一些关于色彩运用的要点：1. 主色调的选择：根据网页的目的与定位选择合适的主色调。
比如，互联网企业可以选择蓝色，使得网页显得专业可靠；餐饮行业则可以选择红色，增添食欲与热情。
2. 色彩搭配：使用网页配色工具来确保色彩的搭配协调，并注意背景色与文字色的对比，确保信息清晰易读。
3. 色彩心理学：了解不同色彩对人们情绪与行为的影响，利用色彩心理学原理引导用户的心理感受。
二、排版布局良好的排版布局可以提升网页的可读性，并使得用户能够更好地获取所需信息。
以下是一些关于排版布局的要点：1. 栅格系统：采用栅格系统可以帮助设计师将网页内容有序地排布在页面上，并保证元素之间的间距与比例协调统一。
2. 响应式设计：随着移动设备的普及，确保网页在不同屏幕尺寸上显示良好非常重要。
采用响应式设计可以使得网页在不同设备上具有良好的排版效果。
3. 字体选择：选择适合网页主题的字体，确保字体大小、行间距和字间距的合理搭配，提升网页的可读性。
4. 层次感与重点突出：通过合理运用标题、副标题、文字颜色、字号等手段来设置信息的层次感，突出重点内容，使用户更加关注关键信息。
三、图像与多媒体运用图像与多媒体元素可以使网页更具吸引力，并且能够更好地传递信息。
以下是一些关于图像与多媒体运用的要点：1. 图片优化：选择合适的图片格式（如JPEG、PNG或GIF），并对图片进行压缩以保证网页加载速度。
2. 视频与音频：合理嵌入视频与音频元素，使其自动播放或手动触发，并确保兼容性与流畅度。
网页设计的知识点和难点
网页设计的知识点和难点近年来，随着互联网的快速发展，网页设计成为了一个备受关注的领域。
在进行网页设计时，不仅需要具备一定的技术和设计能力，还需要理解网页设计的知识点和难点。
本文将探讨网页设计的核心知识点和常见难点，帮助读者更好地理解和应对网页设计的挑战。
一、网页设计的知识点1. 布局与排版网页的布局和排版是网页设计中最基础也是最重要的知识点之一。
良好的布局能够增强网页的可读性和易用性，使用户更容易理解网站的结构和导航方式。
合理的排版则能够提高网页的美观性和信息传达效果。
2. 色彩和配色色彩在网页设计中起到了至关重要的作用。
正确的配色方案可以有效地传达网站的品牌形象和情感氛围。
此外，合理运用色彩还可以提高网页的可读性和用户体验。
3. 图片和图形设计图像和图形是网页设计中必不可少的元素，能够吸引用户的注意力并传达信息。
网页设计师需要了解图片和图形的处理方法，掌握图像的优化和压缩技术，以提高网页的加载速度和用户体验。
4. 字体和排版字体选择和排版是网页设计中的关键环节。
通过选择适合的字体和合理的排版方式，可以增强网页的可读性和视觉效果。
同时，合理运用字体和排版也能够突出网页的重点内容，提高信息传达效果。
5. 响应式设计与移动优先如今，移动设备的普及和流行使得响应式设计和移动优先成为了网页设计的重要趋势。
网页设计师需要了解不同设备的特点和用户习惯，设计出适应不同屏幕尺寸和分辨率的网页，以提升用户体验和网站的可访问性。
二、网页设计的难点1. 兼容性由于不同浏览器和操作系统对网页的渲染方式存在差异，网页设计师需要考虑兼容性问题。
在设计过程中，需要进行跨浏览器测试，并对不同情况进行适配和调整，以确保网页在不同环境下的正常显示。
2. 用户体验网页设计的核心目标之一是提供良好的用户体验。
网页设计师需要从用户的角度出发，考虑用户的需求和行为习惯，设计简洁明了的界面和易用的交互方式。
此外，还需要关注页面加载速度和响应时间，以提升用户的满意度和使用体验。
页面设计规范
页面设计规范页面设计规范是指在进行网页设计时所需遵循的一系列准则和规范，旨在提高网页的可读性、易用性和用户体验。
下面是一些常见的页面设计规范：1. 页面布局：网页布局应该简洁清晰，结构层次分明。
常见的布局方式有传统的单列布局、多列布局和响应式布局等。
页面各个元素的位置和大小应该合理，避免出现过多的空白或拥挤的情况。
2. 颜色搭配：网页的颜色搭配应该和谐统一，避免使用过于刺眼或冲突的颜色。
通常可以选择一种主色调和几种辅助色调来搭配使用，以达到整体的美观效果。
3. 字体选择：网页中的字体应该选择易读性好的字体，并保持一致性。
可以根据不同的内容和重要性来选择不同的字体大小和样式，但要注意不要过多使用不同的字体，以免造成视觉上的混乱。
4. 图片使用：网页设计中的图片应该具有清晰度和相关性，避免使用过于模糊或与内容无关的图片。
在使用图片时要注意大小和格式的优化，以提高网页的加载速度。
5. 导航设计：页面导航应该简单明了，用户可以轻松找到想要的内容。
导航栏的位置通常放置在页面的顶部或侧边，并且应该保持固定不动，方便用户在浏览网页时随时导航。
6. 页面反馈：当用户进行某些操作时，网页应该给予及时的反馈。
例如，当用户提交表单时，应该有相应的提示或等待动画，以提示用户操作的进展。
7. 响应式设计：随着移动设备的普及，网页设计应该具备响应式布局，即能够适应不同的终端设备并提供相应的界面展示。
这样可以确保用户在不同的设备上都能获得良好的体验。
8. 视觉一致性：网页中的各个元素应该保持视觉上的一致性，即在整个网站中所使用的样式、颜色和布局等都应该保持一致，这样可以使用户更容易理解和使用。
9. 网页加载速度：网页的加载速度是用户体验的重要因素之一。
在设计中要注意优化图片大小、压缩文件、减少HTTP请求等方法，以提高页面加载速度。
10. 简洁与重点：在设计中要保持页面的简洁性，不过度使用过多的文字和图片。
同时要突出重点，通过层次感和排版方式等手段来引导用户的注意力。
网页设计基础：理解网页布局的五种方式
网页设计基础：理解网页布局的五种方式介绍在现代互联网时代，网页设计成为了一门非常重要的技能。
而网页布局则是网页设计中的一个关键方面。
不同的网页布局方式可以影响用户对网页信息的感知和使用体验。
本文将介绍五种常见的网页布局方式，帮助读者理解并掌握这些不同的布局方式。
一、流式布局（Fluid Layout）流式布局也被称为自适应布局，其主要特点是网页容器会根据设备屏幕宽度或浏览器窗口大小进行相应调整。
这意味着无论用户在大屏幕电脑、平板还是手机上访问，页面都能自动适应屏幕尺寸而不至于出现滚动条。
流式布局最常用于响应式设计，通过CSS媒体查询和百分比单位来实现页面元素的相对定位和缩放。
二、定宽布局（Fixed Layout）定宽布局是指将页面内容固定在一个特定宽度上而不会随设备或窗口大小变化而改变。
这种方式通常利用像素（px）作为单位来设置元素尺寸。
优势在于保持设计的稳定性和一致性，但会在不同设备上导致页面出现滚动条或被裁剪。
三、响应式布局（Responsive Layout）响应式布局是一种综合了流式布局和定宽布局的方式。
通过使用CSS媒体查询和断点设置，在不同的屏幕尺寸下重新排列和调整页面元素，以适应各种设备。
这样可以提供更好的用户体验，同时减少开发者需要为不同设备制作独立网站的工作量。
响应式布局根据屏幕宽度或浏览器窗口大小自适应调整页面布局，使得用户能够在不同设备上获得最佳呈现效果。
四、分栏布局（Grid Layout）分栏布局是指将网页内容划分为多个平行区域，并利用CSS网格系统将页面元素放置到相应的栏中。
通过使用指定的列数和行数，可以实现复杂而灵活的网格结构。
分栏布局常见于报纸、杂志等需要多个板块并存的场景。
分栏布局可以提供良好的信息组织和视觉效果，但需要使用特定的CSS框架或自定义代码来实现。
五、居中布局（Centered Layout）居中布局是将网页内容放置在页面的中间，使其居中显示。
这种布局方式适用于简单、集中展示的页面结构，如单个产品介绍、相册或简报。
网页布局的名词解释
网页布局的名词解释今天，随着互联网的快速发展，网页已经成为了我们生活中不可或缺的一部分。
而网页布局作为构建网页的基础，起着至关重要的作用。
在这篇文章中，我将解释一些与网页布局相关的重要名词，帮助读者更好地理解网页布局的概念。
一、响应式设计响应式设计是指网页可以根据不同的设备和屏幕尺寸自动调整布局，使用户能够在不同的设备上获得更好的浏览体验。
这种设计方法主要通过使用弹性网格布局、媒体查询和可伸缩的图像来实现。
响应式设计的目的是使网页在各种设备上看起来都美观，内容得到良好的展示。
二、固定布局固定布局是指网页的宽度和高度都是固定不变的，无论用户使用何种设备浏览网页，网页的大小都保持不变。
这种布局方式固定了网页的尺寸，使得网页在不同的设备上展示效果不一，可能在小屏幕设备上出现滚动条或者内容被截断的情况。
三、流式布局流式布局是指网页根据浏览器宽度的变化而自适应地调整布局，内容会自动填充屏幕的可用空间。
这种布局方式可以使网页适应不同的屏幕尺寸，但在极端情况下，可能会使内容过于拥挤，影响用户的阅读体验。
四、自适应布局自适应布局是一种综合了响应式设计和固定布局的布局方式。
它使用媒体查询来检测设备的特性，并根据设备的屏幕尺寸自动切换不同的布局。
与响应式设计不同的是，自适应布局只使用了有限的几种布局，并没有涵盖所有可能的设备尺寸。
五、栅格系统栅格系统是一种将网页划分为行和列的结构，用于对网页元素进行布局和对齐。
它可以帮助设计师更好地控制网页的结构和排版。
栅格系统常用的列数有12、16、24等，设计师可以根据需要将网页分为多个不同宽度的列，便于放置各种内容。
六、浮动浮动是一种布局方式，可以将网页元素从正常的文档流中移动，并使其向左或向右浮动到指定位置。
通过对不同元素设置浮动属性，可以实现复杂的网页布局。
然而，过多的浮动元素可能会导致布局混乱，需要仔细控制。
七、层叠样式表（CSS）层叠样式表是一种用于设计网页布局和样式的语言。
网页设计排版知识点分析
网页设计排版知识点分析在今天互联网高度发展的时代，网页设计已经成为了一门非常重要的技能。
而网页设计中的排版技术更是至关重要，因为它直接影响着用户对网页的阅读体验和感知度。
本文将从不同角度分析网页设计排版的知识点，帮助读者更好地理解和掌握这一技能。
1. 字体选择和应用字体是网页设计排版中最基础的元素之一。
正确选择和应用字体可以提高网页的可读性和美观性。
在选择字体时，首先要考虑字体的风格是否与网页主题相符，并且适应不同的浏览器和操作系统。
其次是字体的大小和行高的搭配，以保证文字内容的易读性。
同时，还要注意字体的颜色和背景的对比度，确保文字清晰可见。
2. 行距和段落合理的行距和段落设置也是网页设计排版的重要考虑因素之一。
行距过小会导致文字拥挤，难以阅读，而行距过大则会浪费空间，影响版面紧凑度。
段落的设置要考虑文字的层次结构和逻辑关系，通过合理的缩进和空行来分隔段落，使得内容更加清晰明了。
3. 区块布局网页设计中常用的区块布局有单列、双列、多列等，它们的选择取决于网页的内容和需要展示的元素。
在进行区块布局时，要注意各个区块之间的对齐和间距，保证整体的平衡和美观。
同时，栅格系统的运用也是一种常见的布局方式，可以更好地控制元素的位置和比例。
4. 图片和图文搭配图片在网页设计中具有重要的作用，可以丰富页面的视觉效果和传达信息。
在网页排版中，图片的尺寸和分辨率要适应页面布局，并且注意图像的清晰度。
图文搭配时，要考虑文字和图片之间的间距和对齐方式，以及文字环绕图片的效果，以提高整体的美观度和可读性。
5. 响应式设计随着移动设备的普及，响应式设计在网页排版中变得越来越重要。
通过媒体查询和弹性布局，可以使网页在不同大小的屏幕上都呈现出良好的显示效果，并且保持内容的一致性。
响应式设计也要考虑到字体的大小和间距的自适应调整，以适应不同设备的阅读需求。
总结起来，网页设计排版涉及到字体选择和应用、行距和段落设置、区块布局、图片和图文搭配以及响应式设计等多个知识点。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页布局基础1、CSS 规定的定位机制有三种，分别是标准文档流、浮动及绝对定位。
2、W3c标准：结构化标准语言（HTML和XML），表现标准语言（CSS），行为标准语言（Dom和ECMAScript）。
3、标准文档流：从上到下，从左到右输出文档内容。
由块级元素和行级元素组成。
块级元素：从左到右撑满页面独占一行，触碰到页面边缘时会自动换行。
有：div、ul、li、dl、dt、p行级元素:<span>、<strong> 、img、input不会独占一行块级元素和行级元素都是盒子模型。
4、盒子模型：边框（border）、外边距（margin）、内边距（pading）、内容（content）5、盒子3D模型：从上到下依次为：border、content+padding、background-image、background-color、margin6、实现自动居中——列布局的三个技能点：标准文档流，块级元素，margin属性。
网页设置完居中后（代码为：#wrap{width:700px;margin:0 auto;}）就不能再设置浮动属性以及位置属性了，否则位置就不会再居中。
对于网页居中：首先设置整体id为：上下margin 不用设置为auto，只设置右左就可以。
width:100%; 也不可以，一定设置为一个不为100%的值。
然后设置局部id为：width：100%7、浮动布局：可以实现横向多列布局，通过float属性实现，有三个属性值：left、right、none。
设置了浮动的元素仍旧处于标准文档流中。
当元素没有设置宽度值，而设置了浮动属性，元素的宽度随着内容的变化而变化。
当元素设置浮动属性后，会对相邻的元素产生影响，相邻的元素特指紧邻后面的元素。
（2）、清除浮动：clear：both 或者同时设置width：100%+overflow：hidden；当父包含快缩成一条时，用clear：both 的方法清除浮动是无效的，它一般用于紧邻后面的元素的清除浮动。
（3）、横向两列布局：float属性——使纵向排列的块级元素横向排列。
Margin属性——设置两列之间的间距。
颜色表：#00C 草绿色#FF3300颜色样本十六进制名称与注释#ffb3a7 粉红：即浅红色。
别称：妃色杨妃色湘妃色妃红色。
#ed5736 妃色：妃红色。
古同“绯”，粉红色。
杨妃色、湘妃色、粉红皆同义。
#f00056 品红：比大红浅的红色。
#f47983 桃红：桃花的颜色，比粉红略鲜润的颜色。
#db5a6b 海棠红：淡紫红色、较桃红色深一些，是非常妩媚娇艳的颜色。
#f20c00 石榴红：石榴花的颜色，高色度和纯度的红色。
#c93756 樱桃色：鲜红色。
#f05654 银红：银朱和粉红色颜料配成的颜色。
多用来形容有光泽的各种红色，尤指有光泽浅红。
#ff2121 大红：正红色，三原色中的红，传统的中国红，又称绛色。
#8c4356 绛紫：紫中略带红的颜色。
#c83c23 绯红：艳丽的深红。
#9d2933 胭脂：1、女子装扮时用的胭脂的颜色；2、国画暗红色颜料。
#ff4c00 朱红：朱砂的颜色，比大红活泼，也称铅朱、朱色、丹色。
#ff4e20 丹：丹砂的鲜艳红色。
#f35336 彤：赤色。
#cb3a56 茜色：茜草染的色彩，呈深红色。
#ff2d51 火红：火焰的红色，赤色。
#c91f37 赫赤：深红，火红。
泛指赤色、火红色。
#ef7a82 嫣红：鲜艳的红色。
#ff0097 洋红：色橘红。
#ff3300 炎：引申为红色。
#c3272b 赤：本义火的颜色，即红色。
#a98175 绾：绛色；浅绛色。
#c32136 枣红：即深红。
#b36d61 檀：浅红色，浅绛色。
#be002f 殷红：发黑的红色。
#dc3023 酡红：像饮酒后脸上泛现的红色，泛指脸红。
#f9906f 酡颜：饮酒脸红的样子。
亦泛指脸红色。
#fff143 鹅黄：淡黄色（鹅嘴的颜色，高明度微偏红黄色）。
#faff72 鸭黄：小鸭毛的黄色。
#eaff56 樱草色：淡黄色。
#ffa631 杏黄：成熟杏子的黄色。
#ff8c31 杏红：成熟杏子偏红色的一种颜色。
#ff8936 橘黄：柑橘的黄色。
#ffa400 橙黄：柑橘的黄色。
#ff7500 橘红：柑橘皮所呈现的红色。
#ffc773 姜黄：中药名。
别名黄姜。
为姜科植物姜黄的根茎。
又指人脸色不正，呈黄白色。
#f0c239 缃色：浅黄色。
#fa8c35 橙色：界于红色和黄色之间的混合色。
#b35c44 茶色：一种比栗色稍红的棕橙色至浅棕色。
#a88462 驼色：一种比咔叽色稍红而微淡、比肉桂色黄而稍淡和比核桃棕色黄而暗的浅黄棕色。
#c89b40 昏黄：形容天色、灯光等呈幽暗的黄色。
#60281e 栗色：栗壳的颜色。
即紫黑色。
#b25d25 棕色：棕毛的颜色,即褐色。
1、在红色和黄色之间的任何一种颜色；2、适中的暗淡和适度的浅黑。
#827100 棕绿：绿中泛棕色的一种颜色。
#7c4b00 棕黑：深棕色。
#9b4400 棕红：红褐色。
#ae7000 棕黄：浅褐色。
#9c5333 赭：赤红如赭土的颜料，古人用以饰面。
#955539 赭色：红色、赤红色。
#6e511e 褐色：黄黑色。
#d3b17d 枯黄：干枯焦黄。
#e29c45 黄栌：一种落叶灌木，花黄绿色,叶子秋天变成红色。
木材黄色可做染料。
#896c39 秋色：1、中常橄榄棕色，它比一般橄榄棕色稍暗，且稍稍绿些；2、古以秋为金，其色白，故代指白色。
#d9b611 秋香色：浅橄榄色浅黄绿色。
#bddd22 嫩绿：像刚长出的嫩叶的浅绿色。
#c9dd22 柳黄：像柳树芽那样的浅黄色。
#afdd22 柳绿：柳叶的青绿色。
#789262 竹青：竹子的绿色。
#a3d900 葱黄：黄绿色，嫩黄色。
#9ed900 葱绿：1、浅绿又略显微黄的颜色；2、草木青翠的样子。
#0eb83a 葱青：淡淡的青绿色。
#0eb83a 葱倩：青绿色。
#0aa344 青葱：翠绿色，形容植物浓绿。
#00bc12 油绿：光润而浓绿的颜色。
#0c8918 绿沈（沉）：深绿。
#1bd1a5 碧色：1、青绿色；2、青白色，浅蓝色。
#2add9c 碧绿：鲜艳的青绿色。
#2add9c 青碧：鲜艳的青蓝色。
#3de1ad 翡翠色：1、翡翠鸟羽毛的青绿色；2、翡翠宝石的颜色。
#40de5a 草绿：绿而略黄的颜色。
#00e09e 青色：1、一类带绿的蓝色，中等深浅，高度饱和；2、本义是蓝色；3、一般指深绿色；4、也指黑色；5、四色印刷中的一色；6、特指三补色中的一色。
#00e079 青翠：鲜绿。
#c0ebd7 青白：白而发青，尤指脸没有血色。
#e0eee8 鸭卵青：淡青灰色，极淡的青绿色。
#bbcdc5 蟹壳青：深灰绿色。
#424c50 鸦青：鸦羽的颜色。
即黑而带有紫绿光的颜色。
#00e500 绿色：1、在光谱中介于蓝与黄之间的那种颜色；2、本义是青中带黄的颜色；3、引申为黑色，如绿鬓：乌黑而光亮的鬓发，代指为青春年少的容颜。
#9ed048 豆绿：浅黄绿色。
#96ce54 豆青：浅青绿色。
#7bcfa6 石青：淡灰绿色。
#2edfa3 玉色:玉的颜色，高雅的淡绿、淡青色。
#7fecad 缥：绿色而微白。
#a4e2c6 艾绿：艾草的颜色。
偏苍白的绿色。
#21a675 松柏绿：经冬松柏叶的深绿。
#057748 松花绿：亦作“松花”、“松绿”。
偏黑的深绿色，墨绿。
#bce672 浅黄绿色：松树花粉的颜色。
《红楼梦》中提及松花配桃红为娇艳。
#44cef6 蓝：三原色的一种。
像晴天天空的颜色。
#177cb0 靛青：也叫“蓝靛”。
用蓼蓝叶泡水调和与石灰沉淀所得的蓝色染料。
呈深蓝绿色。
#065279 靛蓝：由植物(例如靛蓝或菘蓝属植物)得到的蓝色染料。
#3eede7 碧蓝：青蓝色。
#70f3ff 蔚蓝：类似晴朗天空的颜色的一种蓝色。
#4b5cc4 宝蓝：鲜艳明亮的蓝色。
#a1afc9 蓝灰色：一种近于灰略带蓝的深灰色。
#2e4e7e 藏青：蓝而近黑。
#2e4e7e 藏蓝：蓝里略透红色。
#4a4266 黛：青黑色的颜料。
古代女子用以画眉。
#426666 黛绿：墨绿。
#425066 黛蓝：深蓝色。
#574266 黛紫：深紫色。
#8d4bbb 紫色：蓝和红组成的颜色。
古人以紫为祥瑞的颜色。
代指与帝王、皇宫有关的事物。
#815463 紫酱：浑浊的紫色。
#815476 酱紫：紫中略带红的颜色。
#4c221b 紫檀：檀木的颜色，也称乌檀色、乌木色。
#003371 绀青、绀紫：纯度较低的深紫色。
#56004f 紫棠：黑红色。
#801dae 青莲：偏蓝的紫色。
#4c8dae 群青：深蓝色。
#b0a4e3 雪青：浅蓝紫色。
#cca4e3 丁香色：紫丁香的颜色，浅浅的紫色，很娇柔淡雅的色彩。
#edd1d8 藕色：浅灰而略带红的颜色。
#e4c6d0 藕荷色：浅紫而略带红的颜色。
#75878a 苍色：即各种颜色掺入黑色后的颜色。
#ffffff 精白：纯白、洁白、净白、粉白。
#fffbf0 象牙白：乳白色。
#f0fcff 雪白：如雪般洁白。
#d6ecf0 月白：淡蓝色。
#f2ecde 缟：白色。
#e0f0e9 素：白色、无色。
#f3f9f1 荼白：如荼之白色。
#e9f1f6 霜色：白霜的颜色。
#c2ccd0 花白：白色和黑色混杂的。
斑白的、夹杂有灰色的白。
#fcefe8 鱼肚白：似鱼腹部的颜色，多指黎明时东方的天色颜色。
#e3f9fd 莹白：晶莹洁白。
#808080 灰色：黑色和白色混和成的一种颜色。
#eedeb0 牙色：与象牙相似的淡黄色。
#f0f0f4 铅白：铅粉的白色。
铅粉，国画颜料，日久易氧化“返铅”变黑。
铅粉在古时用以搽脸的化妆品。
#622a1d 玄色：赤黑色，黑中带红的颜色，又泛指黑色。
#3d3b4f 玄青：深黑色。
#725e82 乌色：暗而呈黑的颜色。
#392f41 乌黑：深黑、漆黑。
#161823 漆黑：非常黑的。
#50616d 墨色：即黑色。
#758a99 墨灰：即黑灰。
#000000 黑色：亮度最低的非彩色的或消色差的物体的颜色；最暗的灰色；与白色截然不同的消色差的颜色；被认为特别属于那些既不能反射、又不能透过能使人感觉到的微小入射光的物体,任何亮度很低的物体颜色。
#493131 缁色：帛黑色。
#312520 煤黑、象牙黑：都是黑，不过有冷暖之分。
#5d513c 黧：黑中带黄的颜色。
#75664d 黎：黑中带黄似黎草色。
#6b6882 黝：本义为淡黑色或微青黑色。
#665757 黝黑：（皮肤暴露在太阳光下而晒成的）青黑色。
#41555d 黯：深黑色、泛指黑色。
#f2be45 赤金：足金的颜色。
#eacd76 金色：平均为深黄色带光泽的颜色。