javascript - tricks to deal with colors

最新推荐文章于 2020-09-28 19:24:24 发布

原创最新推荐文章于 2020-09-28 19:24:24 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了几种常见的颜色表示方法，包括RGB数值、百分比、十六进制长格式及短格式等，并提供了一段jQuery插件代码示例，展示如何将不同格式的颜色值统一转换为RGB数值格式。

There are a couple of ways to represent a color information. and it always cause confusion across different browsers.

• rgb(R,G,B) - Where R, G, B are numbers from 0 to 255.

• rgb(R%,G%,B%) - Where R, G, B are numbers from 0% to 100%.

• #RRGGBB - Where RR, GG, BB are hexadecimal representations of the numbers 0 through 255.

• #RGB - Where R, G, B are hexadecimal representations similar to the previous one, but in shorthand

(e.g. #F54 is equal to #FF5544).

• red, blue, etc. - The name representing a set of RGB values.

the following code is from the jQuery and is written by jQuery's color plugin's author, I am showing it here to manifest just a reminder of the different of different colors.

/**************************************
*@Name: expandoattr.js
*@Summary
*  this function shows hwo you can parse colors in different format to a single format.
*
*
***************************************/
var num = /rgb\(\s*([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\s*\)/,
    pc = /rgb\(\s*([0-9.]+)%\s*,\s*([0-9.]+)%\s*,\s*([0-9.]+)%\s*\)/,
    hex = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,
    hex2 = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/;
// Parse strings looking for color tuples [255,255,255]
function getRGB(color) {
  var result;
  // Look for rgb(num,num,num)
  if (result = num.exec(color))
    return [parseInt(result[1]), parseInt(result[2]),
parseInt(result[3])];

  // Look for rgb(num%,num%,num%)
  if (result = pc.exec(color))
    return [parseFloat(result[1]) * 2.55, parseFloat(result[2]) * 2.55,
parseFloat(result[3]) * 2.55];
  // Look for #a0b1c2
  if (result = hex.exec(color))
    return [parseInt(result[1], 16), parseInt(result[2], 16),
parseInt(result[3], 16)];
  // Look for #fff
  if (result = hex2.exec(color))
    return [parseInt(result[1] + result[1], 16),
parseInt(result[2] + result[2], 16),
parseInt(result[3] + result[3], 16)];
  // Otherwise, we're most likely dealing with a named color
  return colors[color.replace(/\s+/g, "").toLowerCase()];
}
// Map color names to RGB values
var colors = {
  aqua: [0, 255, 255],
  azure: [240, 255, 255],
  beige: [245, 245, 220],
  black: [0, 0, 0],
  blue: [0, 0, 255],
  // ... snip ...
  silver: [192, 192, 192],
  white: [255, 255, 255],
  yellow: [255, 255, 0]
};