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

JS计算颜色对比度

让我们来看看各种可能的颜色。也许这些是预先制作的配色方案,公司颜色或从图像中提取。...如果您有兴趣了解更多,W3C有一些关于颜色对比的文档,以及如何确定任何两种颜色之间是否有足够的对比度。这对于可访问性非常重要,以确保文本和链接颜色与背景之间有足够的对比度。...比较结果 让我们重温一下我们的颜色方案,看看基于这两个方程推荐哪种文本颜色可以获得最大对比度。...更复杂的’ YIQ ‘功能,加权颜色,建议略有不同。对于非常暗的颜色,仍然建议使用白色文字,但有一些惊喜。红色和粉红色值显示白色文本而不是黑色。...我不认为这是一个主要问题,如果一些边缘情况颜色与另一种颜色形成对比,它们仍然非常易读。 现在让我们看一些常见的颜色,然后看看这两个函数如何比较。您可以很快发现它们在整个范围内都做得非常好。

5.3K30
您找到你想要的搜索结果了吗?
是的
没有找到

深度学习优化颜色以实现伪装或突显主体

布里斯托大学的研究人员开发了一种深度学习神经网络,可以识别最小化或最大化的最佳色彩,以便主体融入背景或突显出来。在论文中,团队具体描述了网络及其可能的用途。 在自然界中,变换色彩非常重要。...在这项新的努力中,研究人员试图建立一个系统,可以揭示哪种颜色最适合与哪种背景混搭,或者反过来,哪种颜色最显眼。 ? 为了实现这一目标,研究人员转向深度学习神经网络。...通过对其进行编程以了解所需内容,然后分析许多背景和动物的照片,该系统确定了一个有机体的最佳颜色,以避免被某些其他生物看到或使其色彩更显著,这取决于它们的视觉能力。...结果,网络正确地选择了橙色作为老虎的颜色。它们注意到哺乳动物不能生长绿色皮毛,因此老虎是橙色的。但并没有解释为什么鹿没有进化出看到橙色的能力。

81720

深度译文:设计系统中的自适应颜色(Part 01)

颜色选择的当前研究状况 您熟悉的颜色选择工具中,许多是简单的HSB颜色选择器,对颜色关系的选定几乎没有帮助。...由于它采用RGB模式,因此颜色属性无法准确反映颜色的感知方式,从而导致颜色异常转换(即使在显示平滑曲线选项的工具中也是如此)。虽然输出需要限制在RGB空间中的可用色域,但我们不应该从那里来选择颜色。...相等HSL光度值的RGB颜色与其实际感知亮度的比较 此外,通常这些工具只允许您一次构建或修改单个颜色(或色彩系),因此您无法了解调色板中的其他颜色。...很多时候您会发现,在进行单独颜色修改后,一个配色会比另一个配色有更多或更少饱和度。 工具可以为我们提供一套好的颜色,但是很难做到这些颜色很好,更舒适。 ?...当然,这些工具也无法评估选择颜色后是否会与环境匹配。比如文本颜色和背景颜色的关系。比如在深色背景上,你选择的颜色看起来会比白色背景上更加饱和,更加艳丽。这是一种视觉错觉,工具无法更好的帮助我们。

1K20

深度译文:使用Adobe Spectrum设定自适应颜色(Part 03)

在做这项工作的时候,我们支持六种不同的颜色主题,所有颜色主题都需要与美学相关,与背景颜色具有相似的感知对比度,并遵循统一的可访问性指南。 我们首先根据目标对比度生成灰色系统。...正如我在之前的文章中提到的那样,颜色感知受到相邻和周围颜色的影响,即使对比度一致,在较暗背景下颜色也会显得较低。为了使颜色对比在主题中看起来一致,实际对比度必须根据主题背景的亮度而改变。 ?...Leonardo 该颜色生成算法基于预定义约束和可变目标对比率。目标比率由输入颜色的色调和输入背景颜色的亮度决定,使我们能够在设计系统的调色板内以及背景颜色亮度的任何背景下识别任何颜色的适当对比度。...对背景颜色的依赖性使我们能够根据需要增加或减少对比度。 ? 基于可变背景,通过对比生成所有颜色配色方案 ? 该工具允许我们为每个UI颜色传递任意数量的色调度,为每个主题传递一个背景颜色值。...每种颜色有4种色调,每种背景颜色有11种色调,它给出了任何给定主题的59种色板输出。 就纯灰度背景颜色而言,它能够生成255种不同的主题(基于亮度值)或15,045色样本。

91850

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

颜色环的裁剪视图模式 这就是为什么我们创建了所谓的“自适应调色板”。这些调色板遵循系统设计方法,其中设计者定义了具体的颜色范畴,而非创建静态颜色样本。...我们希望它是我们颜色生成过程中的主要变量。由于可访问的对比度基于颜色的“相对亮度”,因此亮度是决定我们如何生成颜色的主要变量。为了实现这一点,我们需要将颜色定义为沿L轴的变量。...基于亮度定义颜色约束,使我们能够生成任何亮度(或“相对亮度”)的颜色样本,并确保颜色反映我们的美学选择,同时符合目标对比度。 背景的可变性 对于颜色的感知,受相邻和周围颜色的影响。...360度自适应颜色(gif) 这种定义颜色的方法,可以通过调整任意数值,来更容易地修改设计系统中的特定颜色变量。如果颜色太暗,您只需调整所需的对比度,颜色将在预设的色调和饱和度约束范围内调整。...您还可以更均匀地调整颜色饱和度:过去,调整单个颜色样本的饱和度,意味着相对地重新评估所有样本,以确保颜色系列中每种颜色的饱和度(以及整个调色板中的每种颜色)显得一致性。

89120

针对 YUV420 颜色空间的深度图像压缩研究

目录 简介 提出的方法 训练和测试细节 实验结果 结论 简介 目前,大多数深度图像压缩方法被设计用来压缩 RGB 颜色空间的图像。...然而,大多数深度压缩框架只设计用于压缩 RGB 颜色空间的图像,而没有关注 YUV 颜色空间的图像压缩。...在这篇论文中,作者研究如何调整为 RGB 图像设计的深度压缩框架来压缩 YUV420 颜色空间的图像。...提出的方法 基于深度图像压缩平台 CompressAI 中的 mbt2018 模型,提案 JVET-T0123 提出了三种不同的框架来压缩 YUV420 颜色空间的视频。...图 1 展示了提出的两个深度压缩框架,用于在深度图像压缩平台 CompressAI 中基于 cheng2020-attn 模型压缩 YUV420 颜色空间的图像。

1.1K20

YIQ颜色空间_简述RGB颜色

首先,我们先来了解下有关颜色的基本概念 一、色彩的基本概念 1、彩色的三要素 亮度:即人眼对光的明亮程度的感受。 色调:人眼能看到的颜色种类,与光的波长有关 饱和度:颜色深浅程度。...但是,三基色并不是唯一的,只要满足任何一种颜色都不能由其他两种颜色合成即可组成三基色。...3、亮度的组成 4、常用的四种颜色空间 A、RGB颜色空间 RGB彩色空间利用相加混合法将三个彩色分量按照不同的比例叠加,最终就可以在屏幕中显现出各种颜色。...B、YUV颜色空间 研究表面,人眼对于亮度的敏感度远大于对于颜色细节的敏感度,因此,才彩色电视机系统中不采用RGB颜色空间,一般为以下的空间: 而采用YUV颜色空间的好处有: a、解决了彩色电视机和黑白电视机的兼容问题...RGB颜色空间的转换 C、YIQ颜色空间 如上图所示,YIQ颜色空间被NTSC制的彩色电视机使用。

2.6K20

Angular和Vue.js 深度对比

Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面。当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强。...如今,已有许多开发人员开始使用 Vue.js 来取代 Angular 和 React.js 。 那么对于 Angular 和 React.js ,开发者该如何选择呢?...下面我们会对这两种框架进行介绍和深度对比。 Vue.js 是前 Google 员工 Evan You 的开发的,并于2014年发布,现已获得了超过57,000个 GitHub star。...事实上,Vue.js 更像是一个库而不是框架,因为它不提供 Angular 的所有功能。开发者将不得不依赖 Vue.js 的第三方代码,而 Angular 提供了 HTTP 请求服务或路由器等功能。...Angular 和 Vue.js 的版本发布 2017年6月8日发布了 Vue.js v2.3.4的最新稳定版本 。在此版本之前,还有13个版本。 Angular 4 于2017年3月发布。

3.8K10
领券