一些简单的概念

参考原文

原色：

色环

所有颜色的源头被称为三原色，三原色指的是红色、黄色和蓝色。如果我们谈论的是屏幕的显示颜色，比如显示器，三原色则分别是红色、绿色和蓝色，也就是我们熟悉的 RGB。然后印刷业有另外一套标准 CMYK。

间色（混合色）：

间色

如果将红色和黄色、黄色和蓝色、蓝色和红色均匀混合，就会创建三种间色：绿色、橙色和紫色。将这些颜色应用进项目中，可以提供很强烈的对比。

三级颜色：

三级颜色

三次色来源于间色与原色的混合，主要有：红紫色、蓝紫色、蓝绿色、黄绿色、橙红色和橙黄色。

互补色：

互补色
互补色

互补色是指色轮上那些呈180°角的颜色。比如蓝色和橙色、红色和绿色、黄色和紫色等。互补色有非常强烈的对比度，在颜色饱和度很高的情况下，可以创建很多十分震撼的视觉效果。

相似色：

相似色
相似色

相似色是指在色轮上相邻的三个颜色。相似色是选择相近颜色时十分不错的方法，可以在同一个色调中制造丰富的质感和层次。一些很好的色彩组合有：蓝绿色、蓝色和蓝紫色；还有黄绿色、黄色和橘黄色。

三角色：
三角色
三角色

三角色也是一组颜色。是通过在色环上创建一个等边三角形来取出的一组颜色，可以让作品的颜色很丰富。

分散的互补色：

分散的互补色

分散的互补色和互补色的区别在于分散的互补色并不是取目标颜色正对面的颜色。拿上面的图做例子来说吧，黄色的互补色应该是紫色，但是我们取紫色旁边的两个颜色——紫红色和蓝紫色。这样子不仅可以有一个强烈的对比度，而且还可以让颜色更丰富。

四方色：

四方色

四方色是在色轮上画一个正方形，取四个角的颜色。在上面的例子中是：紫红色、橙黄色、黄绿色和蓝紫色。这个颜色真的超棒的，不信可以自己用用感受一下，尤其是使用其中一个颜色作为主色，其他的三个颜色作为辅助色的时候。

四方补色：

四方补色

四方补色和四方色的差别在于四方补色采用的是一个矩形。通过一组互补色两旁的颜色建立的色彩组合。如上图中的互补色橙色和蓝色，分别选用他们两旁的颜色来建立矩形，最终取得橙红色、橙黄色、蓝绿色和蓝紫色。

明暗：

明暗

颜色的色调也可以影响颜色给人的感觉，就拿上图的蓝色来说，第一张是原图，第二张添加了白色，第三张添加了黑色，同样的蓝色产生了不同的感觉。在实际应用中，可以在采用单色配色方案时，通过改变颜色的色调来创建不同的感觉。

暖色：

暖色

暖色可以创造温暖的感觉，暖色通常会让人联想起太阳、火焰和爱情。红色是血的颜色，感觉是温暖的，橙色和黄色会给人夏天的感觉。给图像添加一个橙色的滤镜，图像看起来就会有温馨快乐的感觉。

冷色：

冷色

冷色也有其独特的含义，通常会让人联想起凉爽的气候、冬季、死亡、悲伤、冰、夜晚和水这些事物。冷色可以给人平静、安宁、新人、干净的感觉。紫色与尊贵经常联系在一起，看起来十分内敛。

配色方法

色相的搭配方式：

色相环上所有色彩的变化，或是色彩与色彩之间的差异，都以“平均”的方式做配置。也就是说，从这个色相环中，无论以正三角形或正方形选择色彩作组合，选出的色彩彼此间差异都是均等的，整体设计便自然呈现协调的状态。

从自然中取得协调的配色：

人类对于平常看习惯的事物都会认为是安全的事物，一直被安全的事物包围着，我们就能够过着心情安稳的生活。既然大自然是从久远的太古以来人类已经看习惯的颜色，那么就举出一些将自热中存在的配色与熟悉的风景色彩，并结合设计来活学活用吧。

安利一些工具：

Web 内容无障碍指南 (WCAG)

Web内容无障碍指南（WCAG）2.0涵盖范围广泛，涉及了一些建议，这些建议可使Web内容更容易访问。遵循这些原则，能够让内容更易为广大残障人士所接受，包括失明和低视力、失聪和重听、学习障碍、认知障碍、行动不便、言语残疾、光过敏患者和这些病症的复合患者。遵循这些原则也可让普通用户更容易访问您的Web内容。 – 摘要

WEB 配色也应该满足标准。https://www.w3.org/Translations/WCAG20-zh/

颜色对比度：

我们平时配色时应该满足 WCAG 的标准，WCAG 2.0 有一项对比度的标准，其要求对比度应当满足 4.5:1 的最小对比度（AA 级）。

这里有一个好用的工具：色彩对比值校验工具

颜色的意义

简单实现

rgb -> hex

简单直白，取 r g a 的颜色值直接输出他的 16 进制：

1
2
3
4
5
6
7
8
function componentToHex (c) {
  var hex = c.toString(16)
  return hex.length == 1 ? '0' + hex : hex
}

function rgbToHex (r, g, b) {
  return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b)
}

位运算：

1
2
3
function rgbToHex (r, g, b) {
  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
}

hex -> rgb

正则实现的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function hexToRgb (hex) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
  hex = hex.replace(shorthandRegex, function (m, r, g, b) {
    return r + r + g + g + b + b
  })

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null
}

位运算：

1
2
3
4
5
6
7
8
function hexToRgb(hex) {
    var bigint = parseInt(hex, 16);
    var r = (bigint >> 16) & 255;
    var g = (bigint >> 8) & 255;
    var b = bigint & 255;

    return r + "," + g + "," + b;
}

这个实现很巧妙：

1
2
3
4
5
6
7
8
function hexToRgbNew (hex) {
  var arrBuff = new ArrayBuffer(4)
  var vw = new DataView(arrBuff)
  vw.setUint32(0, parseInt(hex, 16), false)
  var arrByte = new Uint8Array(arrBuff)

  return arrByte[1] + ',' + arrByte[2] + ',' + arrByte[3]
}

hexoToHS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function hexToHSL (hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
  r = parseInt(result[1], 16)
  g = parseInt(result[2], 16)
  b = parseInt(result[3], 16)
  r /= 255, g /= 255, b /= 255
  var max = Math.max(r, g, b), min = Math.min(r, g, b)
  var h, s, l = (max + min) / 2
  if (max == min) {
    h = s = 0 // achromatic
  } else {
    var d = max - min
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break
      case g: h = (b - r) / d + 2; break
      case b: h = (r - g) / d + 4; break
    }
    h /= 6
  }
  h = (360 * h).toFixed(3)
  s = (100 * s).toFixed(3)
  l = (100 * l).toFixed(3)
  return `hsl(${h}, ${s}%, ${l}%)`
}

这些实现都在这 RGB 与 16 进制颜色的转换