Question

我已经构建了一个名称 - [rgb] Javascript对象。你的基本：

namedColors = {
  AliceBlue: [240, 248, 255],
  AntiqueWhite: [250, 235, 215],
  ...

对象。但是我想到我应该能够取一个名字字符串，“AliceBlue”，比如..并且让JavaScript找到它的某种RGB表示（十六进制很好）。我知道浏览器中至少隐藏了140种命名颜色，但我似乎无法找到它们。

是否有CSS或“style = ...”特技让我查找颜色名称的RGB表示？

Answer 1

使用函数“name2hex”和“name2rgb”查看Colors.js，此库将返回颜色名称的十六进制或rgb值。

Answer 2

这是我最终解决的问题。我意识到颜色有两种类型：css字符串和webgl类型数组（通常是4个浮点数或整数，取决于）。

地狱，让浏览器想象一下：创建一个1x1画布，用任何字符串颜色填充它，抓住像素，然后演变成一个rgba数组。下面有两个实用程序可以创建附加的1x1 2d canvas ctx。

# Return an RGB array given any legal CSS color, null otherwise.
# http://www.w3schools.com/cssref/css_colors_legal.asp
# The string can be CadetBlue, #0f0, rgb(255,0,0), hsl(120,100%,50%)
# The rgba/hsla forms ok too, but we don't return the a.
# Note: The browser speaks for itself: we simply set a 1x1 canvas fillStyle
# to the string and create a pixel, returning the r,g,b values.
# Warning: r=g=b=0 can indicate an illegal string.  We test
# for a few obvious cases but beware of unexpected [0,0,0] results.
ctx1x1: u.createCtx 1, 1 # share across calls. closure wrapper better?
stringToRGB: (string) ->
  @ctx1x1.fillStyle = string
  @ctx1x1.fillRect 0, 0, 1, 1
  [r, g, b, a] = @ctx1x1.getImageData(0, 0, 1, 1).data
  return [r, g, b] if (r+g+b isnt 0) or
    (string.match(/^black$/i)) or
    (string in ["#000","#000000"]) or
    (string.match(/rgba{0,1}\(0,0,0/i)) or
    (string.match(/hsla{0,1}\(0,0%,0%/i))
  null

我喜欢它的是浏览器为自己说话。任何合法的字符串都可以。唯一的缺点是，如果字符串是非法的，你会变黑，所以需要做一些检查。错误检查不是很好，但在我的使用中我不需要它。

实用程序功能：

# Create a new canvas of given width/height
createCanvas: (width, height) ->
  can = document.createElement 'canvas'
  can.width = width; can.height = height
  can
# As above, but returing the context object.
# Note ctx.canvas is the canvas for the ctx, and can be use as an image.
createCtx: (width, height) ->
  can = @createCanvas width, height
  can.getContext "2d"

Answer 3

如果您有一个整数表示，则可能会出现以下情况：

function getHex(color){
    return "#"+color.map(function(x){return x.toString(16).toUpperCase();}).join("");
}

这是Fiddle。

对于其余部分，您可以创建一个元素并获取其颜色。

el=document.createElement("DIV");
el.style.backgroundColor="aliceblue";
console.log(el.style.backgroundColor);

小提琴that

Answer 4

您可以使用画布从名称中获取RGBA颜色。

请看看这个小提琴：https://jsfiddle.net/AaronWatters/p1y298zk/19/

<html>
<head>
  <style>
  html, body { width: 100%; height: 100%; background: #000; }
  body { margin: 0; overflow: hidden; }
  canvas { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js'></script>
  <script src='https://threejs.org/examples/js/controls/TrackballControls.js'></script>

  <script type='x-shader/x-vertex' id='vertex-shader'>
    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;
    uniform vec3 cameraPosition;

    attribute vec2 uv;
    attribute vec3 position;

    varying vec2 vUv;

    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  </script>

  <script type='x-shader/x-fragment' id='fragment-shader'>
    precision highp float; // set float precision (optional)

    uniform sampler2D texture; // identify the texture as a uniform argument
    varying vec2 vUv; // identify the uv values as a varying attribute

    void main() {
      vec4 color = texture2D(texture, vUv);
      gl_FragColor = vec4(color[0], color[1], color[2], 0.0);
    }
  </script>

  <script>

  function getScene() {
    var scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);
    return scene;
  }

  function getCamera() {
    var aspectRatio = window.innerWidth / window.innerHeight;
    var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);
    camera.position.set(0, 1, 10);
    return camera;
  }

  function getRenderer() {
    // Create the canvas with a renderer
    var renderer = new THREE.WebGLRenderer({antialias: true});
    // Add support for retina displays
    renderer.setPixelRatio(window.devicePixelRatio);
    // Specify the size of the canvas
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add the canvas to the DOM
    document.body.appendChild(renderer.domElement);
    return renderer;
  }

  function getControls(camera, renderer) {
    var controls = new THREE.TrackballControls(camera, renderer.domElement);
    controls.zoomSpeed = 0.4;
    controls.panSpeed = 0.4;
    return controls;
  }

  function loadImage() {

    var geometry = new THREE.BufferGeometry();

    /*
    Now we need to push some vertices into that geometry to identify the coordinates the geometry should cover
    */

    // Identify the image size
    var imageSize = {width: 10, height: 7.5};

    // Identify the x, y, z coords where the image should be placed
    var coords = {x: -5, y: -3.75, z: 0};

    // Add one vertex for each corner of the image, using the
    // following order: lower left, lower right, upper right, upper left
    var vertices = new Float32Array([
      coords.x, coords.y, coords.z, // bottom left
      coords.x+imageSize.width, coords.y, coords.z, // bottom right
      coords.x+imageSize.width, coords.y+imageSize.height, coords.z, // upper right
      coords.x, coords.y+imageSize.height, coords.z, // upper left
    ])

    // set the uvs for this box; these identify the following corners:
    // lower-left, lower-right, upper-right, upper-left
    var uvs = new Float32Array([
      0.0, 0.0,
      1.0, 0.0,
      1.0, 1.0,
      0.0, 1.0,
    ])

    // indices = sequence of index positions in `vertices` to use as vertices
    // we make two triangles but only use 4 distinct vertices in the object
    // the second argument to THREE.BufferAttribute is the number of elements
    // in the first argument per vertex
    geometry.setIndex([0,1,2, 2,3,0])
    geometry.addAttribute('position', new THREE.BufferAttribute( vertices, 3 ));
    geometry.addAttribute('uv', new THREE.BufferAttribute( uvs, 2) )

    // Create a texture loader so we can load our image file
    var loader = new THREE.TextureLoader();

    // specify the url to the texture
    var url = 'https://s3.amazonaws.com/duhaime/blog/tsne-webgl/assets/cat.jpg';

    // specify custom uniforms and attributes for shaders
    // Uniform types: https://github.com/mrdoob/three.js/wiki/Uniforms-types
    var material = new THREE.RawShaderMaterial({
      uniforms: {
        texture: {
          type: 't',
          value: loader.load(url)
        },
        transparent: true,
      },
      vertexShader: document.getElementById('vertex-shader').textContent,
      fragmentShader: document.getElementById('fragment-shader').textContent
    });

    // Combine our image geometry and material into a mesh
    var mesh = new THREE.Mesh(geometry, material);

    // Set the position of the image mesh in the x,y,z dimensions
    mesh.position.set(0,0,0)

    // Add the image to the scene
    scene.add(mesh);
  }

  /**
  * Render!
  **/

  function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    controls.update();
  };

  var scene = getScene();
  var camera = getCamera();
  var renderer = getRenderer();
  var controls = getControls(camera, renderer);
  loadImage();

  render();
  </script>
</body>
</html>

这是jp_doodle在过渡中进行颜色插值的方式：https://aaronwatters.github.io/jp_doodle/080_transitions.html

在JavaScript中获取CSS / HTML命名颜色的RGB值

4 个答案: