使用 CSS 为 HTML 元素应用颜色

您所在的位置:网站首页 html怎么改字的颜色 使用 CSS 为 HTML 元素应用颜色

使用 CSS 为 HTML 元素应用颜色

2024-07-14 18:03| 来源: 网络整理| 查看: 265

让我们举一个简单的例子来说明如何为网站选择合适的色调。想象一下,你正在为一款发生在火星上的新游戏建立一个网站。那么,让我们在 Google 搜索火星照片。那里有很多火星色彩的好例子。我们小心地避开了模拟图和电影中的照片。我们决定使用人类在过去几十年中停放在火星表面的火星登陆器拍摄的照片,因为游戏是在火星表面进行的。我们使用颜色拾取工具来选择颜色样本。

使用滴管工具,我们找到了自己喜欢的颜色,并确定该颜色为 #D79C7A,这是一种非常适合火星表面的锈橙红色。

选定基色后,我们需要构建调色板。我们决定使用 Paletton 来调出我们需要的其他颜色。打开 Paletton 后,我们可以看到

接下来,我们在工具左下角的“Base RGB”框中输入颜色的十六进制代码(D79C7A):

现在我们看到的单色调色板是基于我们从火星照片中选取的颜色。如果你出于某种原因需要很多相关的颜色,那么这些颜色很可能是不错的选择。但我们真正需要的是一种强调色。一种能与基色相得益彰的颜色。要找到这种颜色,我们可以点击菜单下方的“add complementary”(添加补色)切换按钮,选择调色板类型(目前为“Monochromatic”)。Paletton 会计算出一个合适的强调色;点击右下角的强调色,就会告诉我们这个颜色是 #508D7C。

如果你对建议的颜色不满意,可以更改配色方案,看看是否能找到你更喜欢的颜色。例如,如果我们不喜欢建议的蓝绿色,我们可以点击“Triad”配色方案图标,就会出现下面的图标:

右上方的灰蓝色看起来不错。点击它,我们会发现它是 #556E8D。这将被用作强调色,在网站的标题、标签或其他指示器的高亮部分等处少量使用,以突出重点:

现在,我们有了基础色和强调色。此外,我们还为每种颜色准备了一些互补色调,以备渐变等用途。这些颜色可以以多种格式导出,以便使用。

有了这些颜色之后,你可能还需要选择适当的中性色。通常的设计做法是尽量找到一个最佳点,既要有足够的对比度,使文字清晰可读,又要有足够的对比度,以免刺眼。在某种程度上很容易走得太远,因此在选定颜色并有使用实例后,一定要征求对颜色的反馈意见。如果对比度太低,文字会被背景冲淡,导致无法阅读;但如果对比度太高,用户可能会觉得网站花哨、不好看。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3