HTML5 简单的颜色选取器
<!DOCTYPE html><html lang="zh">
<head>
<meta charset="gbk" />
<title>Canvas Example 4 (Detecting Colors)</title>
<script>
window.onload = function () {
//获取页面DOM元素
var preview = document.getElementById('preview')
var r = document.getElementById('r')
var g = document.getElementById('g')
var b = document.getElementById('b')
var a = document.getElementById('a')
var mx = document.getElementById('mx')
var my = document.getElementById('my')
var canvas = document.getElementById('myCanvas')
//绑定鼠标移动事件
canvas.addEventListener('mousemove', move, false)
var c = canvas.getContext('2d')
var building = new Image()
building.src = "cinema.png"//加载图片
building.onload=draw
function draw () {
c.drawImage(building, 0, 0, canvas.width, canvas.height)
}
function move (e) {
//在页面显示鼠标相对于窗口的坐标
mx.innerHTML = e.clientX
my.innerHTML = e.clientY
//获取图像数据
var img = c.getImageData(e.clientX, e.clientY, 1, 1)
var idata = img.data
//获取像素值
var red = idata[0]
var green = idata[1]
var blue = idata[2]
var alpha = idata[3]
//在页面显示像素的R，G，B，A值
r.innerHTML = red
g.innerHTML = green
b.innerHTML = blue
a.innerHTML = (alpha > 0) ? alpha : 'Transparent'
preview.style.backgroundColor = 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')'
}
}
</script>
<style type="text/css" media="screen">
body { margin: 0px padding: 0px }
canvas {
border: 1px solid black
float: left
}
ul {
list-style: none
margin: 10px 10px 10px 10px
padding: 0px
float: left
}
ul li { font-weight: bold }
ul li span { font-weight: normal }
ul li #preview { width: 50px height: 50px border: 1px solid black }
</style>
</head>
<body>
<canvas id="myCanvas" width="300" height="300">
Your browser doesn't include support for the canvas tag.
</canvas>
<ul>
<li><div id="preview"></div></li>
<li>Red: <span id="r">NULL</span></li>
<li>Green: <span id="g">NULL</span></li>
<li>Blue: <span id="b">NULL</span></li>
<li>Alpha: <span id="a">NULL</span></li>
<li>Mouse X: <span id="mx">NULL</span></li>
<li>Mouse Y: <span id="my">NULL</span></li>
</ul>
</body>
</html>
常用的几个参考色的英文你可以直接背一下，比如yellow、pink等；然后很多常用色都是简单的十六进制形式，比如#CCC，就是灰色，#DDD，接近白色的灰色。只要搞清楚RGB的构成模式，纯黑就是#000，纯白就是#FFF，那纯正的红色就是#F00，依次类推，很容易记住色板上的颜色，然后剩下的自己加减某个颜色就能混合出来了。RGB(0,0,0)=#000,rgb(255,255,255)=#fff.前者是十进制数，后者是十六进制数，不明白请自行百度十进制和十六进制换算关系。LAB 人眼对颜色的感觉 自然界中任何一点色都可以在Lab空间中表达出来，它的色彩空间比RGB空间还要大。另外，这种模式是以数字化方式来描述人的视觉感应，与设备无关，所以它弥补了RGB和 CMYK模式必须依赖于设备色彩特性的不足Lab空间取坐标Lab，其中L亮度；a的正数代表红色，负端代表绿色；b的正数代表黄色 然后改变lab的具体数值来改变颜色RGB 工业界的一种颜色标 显示器系统，彩色阴极射线管,彩色光栅图形的显示器 都使用R、G、B数值来驱动R、G、B 电子枪发射电子，并分别激发荧光屏上的R、G、B三种颜色的荧光粉 发出不同亮度的光线，并通过相加混合产生各种颜色；
html “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 F5E1A4是网页中用的rgb颜色
