如何检查十六进制颜色是否“太黑”?

2024-01-08

我正在尝试评估颜色选择器选择的颜色的暗度,看看它是否“太黑”,如果是,则将其设置为白色。我想我可以使用十六进制值的第一个字符来实现这一点。它正在工作,但它也在切换一些合法的“浅”颜色。

我有以下代码:

if (lightcolor.substring(0, 3) == "#00" || lightcolor.substring(0, 3) == "#010") {
  lightcolor = "#FFFFFF";
  color = lightcolor;
}

必须有一种更有效的十六进制数学方法来知道颜色已经超出了一定的黑暗程度?就像如果lightcolor+“一些十六进制值”<=“一些十六进制值”然后将其设置为white.

I have tinyColor添加了,这可能对此有用,但我不确定。


您必须分别提取三个 RGB 分量,然后使用标准公式将所得 RGB 值转换为其感知亮度。

假设有六个字符颜色:

var c = c.substring(1);      // strip #
var rgb = parseInt(c, 16);   // convert rrggbb to decimal
var r = (rgb >> 16) & 0xff;  // extract red
var g = (rgb >>  8) & 0xff;  // extract green
var b = (rgb >>  0) & 0xff;  // extract blue

var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709

if (luma < 40) {
    // pick a different colour
}

EDIT

自2014年5月起tinycolor现在有一个getBrightness()函数,尽管使用的是 CCIR601 权重因子而不是上面的 ITU-R 权重因子。

EDIT

生成的亮度值范围为 0..255,其中 0 表示最暗,255 表示最亮。大于 128 的值被认为是轻的tinycolor。 (无耻地从@pau.moreno 和@Alnitak 的评论中复制过来)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何检查十六进制颜色是否“太黑”? 的相关文章

  • Typescript:按值检查对象是否存在于数组中

    我有这个数据 roles roleId 69801 role ADMIN roleId 69806 role SUPER ADMIN roleId 69805 role RB roleId 69804 role PILOTE roleId
  • HTMLImageElement 作为 React Child 无效

    我正在尝试异步加载图像 并且仅在加载图像后才将其显示在 React 应用程序中 componentDidMount const img new Image img onload gt this setState originalImage
  • 在 MongoDB 中查找具有字符串 ID 数组的文档

    我有一个 id 字符串数组 我想将其与 find 函数一起使用 db companies find id in arr arr看起来像这样 563a2c60b511b7ff2c61e938 563a2c60b511b7ff2c61e8b7
  • 如何通过 HTML 按钮播放声音

    我目前通过网站播放音乐的方法是通过 HTML 音频标签 不过我希望能够通过 HTML 按钮来播放它 该按钮应该能够在播放和停止之间切换音乐 我在 JSFiddle 创建了一个示例 但不知道如何实现它 有人可以告诉我如何使用我的 JSFidd
  • 在浏览器中语音聊天? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我们正在寻求建立一个小组 voice 使用服务器上的node js 在浏览器中聊天 这可能吗 如果您希望您的解决方案是基于服务器端和客
  • Kivy - 有所有颜色名称的列表吗?

    在 Kivy 中 小部件 color属性允许输入其值作为字符串颜色名称 也 例如在 kv file Label color red 是否有所有可能的颜色名称的列表 就在这里 来自Kivy 的文档 https kivy org doc sta
  • 在 BIRT 中输入参数后更新数据集查询

    在 BIRT 报告设计中传递参数后 如何更改或更新数据集的查询 详细说明 我有一个如下所示的查询 WHERE 该参数标记可以保存不同的值 在用户输入参数后 它看起来像这样 例如 WHERE column name 1 or WHERE co
  • 将 jquery-mobile 与 Webpack 结合使用

    我正在尝试使用 webpack 加载 jquery mobile 但到目前为止还没有运气 我知道 jquery mobile 依赖于 jquery ui 而 jquery ui 又依赖于 jquery 如何在 Webpack 中设置这样的场
  • 创建 Cookie 时需要帮助

    我有一个名为yes和另一个名叫no
  • ElectronJS ReferenceError:导航器未定义

    我正在尝试在电子上制作自定义标题栏 但是当我启动我的应用程序时 我遇到了 ReferenceError 导航器未定义 问题 请帮忙 这是我的 main js 中的代码片段 My Codes https i stack imgur com c
  • Ember.JS - 如何在同一页面中使用多个模型、控制器和视图?

    我主要了解 Ember JS 的基础知识 大多数示例实际上只处理单个控制器和模型以在页面上显示某些内容 我真的很想用 Ember 构建一个完整的 Web 应用程序 所以有人能告诉我如何组织和连接多个控制器 模型和视图到一个页面中吗 例如 如
  • v-file-input .click() 不是函数

    我试图以编程方式触发 v file input 的 click 事件 因为它在 Vuetify 的文档中 但它显示一个错误this refs imagePicker click is not a function我在这里错过了什么吗 代码重
  • 如何滚动到div内的元素?

    我有一个滚动的div我想在点击它时发生一个事件 它会强制执行此操作div滚动以查看内部元素 我写的JavasCript是这样的 document getElementById chr scrollIntoView true 但这会在滚动时滚
  • 如何在网页上实现文件上传进度条?

    当用户将文件上传到我的网络应用程序时 我想显示比动画 gif 更有意义的内容 我还有哪些可能性 编辑 我正在使用 Net 但我不介意是否有人向我展示与平台无关的版本 如果您对这一切在客户端通常如何工作感兴趣 就是这样 所有解决方案都通过 J
  • WebRTC:通道、轨道和流与 RTP SSRC 和 RTP 会话之间的关系

    来自 Mozilla 网站 https developer mozilla org en US docs Web API Media Streams API https developer mozilla org en US docs We
  • window.showModalDialog 的等效跨浏览器解决方案是什么?

    window showModalDialog 的等效跨浏览器解决方案有哪些 showModalDialog 在 IE 和 FF 3 中引入 我个人认为没有 但是有很多 UI 工具包提供了这样的功能 例如jQuery UI http jque
  • 需要js、d3 和 nvd3 集成

    我面临整合的问题要求 questions tagged requirejs with d3 questions tagged d3 and nvd3 questions tagged nvd3 我找到了一个使用 require 的简单解决方
  • 替换两个引号之间的字符串

    我想转动一根绳子str hello my name is michael what s your s into hello my name is span class name michael span 我怎样才能在 JavaScript
  • Express.js Passport认证自动失败跳过策略

    UPDATE 我已将代码从护照本地注册内部移至单独的处理程序 并且运行良好 问题在于 Passport 和本地注册的使用 但我不知道为什么 我使用 Node js Express Passport 进行身份验证和注册设置 这是以前使用过的标
  • Restangular - _.contains() 不是一个函数

    如果您最近通过 Bower 更新了 Restangular 它将安装最新的 Lodash 新的 4 0 然而 这是一个问题 因为 Restangular Angular 现在会抛出错误 contains 不是函数 你怎么解决 解决方案非常简

随机推荐

  • 使用 Capistrano,如何回滚到特定版本?

    使用 Capistrano 如何回滚到特定版本 我的服务器文件夹中有一个 release 文件夹 我如何回滚到特定的文件夹 我是否可以在本地计算机上获取版本列表 我正在使用 GIT 但这不起作用 cap deploy s revision
  • 打字稿“不是索引器的子类型”,是什么意思?

    我正在通过阅读来学习 Typescript这份官方文件 https www typescriptlang org docs handbook interfaces html关于索引器类型 我无法理解这段代码 interface Number
  • 大范围连续整数的数据结构?

    假设内存中有大量连续整数 每个整数都属于一个类别 两个操作必须是 O log n 将范围从一个类别移动到另一个类别 以及查找给定范围的类别计数 我很确定只要第一个操作的正确实现 第二个操作就可以轻松解决 每个整数都从一个类别开始 因此我从一
  • 带凭证的 AngularJS

    我一直在开发一个 AngularJS 项目 该项目必须将 AJAX 调用发送到 Restfull Web 服务 该网络服务位于另一个域中 因此我必须在服务器上启用 cors 我通过设置这些标头来做到这一点 cresp getHttpHead
  • 在 bash 中仅杀死管道中的第一个进程

    如果我有一个长时间运行的命令定期输出一些数据 例如tail F我想用 awk 或其他东西 处理 tail F service log awk END print How to kill the first process only tail
  • 二进制响应内容,请求库

    我正在阅读有关请求库的文档 它似乎已经非常过时了 我一步一步尝试了其中显示的所有示例 并在尝试运行以下代码时遇到了问题 import requests from PIL import Image from StringIO import S
  • 现有 ASP.NET 4 解决方案中的高效 URL 屏蔽/伪装/隐藏

    我当前的系统使用 IIS 6 和 7 使用 ASP NET 和 NET 4 中的 C 编写 我的目的是完全隐藏网址 根据客户请求 IE https myapp it mydomain com Secure folder1 folder2 f
  • 正则表达式匹配 Perl 中字符串的第二次出现

    我正在尝试匹配 perl 中字符串的第一次和第二次出现 输入的前几行 包含在 intersect 中 是 gi 112807938 emb CU075707 1 Xenopus tropicalis finished cDNA clone
  • 无法打开活动:无法创建 Android 视图模型实例

    我正在创建一个应用程序来扫描条形码并使用 Android 视图模型和 LiveData 将该信息获取到房间数据库中 这是错误消息 java lang RuntimeException Unable to start activity Com
  • 将 Autofac 容器传递给 WPF UserControl

    我正在使用 autofac 来解析 WPF 应用程序中的视图和视图模型 IComponentContext 自动传递到视图中 一个例子 public BusinessAuto int proposedCoverageId IComponen
  • 如何从JSP下载附件文件

    我想知道如何根据内容配置从 JSP 页面下载任何文件依恋来自邮件服务器 我想在 JSP 页面上创建一个链接 通过单击该链接 用户可以从邮件服务器下载文件 该链接应该用于内容处置依恋类型 我怎样才能在 JSP 中做到这一点 不要为此使用 JS
  • Visual Studio 抱怨编译调试时找不到 .exe

    我有一个非常简单的 C 应用程序 include
  • Ruby 中的 Monad 等价物

    Ruby 中 monad 的等效构造是什么 精确的技术定义 在 Ruby 中 一个 monad 可以是任何带有以下内容的类 bind and self unit定义的方法使得对于所有实例 m m class unit a bind f f
  • 定制锂路由场景

    我的任务是用大量预先存在的链接目录重写现有网站 为了便于论证 我们假设我们无法执行任何会更改链接目录的操作 以下是我们正在使用的链接结构的一些示例 项目页面将是 www domain com widgets some totally awe
  • 为什么java语句评估会发生这样的情况?

    int z 1 System out println z z System out println z z 输出将是 false true 我不明白为什么 请向我解释一下 的操作数 从左到右评估 http docs oracle com j
  • 下拉列表依赖于另一个下拉列表 tkinter

    我有一个包含汽车品牌的列表 还有第二个包含这些品牌的型号名称的列表 我想要两个下拉列表 首先 您选择品牌 然后在第二个下拉列表中选择型号 但仅限于所选品牌的型号 我得到以下代码 import tkinter as tk brands Bug
  • 具有类实例集合的 For-each 循环,多次处置警告

    这段代码 Private Sub assignButtons ByVal Buttons As Collection ByVal ToolButton As String ByVal nToolButtons As Integer For
  • 将我的付费应用的所有用户迁移到应用内购买

    实际上 我有 2 个应用程序 免费和付费 专业版 我想将我的 2 个应用程序迁移到具有应用程序内购买功能的免费应用程序 我可以保存所有在我的应用内购买中支付专业版费用的人吗 最好的方法是什么 这必须逻辑地处理 1 只需为所有人 推出App的
  • Firefox 5、6、7 和 XULRunner:分别是哪个版本?

    现在测试版已经发布 我正在尝试重新编译一个 Firefox 扩展 该扩展具有可与 Firefox 5 一起使用的二进制组件 根据this https developer mozilla org en Firefox 5 for develo
  • 如何检查十六进制颜色是否“太黑”?

    我正在尝试评估颜色选择器选择的颜色的暗度 看看它是否 太黑 如果是 则将其设置为白色 我想我可以使用十六进制值的第一个字符来实现这一点 它正在工作 但它也在切换一些合法的 浅 颜色 我有以下代码 if lightcolor substrin