首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何确定给定颜色的深色或浅色变体?

确定给定颜色的深色或浅色变体通常取决于两个主要因素:光源和物体表面的颜色反射特性。我们可以通过对比这两种变体来了解它们在不同光源下的相对亮度。以下是确定颜色变体的方法:

  1. 环境光源:考虑所处的环境光源是日光、人造光源还是白炽灯等,这将影响到物体表面的颜色反射。例如,日光下的浅色变体会显得更亮,而深色变体则可能显得更暗。
  2. 观察角度:观察角度也会影响颜色的对比。通常来说,从一个低角度观察时,浅色变体的亮度较高,而深色变体则相对较暗。从正上方观察时,颜色之间的对比可能会变得更加明显。
  3. 距离:观察物体与光源之间的距离也会影响颜色的对比。较远的物体看上去可能比较暗,而较近的物体看上去可能比较明亮。
  4. 颜色渲染方式:颜色渲染方式通常会影响物体在深色和浅色变体之间的对比。不同渲染方式(如写实、卡通或插图)下,深色变体的呈现效果可能有所差异。
  5. 背景色:背景色会影响观察者的颜色感知。较暗的背景色会让深色变体显得更亮,而浅色变体可能看起来不明显。相反,浅色背景色可能会让浅色变体显得更暗,而深色变体则变得明显。

通过以上这些方法,我们可以了解到颜色的深色和浅色变体在不同环境中的对比效果。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

给你应用建立一套配色方案

我们从基本品牌颜色开始,并从中构建一个变体系统:2 种文本颜色、4 种表面颜色和匹配阴影。 brand 通常,brand color 已经确定并以hexrgb 形式提供。...Light 浅色主题 每个颜色变体都将标有其匹配方案,在这种情况下,每个变体都附加-light....在浅色主题中,文本应该非常暗。请注意以下颜色亮度如何很低,远低于 50%。...秘诀是将黑色和白色专门用于最亮高光和最暗阴影。 surface 颜色 surface颜色是文本所在背景、边框和其他装饰表面。在浅色主题中,这些是浅色,而不是深色文本颜色。...,因为装饰颜色往往需要更多变体,用于交互时刻,如:focus:hover创建纸层外观。

1.7K40

linux中将图像转换为ASCII格式

本指南介绍如何在 Linux 中将图像转换为 ASCII 格式。我们将使用Jp2a。Jp2a 是一个命令行工具,可帮助你将给定图像转换为 ascii 字符格式。...从标准输入读取图像, 将背景模式设置为浅色深色, 设置边框, 设置输出高度和宽度, 为输出图像设置自定义尺寸, 垂直水平翻转输出图像, 在生成输出 ASCII 图像时使用特定字符, 反转图像, 从网上下载图像并转换它们.../深色背景中打印图像 Jp2a 具有在浅色深色背景中打印 ASCII 字符选项。...$ jp2a --background=light arch.jpg $ jp2a --background=dark arch.jpg 使用 Jp2a 在浅色深色背景中打印图像 image-20220109225830116...在深色背景中将图像打印成 ASCII 格式 如果你查看白色背景图片,但你使用深色背景上带有浅色字符显示器,你应该使用反转标志反转图像。

4.1K00
  • 谷歌MD深色主题设计规范详解(附Sketch官方文件下载)

    (在不同高程界面上,能够通过 WCAG AA标准 4.5:1对比度文本) ? 深色主题主色范例: 主色指示器 色调变体 主色变体 使用浅色组件能够呈现基于主色延展出来变体色彩。 ?...在深色主题中,次要色需要降低饱和度去满足 4.5:1 对比度要求。 ? 深色主题中次要色使用范例: 次要色指示器 色调变体 ? 这个 UI 界面中主色和次要色变体。...使用 Material 色彩主题基准配色 ? Material Design 默认主题基准色 Material Design 深色主题基准色 报错颜色 报错颜色主要用来指示出错状况和状态。...这种报错基准色,是基于默认主题(浅色主题)下报错颜色 (#B00020),在叠加了 40% 不透明度纯白图层之后所构成,它符合 AA 对比度标准。...深浅色主题结合 参考资料: Snackbar 当需要在深色主题中使用浅色控件时候,浅色控件可以确保层次结构清晰。

    9.7K10

    不懂设计产品不是好开发

    由于屏幕上大部分颜色都是background和surface颜色,在深色主题中,与浅色主题相比,background和surface颜色会有一个较低值(亮度)。...onXXX颜色应该从下往上移动。 为深色浅色主题建立一个颜色系统,这听起来可能太复杂了。多亏了Material Palette Generator工具,这并不复杂。...对于主色调,Material设计浅色主题通常使用500色调,对于深色主题建议使用较浅饱和度色调(200-50范围)。...浅色主题主变色可以浅一些深一些(500±200),而对于深色主题,建议使用500。...深色浅色主题secondary (accent) color色调可以选择与primary color类似的颜色,只是深色主题次要变体颜色建议在200-50范围内,而不是500。 3.

    2.5K20

    最新iOS设计规范七|10大视觉规范(Visual Design)

    因为这些颜色无论是单独还是组合在一起,在浅色模式和深色模式下都会很好看。 明智地使用颜色与用户交流。当一种颜色被谨慎很少使用时,它能明显提高用户注意力。...当你需要自定义颜色时,将颜色集资源添加到APP资产目录中,并指定颜色浅色深色变体,以便它可以适应当前外观模式。避免使用硬编码颜色不适应颜色。 确保颜色在两种模式下都具有足够对比度。...当你使用动态颜色对其进行着色添加活力时,符号在两种外观模式下看起来都很棒。 必要时为明暗外观设计单独标志符号。在浅色模式下使用线性图标符号,在深色模式下可能则需要更实心填充图标符号。...如果在浅色深色模式下看起来都不错,请使用相同资产。如果资产仅在一种模式下看起来很好,请修改资产创建单独浅色深色资产。使用资产目录将你资产组合成一个单独命名图像。...系统定义材料和活力 iOS定义了你在特定位置可以使用材质,以控制前景内容和背景外观之间视觉分离。系统提供材质包括适用于大多数背景浅色深色变体

    8.1K30

    更改Linux终端颜色主题【Linux-Command line】

    因此,很有可能你软件终端窗口中有很多选项可以使你看到内容主题化,不管你如何定义美。 设定 大多数流行软件终端应用程序,包括GNOME,KDE和Xfce,都带有更改其颜色主题选项。...其中包括具有明亮背景和深色前景文本浅色主题,以及具有黑暗背景和浅色前景文本深色主题。 当没有其他设置(例如dircolors命令设置)覆盖前景色时,默认颜色色板将同时定义前景色和背景色。...xterm和rxvt终端(旧终端和启用Unicode变体,有时也称为urxvtrxvt-unicode)提供了此类选项,因此即使没有台式机环境和大型GUI框架,你仍然可以为终端仿真器设置主题。...例如: 屏幕快照 2019-11-24 下午4.44.26.png 这些设置可设定默认前景和背景。 如果其他任何规则控制特定文件设备类型颜色,这些颜色可被使用。...如何设置这些信息,请参见dircolors命令。

    8.9K00

    苹果iOS 13 新设计规范全面解析

    在选择浅色深色背景下单独和组合应用色调颜色时,请查看系统配色方案以获得指导。 明智地使用颜色进行交流:当谨慎使用时,提高注意重要信息颜色力量会增强。...艺术品变化有时需要改变附近颜色,以保持视觉连续性并防止界面元素变得过于强大不足。例如,地图在使用地图模式时会显示浅色方案,但在激活卫星模式时会切换为深色方案。...主要关注阅读,照片,视频和游戏应用可以通过指定白点适应性样式来增强削弱此效果。 考虑如何在其他国家和文化中看到您对颜色使用:例如,在某些文化中,红色表示危险。在其他人看来,红色具有积极内涵。...当您需要自定义颜色时,将颜色集资源添加到应用程序资产目录中,并指定颜色浅色深色变体,以便它可以适应当前外观模式。 避免使用硬编码颜色不适应颜色。 ?...对于自定义颜色,目标是对比度为7:1,尤其是对于较小文本。 对比度越高,深色背景下颜色就越浅,浅色模式下就会颜色越深。 ? ?

    4.5K40

    Android 样式系统 | 主题背景属性

    颜色层级区分,会迫使您给颜色赋予语义化名称,换句话说,您应该不会在给颜色命名为 @color/white 同时,又为深色模式提供一个深色变体,这会让人感到非常困惑。...由于主题背景可以被覆盖或者改变,因此这间接表示: 您不需要创建其他布局样式就可以更改某些颜色——您可以在相同布局中使用不同主题背景。 始终使用? 在某些情况下,您或许不想按照主题背景更改颜色。...例如,在 Material Design 规范文档 中提到,您可能希望在浅色深色主题中均使用同一类型颜色。 在这种特殊情况下,直接引用颜色资源是再合适不过: <!...,此简写把给定颜色强转成了一个 ColorDrawable。...《Making Android Lint Theme Aware》这篇文章简述了如何通过添加 Lint 检查来寻找直接引用颜色用法,并涵盖了文中提及到所有建议。

    1.4K20

    如何在网页设计中实现深色模式:增强用户体验

    称为“深色模式”(有时称为“夜间模式”深色主题”)设计功能会修改用户界面的配色方案,使其主要使用深色黑色背景以及浅色文本和图形元素。...深色模式主要特征 深色调色板:为了与屏幕上较亮项目形成鲜明对比,深色模式通常使用黑色、深灰色海军蓝色调作为背景颜色。...文本对比:为了保持深色背景下易读性,在深色模式下,文本和其他材料通常以较浅颜色呈现,例如白色浅灰色。...幸运是,使用 CSS 实现深色模式相对简单,并且可以通过一些简单技术来实现。在本指南中,我们将探索如何使用 CSS 创建深色模式切换按钮并在浅色深色模式之间切换。...以下是如何在保持可访问性同时在黑暗模式下进行设计: 保持足够对比度:确保深色背景不会过多遮挡文本交互功能,以便仍然可以阅读和区分它们。

    21910

    现代 CSS 解决方案:accent-color 强调色

    color-scheme 是 CSS 一个属性,用于指定网页颜色方案主题。它定义了网页元素应该使用哪种颜色方案来呈现内容。...这通常包括浅色背景和深色文本。 dark:表示使用深色颜色方案。这通常包括深色背景和浅色文本。...通过指定适当 color-scheme 值,开发者可以为网页提供不同颜色方案,以适应用户偏好操作系统设置。这有助于提供更好可访问性和用户体验。...它告诉浏览器,网页希望适应用户代理(浏览器)默认颜色方案,并同时支持浅色深色模式。...如果用户代理处于浅色模式,网页将使用浅色颜色方案来呈现内容;如果用户代理处于深色模式,网页将使用深色颜色方案来呈现内容。

    11010

    深色模式适配指南

    那么针对项目的深色模式适配方案也一样,主要分为三步:一、组件库深浅色主题 适配;二、项目中深浅色颜色适配;三、 完成 CSS 变量到页面的注入。...主题背景和样式 主题背景和样式应避免使用旨在于浅色主题背景下使用硬编码颜色图标,您应改用主题背景属性(首选)适合在夜间使用资源,以下是需要了解两个最重要主题背景属性: ?...android:attr/textColorPrimary 这是一种通用型文本颜色,它在浅色主题背景下接近于黑色,在深色主题背景下接近于白色,该颜色包含一个停用状态。 ?...attr/colorControlNormal 一种通用图标颜色,该颜色包含一个停用状态。 Flutter 这里以 Flutter 为例,简单介绍下跨平台开发框架如何适配深色模式。...Flutter 定义主题有两种方式:全局主题使用 Theme 来定义应用程序局部颜色和字体样式。 全局主题 全局主题就是由应用程序根 MaterialAPP 创建 Theme。

    2.8K31

    科研绘图配色

    01 配色基本原则 颜色需要有自身意义。不同颜色表示不同分组,相近颜色表示同一个分组;配色需要展现数据逻辑关系,突出关键数据,比如重要数据用深色暖色表示,不重要数据用浅色冷色表示。...比较窄柱体建议用深色,比较宽柱体建议用浅色。如果使用深色,建议添加透明度,降低其饱和度色彩。 两列数据配色推荐选用不太接近颜色实现对比目的。...当点个数较多时,也可用空心原点。配色可以把点设为深色,然后提高颜色透明度。 【等高线图和热图配色】 颜色多,图线多,建议用配色方案,通常用双色或者三色渐变方案。...当我们不知道如何选择颜色时,我们可以根据某些给定关系从颜色轮中选择颜色,如:互补色,相似色,三元组色,四元颜色,分列互补色,双互补色。...以上只是介绍色轮使用,在实践中可以通过某些网站提供丰富色彩色轮来确定颜色,例如网站: Color Supply app https://colorsupplyyy.com/app Sessions

    2.5K10

    一个Android沉浸式状态栏上黑科技

    答案是显而易见,为了能让前景背景颜色区分更加明显,当然应该是底部是深色背景图时候显示白色状态栏图标,底部是浅色背景图时候显示黑色状态栏图标。...因此,现在问题就转移成了,我们如何才能识别一张背景图指定区域是属于深色还是浅色? 非常幸运,在Android系统上我们是可以做到这一点,只需要借助Google提供Palette库即可。...当亮度低于0.5时,我就认为这是一个深色颜色值,那么此时将状态栏设置成深色模式,状态栏图标就会自动变成白色。反之就将状态栏设置成浅色模式,此时状态栏图标就会自动变成黑色。...这里我准备了几张不同背景图,由Palette解析之后,会根据识别出颜色值动态更改状态栏图标的颜色。 这是深色背景图效果。 这是浅色背景图效果。...比如说背景图就是一张黑白左右分割图片,这种情况下Palette会选取哪种颜色来作为代表色其实是不确定。但不管是选中了黑还是白,都一定会导致状态栏上有一半区域图标是不可见

    1.4K10

    Android 10适配要点,深色主题

    除了让眼部在夜间使用时更加舒适之外,深色主题还可以减少电量消耗,从而延长手机续航,是一项非常有用功能。那么接下来,我们就开始学习如何才能让应用程序支持深色主题功能。...这里我准备使用在第12章中编写MaterialTest项目来作为示例,看看如何才能让它更加完美地适配深色主题模式。...接下来我们开始学习如何深色主题模式进行适配。 最简单一种适配方式就是使用Force Dark,它是一种能让应用程序快速适配深色主题,并且几乎不用编写额外代码方式。...Force Dark工作原理是系统会分析浅色主题应用下每一层View,并且在这些View绘制到屏幕之前,自动将它们颜色转换成更加适合深色主题颜色。...然而,虽然现在界面中主要内容都已经自动切换成了深色主题,但是你会发现标题栏和悬浮按钮仍然保持着和浅色主题时一样颜色

    1.8K10

    如何在 Vue 3 + Element Plus 项目中实现动态设置主题色以及深色模式切换

    本文将结合 Vue 3 和 Element Plus 框架,通过实际代码示例展示如何实现深色模式和主题色动态切换。...三、实现深色模式切换 深色模式和浅色模式切换可以通过 VueUse 提供 useDark 和 useToggle 两个工具函数来实现。 useDark:用于检测和管理深色模式状态。...用于切换深色浅色模式 2....多主题支持:在大型项目中,往往需要支持多种主题(如深色模式、浅色模式,以及不同颜色方案)。利用动态主题切换可以方便地管理多个主题,并让切换过程平滑且高效。...五、总结 本文展示了如何使用 Vue 3 和 Element Plus 实现深色模式和主题色动态切换。

    54910

    一组有范又高级深色网页设计案例解析

    浅色亮色文本图片,搭配深色背景,起到视觉上层级呼应,突出主题同时,瞬间吸引用户注意,赋予界面生命力。 如何设计深色系网页?...1、运用白色文字和深色背景形成反差效果 虽然深色背景容易给人压抑感觉,但是把深色背景运用到白色文字上面则是另外一种视觉效果差呈现,白色文字颜色深色背景可以形成鲜明对比,这样就能突出文本内容...如何选择适合你网站配色方案? 用户对颜色认知往往是类似的,无论是哪一类网页,如果页面太过花哨,不仅不会带给用户视觉享受,还会干扰视觉。...无论选择深色系还是浅色系,都要经过明确用户体验和合理决策共同完成。网页在明亮颜色方面配色最好不要超过三种,以免造成页面视觉体验混乱。...如何选择网站配色工具? “色彩影响人类心情与思考,当眼睛看到某种颜色时,会将此讯息传回大脑下视丘,经由一系列神经传达,刺激甲状腺分泌贺尔蒙,进而造成情绪、情感或是实际反应。”

    1.9K10

    现代 CSS 解决方案:accent-color 强调色

    color-scheme 是 CSS 一个属性,用于指定网页颜色方案主题。它定义了网页元素应该使用哪种颜色方案来呈现内容。...这通常包括浅色背景和深色文本。 dark:表示使用深色颜色方案。这通常包括深色背景和浅色文本。...通过指定适当 color-scheme 值,开发者可以为网页提供不同颜色方案,以适应用户偏好操作系统设置。这有助于提供更好可访问性和用户体验。...它告诉浏览器,网页希望适应用户代理(浏览器)默认颜色方案,并同时支持浅色深色模式。...如果用户代理处于浅色模式,网页将使用浅色颜色方案来呈现内容;如果用户代理处于深色模式,网页将使用深色颜色方案来呈现内容。

    13710

    深度译文:UI中设定自适应颜色原理(Part 02)

    在LCH工作模式中,它允许您以稳健和平滑方式完全指定颜色,并直接比较和调整亮度以及对比度。 ? 色谱 现在作为设计师,我们可能会希望为给定亮度,指定颜色色调和色度偏移。...这允许我们分别调整强度色温以获得更浅更暗颜色变化,从而提供更多创作自由和美学选择。例如,当您减淡蓝色时,您可能希望使蓝色变暖,以便颜色以更愉悦方式展示出来。...如上图所示,A与B两种灰色看起来是不一样,但色值一样 这种现象一个最明显表现就是,在UI界面的浅色系背景和深色背景中使用灰色,你会发现他们在人眼感知中是完全不一样。...虽然对比度为3:1颜色浅色主题中可能看起来很好,但对比度为3:1为且深色背景相同颜色(灰色),似乎没有足够对比度。...调整颜色对比度后表现效果 同理,下图这个紫色,在浅色背景下,我们觉得它饱和度是合适。但是在深色背景下,这个紫色似乎显得饱和度更高一点。 ?

    92520
    领券