前言：本demo使用了HTML5的input:color元素，不同浏览器对取色器的实现不同，Chrome浏览器或者与其同内核的浏览器都可以正常使用

代码及使用方法

html代码如下：

点击在线运行

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>取色器</title><style>input[type="color"] {width: 200px;height: 200px;}div {float: left;margin: 50px 50px;}input[type="text"] {cursor: pointer;padding-left: 20px;}</style>
</head><body><div id="box1"><input type="color" name="" value="#ff0000" id="color"></div><div><b style="color: rgb(252, 85, 49)">鼠标点击后就会复制到剪切板</b><p><span>HEX: </span><input type="text" name="" value="#ff0000" id="hex" readonly></p><p><span>RGB: </span><input type="text" name="" value="rgb(255, 0, 0)" id="rgb" readonly></p></div><script>const colorObj = document.getElementById('color');const hexObj = document.getElementById('hex');const rgbObj = document.getElementById('rgb');colorObj.oninput = function () {hexObj.value = colorObj.value;rgbObj.value = hexToRGB(colorObj.value);}hexObj.onclick = function () {copyToClipboard(hexObj.value);}rgbObj.onclick = function () {copyToClipboard(hexToRGB(colorObj.value));}// hex 转换为 rgbfunction hexToRGB(hex) {console.log(hex, typeof hex);const red = Number('0x' + hex.substring(1, 3));const green = Number('0x' + hex.substring(3, 5));const blue = Number('0x' + hex.substring(5, 7));return `rgb(${red}, ${green}, ${blue})`;}// 复制到剪切板function copyToClipboard(str) {if (navigator && navigator.clipboard && navigator.clipboard.writeText)return navigator.clipboard.writeText(str);return Promise.reject('The Clipboard API is not available.');};</script>
</body>
</html>

使用方法

HTML实现在线取色器相关推荐

方便快捷的在线取色器
方便快捷的在线取色器点击代码复制处
颜色选择器vs在线取色器
在线颜色选择器 http://gavin-yyc.github.io/colorconvert/ 可以输入rgb/hsv/hex,转换成其他的输出在线取色器 http://www.jiniannet ...
【转】在线网页取色器
如果你在玩儿所谓的web2.0,那么这个站的在线取色器很不错,简单好用配色经典! http://wellstyled.com/tools/colorscheme2/index-en.html
ppt取色html,如何进行屏幕取色,取色器工具怎么使用,教你在线识别颜色
有时候我们设计图片或者网站是时候,常常会为颜色为头疼,或者在某个地方看到中意的颜色想运用到自己的作品上面,却发现不知道其颜色模式是怎么搭配而犯难,我们常见的颜色模式有RGB.CMYK等,只要知道颜色模 ...
10款屏幕取色器/颜色拾取工具软件介绍及下载地址[转]
10款屏幕取色器/颜色拾取工具软件介绍及下载地址(附截图) 2009年12月07日 14:13 在做网页设计和程序界面的时候,看到比较喜欢的图片颜色,总是要拾取下来应用到自己的网页或图片的颜色中,但是 ...
播放视频android学习笔记---44_在线视频播放器,网络视频解析器,SurfaceView 控件使用方法...
最近用使开辟的过程中涌现了一个小题问,顺便录记一下因原和法方--播放视频 44_在线视频播放器 ------------------------- 1.注意这里,在模拟器中,android2.2和an ...
Android --- 新版本取色器吸管工具点击无效，没反应
今天更新的 Android Studio ,在使用取色器吸管取色的时候发现点击没反应,发现不是没反应,而是很久之后才会有反应,我也不知什么情况,到网上搜索解决办法. 解决方法: 双击 shift,然后 ...
android 取色器_老板夸我PPT配色高级，以为我学过设计，其实我都是从Logo取色
我们都知道用好一个 logo,可以做出一套比较简洁而且精致的 PPT 模板. 为了让这个页面看起来更丰富一些,我们选取的颜色是 logo 的主色调: 虽然一直在强调我们要从 logo 中取色,但是在进 ...
android 自定义取色器,【Android自定义View】仿Photoshop取色器ColorPicker(二)
ColorPicker 一款仿Photoshop取色器的Android版取色器. 前言上一篇已经简单介绍了ColorPicker的项目结构以及两种颜色空间,接下来我们详细解析一下ColorPicke ...
windows 取色器_这款 Windows 10 官方「外挂」让你取色更便捷
去年微软针对 Windows 10 系统重启了 PowerToys 工具,并且针对 Windows 10 系统特性推出了一系列的小工具来改善 Windows 10 的易用性. 时隔一年后的今天,这款工 ...

HTML实现在线取色器

代码及使用方法

HTML实现在线取色器相关推荐

最新文章

热门文章