ylbtech-HTML-参考手册: HTML 拾色器

1、

HTML 拾色器

选取颜色:

或输入颜色值:

或使用 HTML5:

选择的颜色:

黑色文本

阴影

白色文本

阴影

red

#ff0000

rgb(255, 0, 0)

hsl(0, 100%, 50%)

hsv(0, 100%, 100%)

淡 / 暗:

100%		#ffffff
95%		#ffe5e5
90%		#ffcccc
85%		#ffb3b3
80%		#ff9999
75%		#ff8080
70%		#ff6666
65%		#ff4d4d
60%		#ff3333
55%		#ff1a1a

50%		#ff0000

45%		#e60000
40%		#cc0000
35%		#b30000
30%		#990000
25%		#800000
20%		#660000
15%		#4d0000
10%		#330000
5%		#1a0000
0%		#000000

Hue

Hue	Hex	Rgb	Hsl	Hsv
0	#ff0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)	hsv(0, 100%, 100%)
15	#ff4000	rgb(255, 64, 0)	hsl(15, 100%, 50%)	hsv(15, 100%, 100%)
30	#ff8000	rgb(255, 128, 0)	hsl(30, 100%, 50%)	hsv(30, 100%, 100%)
45	#ffbf00	rgb(255, 191, 0)	hsl(45, 100%, 50%)	hsv(45, 100%, 100%)
60	#ffff00	rgb(255, 255, 0)	hsl(60, 100%, 50%)	hsv(60, 100%, 100%)
75	#bfff00	rgb(191, 255, 0)	hsl(75, 100%, 50%)	hsv(75, 100%, 100%)
90	#80ff00	rgb(128, 255, 0)	hsl(90, 100%, 50%)	hsv(90, 100%, 100%)
105	#40ff00	rgb(64, 255, 0)	hsl(105, 100%, 50%)	hsv(105, 100%, 100%)
120	#00ff00	rgb(0, 255, 0)	hsl(120, 100%, 50%)	hsv(120, 100%, 100%)
135	#00ff40	rgb(0, 255, 64)	hsl(135, 100%, 50%)	hsv(135, 100%, 100%)
150	#00ff80	rgb(0, 255, 128)	hsl(150, 100%, 50%)	hsv(150, 100%, 100%)
165	#00ffbf	rgb(0, 255, 191)	hsl(165, 100%, 50%)	hsv(165, 100%, 100%)
180	#00ffff	rgb(0, 255, 255)	hsl(180, 100%, 50%)	hsv(180, 100%, 100%)
195	#00bfff	rgb(0, 191, 255)	hsl(195, 100%, 50%)	hsv(195, 100%, 100%)
210	#007fff	rgb(0, 127, 255)	hsl(210, 100%, 50%)	hsv(210, 100%, 100%)
225	#0040ff	rgb(0, 64, 255)	hsl(225, 100%, 50%)	hsv(225, 100%, 100%)
240	#0000ff	rgb(0, 0, 255)	hsl(240, 100%, 50%)	hsv(240, 100%, 100%)
255	#4000ff	rgb(64, 0, 255)	hsl(255, 100%, 50%)	hsv(255, 100%, 100%)
270	#7f00ff	rgb(127, 0, 255)	hsl(270, 100%, 50%)	hsv(270, 100%, 100%)
285	#bf00ff	rgb(191, 0, 255)	hsl(285, 100%, 50%)	hsv(285, 100%, 100%)
300	#ff00ff	rgb(255, 0, 255)	hsl(300, 100%, 50%)	hsv(300, 100%, 100%)
315	#ff00bf	rgb(255, 0, 191)	hsl(315, 100%, 50%)	hsv(315, 100%, 100%)
330	#ff0080	rgb(255, 0, 128)	hsl(330, 100%, 50%)	hsv(330, 100%, 100%)
345	#ff0040	rgb(255, 0, 64)	hsl(345, 100%, 50%)	hsv(345, 100%, 100%)
360	#ff0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)	hsv(0, 100%, 100%)

HSL Saturation

Sat	Hex	Rgb	Hsl	Hsv
100%	#ff0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)	hsv(0, 100%, 100%)
95%	#f90606	rgb(249, 6, 6)	hsl(0, 95%, 50%)	hsv(0, 97%, 98%)
90%	#f20d0d	rgb(242, 13, 13)	hsl(0, 90%, 50%)	hsv(0, 95%, 95%)
85%	#ec1313	rgb(236, 19, 19)	hsl(0, 85%, 50%)	hsv(0, 92%, 93%)
80%	#e61919	rgb(230, 25, 25)	hsl(0, 80%, 50%)	hsv(0, 89%, 90%)
75%	#df2020	rgb(223, 32, 32)	hsl(0, 75%, 50%)	hsv(0, 86%, 88%)
70%	#d92626	rgb(217, 38, 38)	hsl(0, 70%, 50%)	hsv(0, 82%, 85%)
65%	#d22d2d	rgb(210, 45, 45)	hsl(0, 65%, 50%)	hsv(0, 79%, 83%)
60%	#cc3333	rgb(204, 51, 51)	hsl(0, 60%, 50%)	hsv(0, 75%, 80%)
55%	#c63939	rgb(198, 57, 57)	hsl(0, 55%, 50%)	hsv(0, 71%, 78%)
50%	#bf4040	rgb(191, 64, 64)	hsl(0, 50%, 50%)	hsv(0, 67%, 75%)
45%	#b94646	rgb(185, 70, 70)	hsl(0, 45%, 50%)	hsv(0, 62%, 73%)
40%	#b34d4d	rgb(179, 77, 77)	hsl(0, 40%, 50%)	hsv(0, 57%, 70%)
35%	#ac5353	rgb(172, 83, 83)	hsl(0, 35%, 50%)	hsv(0, 52%, 68%)
30%	#a65959	rgb(166, 89, 89)	hsl(0, 30%, 50%)	hsv(0, 46%, 65%)
25%	#9f6060	rgb(159, 96, 96)	hsl(0, 25%, 50%)	hsv(0, 40%, 63%)
20%	#996666	rgb(153, 102, 102)	hsl(0, 20%, 50%)	hsv(0, 33%, 60%)
15%	#936c6c	rgb(147, 108, 108)	hsl(0, 15%, 50%)	hsv(0, 26%, 58%)
10%	#8c7373	rgb(140, 115, 115)	hsl(0, 10%, 50%)	hsv(0, 18%, 55%)
5%	#867979	rgb(134, 121, 121)	hsl(0, 5%, 50%)	hsv(0, 10%, 53%)
0%	#808080	rgb(128, 128, 128)	hsl(0, 0%, 50%)	hsv(0, 0%, 50%)

HSL 淡 / 暗

Lum	Hex	Rgb	Hsl	Hsv
100%	#ffffff	rgb(255, 255, 255)	hsl(0, 0%, 100%)	hsv(0, 0%, 100%)
95%	#ffe5e5	rgb(255, 229, 229)	hsl(0, 100%, 95%)	hsv(0, 10%, 100%)
90%	#ffcccc	rgb(255, 204, 204)	hsl(0, 100%, 90%)	hsv(0, 20%, 100%)
85%	#ffb3b3	rgb(255, 179, 179)	hsl(0, 100%, 85%)	hsv(0, 30%, 100%)
80%	#ff9999	rgb(255, 153, 153)	hsl(0, 100%, 80%)	hsv(0, 40%, 100%)
75%	#ff8080	rgb(255, 128, 128)	hsl(0, 100%, 75%)	hsv(0, 50%, 100%)
70%	#ff6666	rgb(255, 102, 102)	hsl(0, 100%, 70%)	hsv(0, 60%, 100%)
65%	#ff4d4d	rgb(255, 77, 77)	hsl(0, 100%, 65%)	hsv(0, 70%, 100%)
60%	#ff3333	rgb(255, 51, 51)	hsl(0, 100%, 60%)	hsv(0, 80%, 100%)
55%	#ff1a1a	rgb(255, 26, 26)	hsl(0, 100%, 55%)	hsv(0, 90%, 100%)
50%	#ff0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)	hsv(0, 100%, 100%)
45%	#e60000	rgb(230, 0, 0)	hsl(0, 100%, 45%)	hsv(0, 100%, 90%)
40%	#cc0000	rgb(204, 0, 0)	hsl(0, 100%, 40%)	hsv(0, 100%, 80%)
35%	#b30000	rgb(179, 0, 0)	hsl(0, 100%, 35%)	hsv(0, 100%, 70%)
30%	#990000	rgb(153, 0, 0)	hsl(0, 100%, 30%)	hsv(0, 100%, 60%)
25%	#800000	rgb(128, 0, 0)	hsl(0, 100%, 25%)	hsv(0, 100%, 50%)
20%	#660000	rgb(102, 0, 0)	hsl(0, 100%, 20%)	hsv(0, 100%, 40%)
15%	#4d0000	rgb(77, 0, 0)	hsl(0, 100%, 15%)	hsv(0, 100%, 30%)
10%	#330000	rgb(51, 0, 0)	hsl(0, 100%, 10%)	hsv(0, 100%, 20%)
5%	#1a0000	rgb(26, 0, 0)	hsl(0, 100%, 5%)	hsv(0, 100%, 10%)
0%	#000000	rgb(0, 0, 0)	hsl(0, 0%, 0%)	hsv(0, 0%, 0%)

HSV Saturation

Sat	Hex	Rgb	Hsl	Hsv
100%	#ff0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)	hsv(0, 100%, 100%)
95%	#ff0d0d	rgb(255, 13, 13)	hsl(0, 100%, 53%)	hsv(0, 95%, 100%)
90%	#ff1919	rgb(255, 25, 25)	hsl(0, 100%, 55%)	hsv(0, 90%, 100%)
85%	#ff2626	rgb(255, 38, 38)	hsl(0, 100%, 57%)	hsv(0, 85%, 100%)
80%	#ff3333	rgb(255, 51, 51)	hsl(0, 100%, 60%)	hsv(0, 80%, 100%)
75%	#ff4040	rgb(255, 64, 64)	hsl(0, 100%, 63%)	hsv(0, 75%, 100%)
70%	#ff4d4d	rgb(255, 77, 77)	hsl(0, 100%, 65%)	hsv(0, 70%, 100%)
65%	#ff5959	rgb(255, 89, 89)	hsl(0, 100%, 68%)	hsv(0, 65%, 100%)
60%	#ff6666	rgb(255, 102, 102)	hsl(0, 100%, 70%)	hsv(0, 60%, 100%)
55%	#ff7373	rgb(255, 115, 115)	hsl(0, 100%, 73%)	hsv(0, 55%, 100%)
50%	#ff8080	rgb(255, 128, 128)	hsl(0, 100%, 75%)	hsv(0, 50%, 100%)
45%	#ff8c8c	rgb(255, 140, 140)	hsl(0, 100%, 78%)	hsv(0, 45%, 100%)
40%	#ff9999	rgb(255, 153, 153)	hsl(0, 100%, 80%)	hsv(0, 40%, 100%)
35%	#ffa6a6	rgb(255, 166, 166)	hsl(0, 100%, 83%)	hsv(0, 35%, 100%)
30%	#ffb3b3	rgb(255, 179, 179)	hsl(0, 100%, 85%)	hsv(0, 30%, 100%)
25%	#ffbfbf	rgb(255, 191, 191)	hsl(0, 100%, 88%)	hsv(0, 25%, 100%)
20%	#ffcccc	rgb(255, 204, 204)	hsl(0, 100%, 90%)	hsv(0, 20%, 100%)
15%	#ffd9d9	rgb(255, 217, 217)	hsl(0, 100%, 93%)	hsv(0, 15%, 100%)
10%	#ffe6e6	rgb(255, 230, 230)	hsl(0, 100%, 95%)	hsv(0, 10%, 100%)
5%	#fff2f2	rgb(255, 242, 242)	hsl(0, 100%, 98%)	hsv(0, 5%, 100%)
0%	#ffffff	rgb(255, 255, 255)	hsl(0, 0%, 100%)	hsv(0, 0%, 100%)

HSV 亮 / 暗

Value	Hex	Rgb	Hsl	Hsv
100%	#ff0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)	hsv(0, 100%, 100%)
95%	#f20000	rgb(242, 0, 0)	hsl(0, 100%, 48%)	hsv(0, 100%, 95%)
90%	#e60000	rgb(230, 0, 0)	hsl(0, 100%, 45%)	hsv(0, 100%, 90%)
85%	#d90000	rgb(217, 0, 0)	hsl(0, 100%, 43%)	hsv(0, 100%, 85%)
80%	#cc0000	rgb(204, 0, 0)	hsl(0, 100%, 40%)	hsv(0, 100%, 80%)
75%	#bf0000	rgb(191, 0, 0)	hsl(0, 100%, 38%)	hsv(0, 100%, 75%)
70%	#b30000	rgb(179, 0, 0)	hsl(0, 100%, 35%)	hsv(0, 100%, 70%)
65%	#a60000	rgb(166, 0, 0)	hsl(0, 100%, 33%)	hsv(0, 100%, 65%)
60%	#990000	rgb(153, 0, 0)	hsl(0, 100%, 30%)	hsv(0, 100%, 60%)
55%	#8c0000	rgb(140, 0, 0)	hsl(0, 100%, 28%)	hsv(0, 100%, 55%)
50%	#800000	rgb(128, 0, 0)	hsl(0, 100%, 25%)	hsv(0, 100%, 50%)
45%	#730000	rgb(115, 0, 0)	hsl(0, 100%, 23%)	hsv(0, 100%, 45%)
40%	#660000	rgb(102, 0, 0)	hsl(0, 100%, 20%)	hsv(0, 100%, 40%)
35%	#590000	rgb(89, 0, 0)	hsl(0, 100%, 18%)	hsv(0, 100%, 35%)
30%	#4d0000	rgb(77, 0, 0)	hsl(0, 100%, 15%)	hsv(0, 100%, 30%)
25%	#400000	rgb(64, 0, 0)	hsl(0, 100%, 13%)	hsv(0, 100%, 25%)
20%	#330000	rgb(51, 0, 0)	hsl(0, 100%, 10%)	hsv(0, 100%, 20%)
15%	#260000	rgb(38, 0, 0)	hsl(0, 100%, 8%)	hsv(0, 100%, 15%)
10%	#1a0000	rgb(26, 0, 0)	hsl(0, 100%, 5%)	hsv(0, 100%, 10%)
5%	#0d0000	rgb(13, 0, 0)	hsl(0, 100%, 3%)	hsv(0, 100%, 5%)
0%	#000000	rgb(0, 0, 0)	hsl(0, 0%, 0%)	hsv(0, 0%, 0%)

RGB (Red, Green, Blue)

Red	Green	Blue
255	0	0

rgb(255, 0, 0) #ff0000

2、

1、

http://www.runoob.com/tags/html-colorpicker.html

2、

6.返回顶部

作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

HTML-参考手册: HTML 拾色器的更多相关文章

原生js编写的安全色拾色器
<html > <head> <meta http-equiv="Content-Type" content="text/html; cha ...
PS拾色器(前景色背景色)快捷键
快捷键 I 是拾色器 X 是前后色切换
Android Studio中如何设置颜色拾色器工具
Android Studio如何设置颜色拾色器工具Color Picker? 你可能下载过一些获取颜色值的一些小工具, 这种方式获取颜色,需要先切换窗口转跳到桌面,然后打开拾色器小工具程序,然后去拾取 ...
Linux下的高级拾色器—Pick
导读虽然大多数设计师都在使用 Mac,但也有一少部分在使用 Windows 甚至是 Linux 系统.在 Mac 和 Windows 中都有非常丰富的拾色器工具或插件可用,反而在开源界中这类颜色选择 ...
优动漫PAINT基础系列之拾色器教学
在优动漫PAINT中有类似Photoshop的拾色器功能么?在优动漫PAINT中,可以直接输入颜色数值选择颜色么?当然是可以的啦!怎么呼出拾色器界面~ 看这边... 前段时间小编有收到一些小伙伴的疑问 ...
使用 HTML5 canvas制作拾色器
自制的拾色器漂亮吧,哈哈废话不多说直接上代码,希望可以帮到需要的朋友 <html><head> <style> .canvas_color{p ...
拾色器，可以取出电脑屏幕的任何颜色，ui以及程序员前端等常用软件，文件很小，300K
作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985,转载请说明出处. 今天给大家介绍一个小软件,挺实用的,叫做拾色器. 用途:取出电脑屏幕的任意颜色,当你 ...
使用css3和javascript开发web拾色器实例
本实例中的web拾色器功能使用css3实现页面效果,即在页面上显示的元素用css3样式来实现的.再使用js生成拾色器颜色数据,并控制各元素的鼠标事件.当事件作为反应时,获取到对应的数据并显示颜色值. ...
小程序拾色器（颜色选择器）组件mini-color-picker
特性: 现有方案分析 we-color-picker 需注意组件定位,操作不跟手不流畅,配置复杂.其定位会撑开原有页面,体验不佳.滑动距离按像素区分(固定),需考虑设备分辨率,不利于多端. Papae ...

随机推荐

id4用用户名和密码方式控制身份验证
建议看这个文章的时候先学习一下B站的id4教程以及文章中推荐的事例教程和官方例子: https://www.jianshu.com/p/259ef2256ec5
测开之路三十五：css引入
CSS是一种定义样式结构,如字体.颜色.位置等的语言,被用于描述网页上的信息格式化和现实的方式.CSS样式可以直接存储于HTML网页或者单独的样式单文件.无论哪一种方式,样式单包含将样式应用到指定类型 ...
测开之路三十一：Flask基础之请求与相应
from flask import requestrequest.pathrequest.methodrequest.formrequest.argsrequest.values 一般用form获取p ...
exporter
何为 Prometheus Exporter? Prometheus 监控基于一个很简单的模型: 主动抓取目标的指标接口(HTTP 协议)获取监控指标, 再存储到本地或远端的时序数据库. Promet ...
【翻译】Knowledge-Aware Natural Language Understanding（摘要及目录）
翻译Pradeep Dasigi的一篇长文 Knowledge-Aware Natural Language Understanding 基于知识感知的自然语言理解摘要 Natural Langua ...
upc组队赛14 As rich as Crassus【扩展中国剩余定理】
As rich as Crassus 题目链接题目描述 Crassus, the richest man in the world, invested some of his money with ...
http常见7种请求
抛砖引玉,聊下概念性的东西先: HTTP协议 (Hyper Text Transfer Protocol) HTTP是一个基于TCP/IP通信协议来传递数据,包括html文件.图像.结果等,即是一个客 ...
css控制文本对齐
h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} text-decoration 属性用来 ...
Java Web servlet中的cookie
点击submit后: 点击查看Cookies: 在C:\Documents and Settings\Administrator\Cookies目录下面会有一个 hongten@webproj ...
kubernetes容器集群管理启动一个测试示例
创建nginx 创建3个nginx副本 [root@master bin]# kubectl run nginx --image=nginx --replicas=3 kubectl run --ge ...

HTML-参考手册: HTML 拾色器