В любом случае, чтобы преобразовать цветовой код Hex в соответствующую метку цвета в html, используя Angular js [duplicate]

В Python 3.xx вам просто нужно input() not raw_input()

51
задан Brian Webster 21 June 2013 в 20:36
поделиться

12 ответов

Нет, но с помощью здесь вы можете создать его. Что-то вроде этого:

function colourNameToHex(colour)
{
    var colours = {"aliceblue":"#f0f8ff","antiquewhite":"#faebd7","aqua":"#00ffff","aquamarine":"#7fffd4","azure":"#f0ffff",
    "beige":"#f5f5dc","bisque":"#ffe4c4","black":"#000000","blanchedalmond":"#ffebcd","blue":"#0000ff","blueviolet":"#8a2be2","brown":"#a52a2a","burlywood":"#deb887",
    "cadetblue":"#5f9ea0","chartreuse":"#7fff00","chocolate":"#d2691e","coral":"#ff7f50","cornflowerblue":"#6495ed","cornsilk":"#fff8dc","crimson":"#dc143c","cyan":"#00ffff",
    "darkblue":"#00008b","darkcyan":"#008b8b","darkgoldenrod":"#b8860b","darkgray":"#a9a9a9","darkgreen":"#006400","darkkhaki":"#bdb76b","darkmagenta":"#8b008b","darkolivegreen":"#556b2f",
    "darkorange":"#ff8c00","darkorchid":"#9932cc","darkred":"#8b0000","darksalmon":"#e9967a","darkseagreen":"#8fbc8f","darkslateblue":"#483d8b","darkslategray":"#2f4f4f","darkturquoise":"#00ced1",
    "darkviolet":"#9400d3","deeppink":"#ff1493","deepskyblue":"#00bfff","dimgray":"#696969","dodgerblue":"#1e90ff",
    "firebrick":"#b22222","floralwhite":"#fffaf0","forestgreen":"#228b22","fuchsia":"#ff00ff",
    "gainsboro":"#dcdcdc","ghostwhite":"#f8f8ff","gold":"#ffd700","goldenrod":"#daa520","gray":"#808080","green":"#008000","greenyellow":"#adff2f",
    "honeydew":"#f0fff0","hotpink":"#ff69b4",
    "indianred ":"#cd5c5c","indigo":"#4b0082","ivory":"#fffff0","khaki":"#f0e68c",
    "lavender":"#e6e6fa","lavenderblush":"#fff0f5","lawngreen":"#7cfc00","lemonchiffon":"#fffacd","lightblue":"#add8e6","lightcoral":"#f08080","lightcyan":"#e0ffff","lightgoldenrodyellow":"#fafad2",
    "lightgrey":"#d3d3d3","lightgreen":"#90ee90","lightpink":"#ffb6c1","lightsalmon":"#ffa07a","lightseagreen":"#20b2aa","lightskyblue":"#87cefa","lightslategray":"#778899","lightsteelblue":"#b0c4de",
    "lightyellow":"#ffffe0","lime":"#00ff00","limegreen":"#32cd32","linen":"#faf0e6",
    "magenta":"#ff00ff","maroon":"#800000","mediumaquamarine":"#66cdaa","mediumblue":"#0000cd","mediumorchid":"#ba55d3","mediumpurple":"#9370d8","mediumseagreen":"#3cb371","mediumslateblue":"#7b68ee",
    "mediumspringgreen":"#00fa9a","mediumturquoise":"#48d1cc","mediumvioletred":"#c71585","midnightblue":"#191970","mintcream":"#f5fffa","mistyrose":"#ffe4e1","moccasin":"#ffe4b5",
    "navajowhite":"#ffdead","navy":"#000080",
    "oldlace":"#fdf5e6","olive":"#808000","olivedrab":"#6b8e23","orange":"#ffa500","orangered":"#ff4500","orchid":"#da70d6",
    "palegoldenrod":"#eee8aa","palegreen":"#98fb98","paleturquoise":"#afeeee","palevioletred":"#d87093","papayawhip":"#ffefd5","peachpuff":"#ffdab9","peru":"#cd853f","pink":"#ffc0cb","plum":"#dda0dd","powderblue":"#b0e0e6","purple":"#800080",
    "rebeccapurple":"#663399","red":"#ff0000","rosybrown":"#bc8f8f","royalblue":"#4169e1",
    "saddlebrown":"#8b4513","salmon":"#fa8072","sandybrown":"#f4a460","seagreen":"#2e8b57","seashell":"#fff5ee","sienna":"#a0522d","silver":"#c0c0c0","skyblue":"#87ceeb","slateblue":"#6a5acd","slategray":"#708090","snow":"#fffafa","springgreen":"#00ff7f","steelblue":"#4682b4",
    "tan":"#d2b48c","teal":"#008080","thistle":"#d8bfd8","tomato":"#ff6347","turquoise":"#40e0d0",
    "violet":"#ee82ee",
    "wheat":"#f5deb3","white":"#ffffff","whitesmoke":"#f5f5f5",
    "yellow":"#ffff00","yellowgreen":"#9acd32"};

    if (typeof colours[colour.toLowerCase()] != 'undefined')
        return colours[colour.toLowerCase()];

    return false;
}
83
ответ дан Félix Saparelli 19 August 2018 в 09:33
поделиться
  • 1
    Копировать / вставить / найти / заменить – Greg 15 October 2009 в 16:33
  • 2
    Возможно, вы захотите защитить от унаследованных свойств;) colourNameToHex('constructor') – kangax 15 October 2009 в 16:34
  • 3
    Оставленный как упражнение для читателя: p – Greg 15 October 2009 в 16:35
  • 4
    Не пытаться выбить ветер из чьего-нибудь ответа, но, как я уже говорил в ответе, который я представил, есть способ получить HEX и RGB из именованных цветов программно во всех браузерах с \ out, имея такую ​​гигантскую таблицу. Неужели люди на стеке не читают ниже складки вообще? – csuwldcat 17 October 2010 в 19:45
  • 5
    Для обоих шрифтов серого вам также понадобятся. Остальные, похоже, существуют на основе моего визуального сравнения. «darkgrey»: «a9a9a9», «darkslategrey»: «# 2f4f4f», «dimgrey»: «# 696969», «gray»: «# 808080», «lightgray»: «# 808080», «lightgray»: ; # d3d3d3 & Quot;, & Quot; lightslategrey & Quot; & Quot; # 778899 & Quot;, & Quot; slategrey & Quot;: & Quot; # 708090 & Quot ;, – user984003 5 February 2013 в 09:19

на основе . Ответ Грега , в том числе серая / серая версия

добавлен: флаг для прохождения по неразрешенным строкам

доступен как gist colorhelpersforcanvas.js

String.prototype.colorNameToHex = function (returnUnresolved) { // color list from https://stackoverflow.com/q/1573053/731179  with added gray/gray
    var hexRGB, definedColorNames = {"aliceblue": "#f0f8ff", "antiquewhite": "#faebd7", "aqua": "#00ffff", "aquamarine": "#7fffd4", "azure": "#f0ffff", "beige": "#f5f5dc", "bisque": "#ffe4c4", "black": "#000000", "blanchedalmond": "#ffebcd", "blue": "#0000ff", "blueviolet": "#8a2be2", "brown": "#a52a2a", "burlywood": "#deb887", "cadetblue": "#5f9ea0", "chartreuse": "#7fff00", "chocolate": "#d2691e", "coral": "#ff7f50", "cornflowerblue": "#6495ed", "cornsilk": "#fff8dc", "crimson": "#dc143c", "cyan": "#00ffff", "darkblue": "#00008b", "darkcyan": "#008b8b", "darkgoldenrod": "#b8860b", "darkgray": "#a9a9a9", "darkgreen": "#006400", "darkkhaki": "#bdb76b", "darkmagenta": "#8b008b", "darkolivegreen": "#556b2f", "darkorange": "#ff8c00", "darkorchid": "#9932cc", "darkred": "#8b0000", "darksalmon": "#e9967a", "darkseagreen": "#8fbc8f", "darkslateblue": "#483d8b", "darkslategray": "#2f4f4f", "darkturquoise": "#00ced1", "darkviolet": "#9400d3", "deeppink": "#ff1493", "deepskyblue": "#00bfff", "dimgray": "#696969", "dodgerblue": "#1e90ff", "firebrick": "#b22222", "floralwhite": "#fffaf0", "forestgreen": "#228b22", "fuchsia": "#ff00ff", "gainsboro": "#dcdcdc", "ghostwhite": "#f8f8ff", "gold": "#ffd700", "goldenrod": "#daa520", "gray": "#808080", "green": "#008000", "greenyellow": "#adff2f", "honeydew": "#f0fff0", "hotpink": "#ff69b4", "indianred ": "#cd5c5c", "indigo ": "#4b0082", "ivory": "#fffff0", "khaki": "#f0e68c", "lavender": "#e6e6fa", "lavenderblush": "#fff0f5", "lawngreen": "#7cfc00", "lemonchiffon": "#fffacd", "lightblue": "#add8e6", "lightcoral": "#f08080", "lightcyan": "#e0ffff", "lightgoldenrodyellow": "#fafad2", "lightgrey": "#d3d3d3", "lightgreen": "#90ee90", "lightpink": "#ffb6c1", "lightsalmon": "#ffa07a", "lightseagreen": "#20b2aa", "lightskyblue": "#87cefa", "lightslategray": "#778899", "lightsteelblue": "#b0c4de", "lightyellow": "#ffffe0", "lime": "#00ff00", "limegreen": "#32cd32", "linen": "#faf0e6", "magenta": "#ff00ff", "maroon": "#800000", "mediumaquamarine": "#66cdaa", "mediumblue": "#0000cd", "mediumorchid": "#ba55d3", "mediumpurple": "#9370d8", "mediumseagreen": "#3cb371", "mediumslateblue": "#7b68ee", "mediumspringgreen": "#00fa9a", "mediumturquoise": "#48d1cc", "mediumvioletred": "#c71585", "midnightblue": "#191970", "mintcream": "#f5fffa", "mistyrose": "#ffe4e1", "moccasin": "#ffe4b5", "navajowhite": "#ffdead", "navy": "#000080", "oldlace": "#fdf5e6", "olive": "#808000", "olivedrab": "#6b8e23", "orange": "#ffa500", "orangered": "#ff4500", "orchid": "#da70d6", "palegoldenrod": "#eee8aa", "palegreen": "#98fb98", "paleturquoise": "#afeeee", "palevioletred": "#d87093", "papayawhip": "#ffefd5", "peachpuff": "#ffdab9", "peru": "#cd853f", "pink": "#ffc0cb", "plum": "#dda0dd", "powderblue": "#b0e0e6", "purple": "#800080", "red": "#ff0000", "rosybrown": "#bc8f8f", "royalblue": "#4169e1", "saddlebrown": "#8b4513", "salmon": "#fa8072", "sandybrown": "#f4a460", "seagreen": "#2e8b57", "seashell": "#fff5ee", "sienna": "#a0522d", "silver": "#c0c0c0", "skyblue": "#87ceeb", "slateblue": "#6a5acd", "slategray": "#708090", "snow": "#fffafa", "springgreen": "#00ff7f", "steelblue": "#4682b4", "tan": "#d2b48c", "teal": "#008080", "thistle": "#d8bfd8", "tomato": "#ff6347", "turquoise": "#40e0d0", "violet": "#ee82ee", "wheat": "#f5deb3", "white": "#ffffff", "whitesmoke": "#f5f5f5", "yellow": "#ffff00", "yellowgreen": "#9acd32", "darkgrey": "#a9a9a9", "darkslategrey": "#2f4f4f", "dimgrey": "#696969", "grey": "#808080", "lightgray": "#d3d3d3", "lightslategrey": "#778899", "slategrey": "#708090"};
    if (definedColorNames[this.toLowerCase()] !== undefined) {
        hexRGB = definedColorNames[this.toLowerCase()];
        // to keep unresolved strings set flag returnUnresolved to true
    } else {if (returnUnresolved) {hexRGB = this; } else {hexRGB = undefined; } }
    return hexRGB;
};

некоторые тестовые примеры:

console.log("black".colorNameToHex());                //returns #000000
console.log("rgba(100,100,0,0.7)".colorNameToHex());  //returns undefined 
console.log("rgba(100,100,0,0.7)".colorNameToHex(1)); //returns rgba(100,100,0,0.7) 

в качестве бонуса здесь мой вариант использования для строки в color-string для color-string-with-alpha преобразование:

работает с любым css определенным цветом , включая: rgba, rgb, r% g% b%, #rgb, #rrggbb, hsl, hsla

в основном полезны при рисовании с альфа / непрозрачностью / прозрачностью на элемент холста HTML5 с переданными по цветовым строкам

String.prototype.setAlpha = function (alpha) {
    // change alpha of color string in any css color space
    // intended for use in canvas/svg
    // currently implemented:
    // css defined colors               > rgba
    // rgba, rgb, r%g%b%, #rgb, #rrggbb > rgba
    // hsl, hsla                        > hsla
    // unresolved                       > as is
    //
    // If no alpha is passed its is set to 1 or keeps the value in rgba/hsla

    // kill whitespace split at "(", ")", ","
    var i, hex, c = this.replace(/\s/g, '').split(/[\(\),]/);
    function extractHex(string) {
        if (string.charAt(0) === "#") {  // detect hex strings
            hex = string.replace(/#/g, '');
            string = "hex";
        } else {hex = undefined; }
        return string;
    }
    extractHex(c[0]);
    if (["rgba", "rgb", "hsla", "hsl", "hex"].indexOf(c[0]) === -1) {
        c[0] = extractHex(c[0].colorNameToHex(1)); // detect defined color names
    }
    switch (c[0]) {
    case "rgba":
        if (alpha === undefined) {alpha = c[4]; }
        c = "rgba(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
        break;
    case "rgb":
        if (alpha === undefined) {alpha = 1; }
        //  if colors are in percentage values
        for  (i = 1; i <= 3; i = i + 1) {
            if (c[i].charAt(c[i].length - 1) === "%") {
                c[i] = Math.round(c[i].replace(/%/g, '') * 2.55);
            }
        }
        c = "rgba(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
        break;
    case "hsl":
        if (alpha === undefined) {alpha = 1; }
        c = "hsla(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
        break;
    case "hsla":
        if (alpha === undefined) {alpha = c[4]; }
        c = "hsla(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
        break;
    case "hex":
        if (alpha === undefined) {alpha = 1; }
        if (hex.length === 3) {
            c[1] = parseInt(hex.charAt(0) + hex.charAt(0), 16);
            c[2] = parseInt(hex.charAt(1) + hex.charAt(1), 16);
            c[3] = parseInt(hex.charAt(2) + hex.charAt(2), 16);
        } else if (hex.length === 6) {
            c[1] = parseInt(hex.charAt(0) + hex.charAt(1), 16);
            c[2] = parseInt(hex.charAt(2) + hex.charAt(3), 16);
            c[3] = parseInt(hex.charAt(4) + hex.charAt(5), 16);
        } else {break; }
        c = "rgba(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
        break;
    default: c = this; break;
    }
    return c;
};

test:

console.log("orange".setAlpha(0.3));
15
ответ дан Community 19 August 2018 в 09:33
поделиться
  • 1
    один линейный конвертер из rgb (a) в #hex var colors = '#'+window.getComputedStyle(document.body.appendChild(a)).color.match(/\d+/g).map(function(a,i){ return i>2 ? '' : ('0'+parseInt(a,10).toString(16)).substr(-2); }).join(''); – oriadam 20 June 2017 в 13:04
  • 2
    Не расширяйте примитивные объекты, потому что это значительно снижает производительность везде. – Jack Giffin 28 April 2018 в 20:28

Это универсальное решение, которое делает именно то, что вы хотите, в каждом браузере, который является 100% программным, до свидания гигантской статической таблицы имен и шестнадцатеричных значений!:

// Here is the solution tied together as a native String native extension using 
// MooTools, though you can implement the same thing in whatever framework you prefer:

(function(String){

var valueMatch = {
        'rgb(0,0,0)': { 'black': ' ', 'rgb(0,0,0)': ' ' },
        'rgba(0,0,0,0)': { 'transparent': ' ', 'rgba(0,0,0,0)': ' ' },
        '#ffffff': { 'transparent': ' ' },
        'transparent': { 'transparent': ' ' }
    },
    colorFromProbe = function(color){
        color = color.toString();
        if(!color.match(/^#.+$|^[^0-9]+$/)) return color;
        var probe = ($('moo_color_probe') || new Element('textarea', {
                'id': 'moo_color_probe',
                'styles': {
                    'display': 'none',
                    'color': 'transparent'
                }
            }).inject(document.body, 'after'));
        try{ probe.setStyle('color', color) } catch(e){ return color } //IE throws an error instead of defaulting the style to some color or transparent when the value is unrecognized
        var computed = (Browser.ie) ? ieColorToHex(probe) : (Browser.opera) ? probe.style.color : probe.getComputedStyle('color'),
            match = valueMatch[computed.replace(/ /g, '')];
        probe.setStyle('color', 'transparent');
        if((!Browser.ie || Browser.ie9) && color == 'transparent' && (match && match['transparent'])) return 'rgba(0, 0, 0, 0)';
        return (computed == 'transparent' || match && !match[color.replace(/ /g, '')]) ? color : computed;
    },
    ieColorToHex = function(probe){ // Special IE mojo, thanks to Dean Edwards for the inspiration, his code used a pop-up window to test the color, I found you can simply use a textarea instead ;)
        var value = probe.set('value', '').createTextRange().queryCommandValue("ForeColor");
        value = (((value & 0x0000ff) << 16) | (value & 0x00ff00) | ((value & 0xff0000) >>> 16)).toString(16);
        return "#000000".slice(0, 7 - value.length) + value;
    };

    String.implement({
        colorToRgb: function(){
            var color = colorFromProbe(this);
            return (color.charAt(0) == '#') ? color.hexToRgb() : color;
        },
        colorToHex: function(){
            var color = colorFromProbe(this);
            return (color.test('rgb')) ? color.rgbToHex() : color;
        }
    });

})(String);    

Более полное объяснение и живое пример можно найти здесь: http://www.backalleycoder.com/2010/10/05/converting-css-named-colors-to-rgb-and-hex/

14
ответ дан csuwldcat 19 August 2018 в 09:33
поделиться
  • 1
    BTW, в отличие от поиска хромого статического объекта, предложенного в одном из других ответов, это программное средство для определения значения для любого имени цвета, которое поддерживает браузер. – csuwldcat 15 October 2010 в 20:02
  • 2
    +1 для программного пути. Я не мог использовать его, потому что это дорогостоящий способ разрешения цвета и не будет работать гладко, если мне нужно решить сотню значений - в этом случае «lame» список поиска работает намного лучше, хотя, по общему признанию, это боль в заднице, чтобы поддерживать :) – Andrey 8 December 2010 в 16:38
  • 3
    Андрей, я могу гарантировать, что он не так близок к дорогостоящим, как анимация стилей с любой из JS-фреймворков. С анимацией вы устанавливаете несколько стилей тысячи раз за определенный период, чтобы анимировать несколько свойств чего-то. Это на самом деле не похоже на такой тип работы, поэтому найти значения для нескольких сотен цветов - это торт, нет заметного влияния на производительность. – csuwldcat 9 December 2010 в 23:56
  • 4
    @csuwldcat: Я далеко не убежден, что отвратительный взлом, чтобы эта работа в IE была предпочтительнее большой справочной таблицы. Там определенно будет удар производительности, и это делает невозможным создание обратного поиска имен цветов для значений RGB, что также может быть полезно. +1 Тем не менее, мне не пришло в голову использовать TextRange и queryCommandValue(). – Tim Down 25 March 2011 в 11:26
  • 5
    @csuwldcat: Все верно, и между нами мы подробно рассмотрели проблему. Я считаю, что мой основной момент заключается в том, что оба подхода действительны, а предпочтительное - в зависимости от ситуации, тогда как ваши комментарии, похоже, предполагают, что программное решение по своей сути превосходит. – Tim Down 27 March 2011 в 15:58

Вам нужно будет полагаться на getComputedStyle(...).

Пример использования getComputedStyle:

function convertToHexColor(englishColor) {

    // create a temporary div. 
    var div = $('<div></div>').appendTo("body").css('background-color', englishColor);
    var computedStyle = window.getComputedStyle(div[0]);

    // get computed color.
    var computedColor = computedStyle.backgroundColor;

    // cleanup temporary div.
    div.remove();

    // done.
    return computedColor;

    // The above returns "rgb(R, G, B)" on IE9/Chrome20/Firefox13.
};

И для преобразования «rgb (R, G, B) "на #RRGGBB вы можете использовать:

function convertRGBDecimalToHex(rgb)
{
    var regex = /rgb *\( *([0-9]{1,3}) *, *([0-9]{1,3}) *, *([0-9]{1,3}) *\)/;
    var values = regex.exec(rgb);
    if(values.length != 4)
    {
        return rgb; // fall back to what was given.              
    }
    var r = Math.round(parseFloat(values[1]));
    var g = Math.round(parseFloat(values[2]));
    var b = Math.round(parseFloat(values[3]));
    return "#" 
        + (r + 0x10000).toString(16).substring(3).toUpperCase() 
        + (g + 0x10000).toString(16).substring(3).toUpperCase()
        + (b + 0x10000).toString(16).substring(3).toUpperCase();
}
5
ответ дан DuckMaestro 19 August 2018 в 09:33
поделиться
  • 1
    Я думаю, это не очень хорошо. – pimvdb 8 November 2011 в 14:05
  • 2
    @pimvdb Зависит от того, как часто вам нужно отображать цвета. Вы могли бы сохранить тот же div всегда в DOM, чтобы сэкономить некоторое время на этом пути - тогда оставшееся время тратится на два вызова css (один из которых, вероятно, прибегает к вычисленному вызову стиля). – DuckMaestro 8 November 2011 в 20:13
  • 3
    Я не верю, что jQuery делает это, я просто просмотрел их источник и нигде в нем не содержит раздел, который выполняет логику, необходимую для достижения этого. Учтите, чтобы включить ссылку jsFiddle, показывающую, как вы устанавливаете именованный цвет, используя установщик объектов стиля с jQuery, а затем возвращаете гекс? – csuwldcat 31 July 2012 в 02:03
  • 4
    @csuwldcat Спасибо за комментарий. Мой предыдущий пример кода перестает работать - я не уверен, почему теперь он работал изначально. В любом случае, я опубликовал новый код выше, который работает, и вот jsFiddle: jsfiddle.net/GRsCr/32 . – DuckMaestro 31 July 2012 в 05:53
  • 5
    FWIW, вам не нужно преобразовывать шестнадцатеричные значения в верхний регистр. – Nate 1 December 2014 в 16:43

IE8 getComputedStyle polyfill при необходимости

var rgbToHex = function(r, g, b) {
    return "#" + (16777216 | b | (g << 8) | (r << 16)).toString(16).slice(1);
};

var d = document.createElement('div');
d.style.color = 'white';
window.document.body.appendChild(d);
var parts = (window.getComputedStyle(d).color || '').match(/\d+/g);
var f = function(n) { return parseInt(n, 10); };
window.document.body.removeChild(d);
var hex = rgbToHex(f(parts[0]), f(parts[1]), f(parts[2]));

//"#ffffff"
0
ответ дан James Kyburz 19 August 2018 в 09:33
поделиться

@dlauzon предложил конвертировать мой комментарий в ответ. Спасибо за предложение! Вот он:)

function standardize_color(str){
    var ctx = document.createElement(&amp;#39;canvas&amp;#39;).getContext(‌​'2d'​);
    ctx.fillStyle = str;
    return ctx.fillStyle;
}
2
ответ дан JayB 19 August 2018 в 09:33
поделиться

Быстрый код только для значений HEX / RGB, может быть полезен кому-то и может быть адаптирован для включения имен: вытащить весь объект в цикле for, проверить имя и, если он соответствует, у вас есть hex / rbg , Они взяты отсюда: http://www.colourlovers.com/web/blog/2008/04/22/all-120-crayon-names-color-codes-and-fun-facts

Самое главное, обратите внимание на правильное написание «цвета»: P

/*COLOURS*/
function loadColourPalette() {

$("#colourPalette").empty();
//load them animated
for (var t = 0; t<120; t++){
    var c = returnColourForIndex(t);
    console.log("c is " + c);
    var div = '<div class="colourBox" id="cb'+t+'" style="background:'+c+'"></div>';
    $("#colourPalette").append(div);
}

}



function returnColourForIndex(i){

var colours = [     {hex:"CD4A4A",rgb:"205,74,74"},
                    {hex:"CC6666",rgb:"204,102,102"},
                    {hex:"BC5D58",rgb:"188,93,88"},
                    {hex:"FF5349",rgb:"255,83,73"},
                    {hex:"FD5E53",rgb:"253,94,83"},
                    {hex:"FD7C6E",rgb:"253,124,110"},
                    {hex:"FDBCB4",rgb:"253,188,180"},
                    {hex:"FF6E4A",rgb:"255,110,74"},
                    {hex:"FFA089",rgb:"255,160,137"},
                    {hex:"EA7E5D",rgb:"234,126,93"},
                    {hex:"B4674D",rgb:"180,103,77"},
                    {hex:"A5694F",rgb:"165,105,79"},
                    {hex:"FF7538",rgb:"255,117,56"},
                    {hex:"FF7F49",rgb:"255,127,73"},
                    {hex:"DD9475",rgb:"221,148,117"},
                    {hex:"FF8243",rgb:"255,130,67"},
                    {hex:"FFA474",rgb:"255,164,116"},
                    {hex:"9F8170",rgb:"159,129,112"},
                    {hex:"CD9575",rgb:"205,149,117"},
                    {hex:"EFCDB8",rgb:"239,205,184"},
                    {hex:"D68A59",rgb:"214,138,89"},
                    {hex:"DEAA88",rgb:"222,170,136"},
                    {hex:"FAA76C",rgb:"250,167,108"},
                    {hex:"FFCFAB",rgb:"255,207,171"},
                    {hex:"FFBD88",rgb:"255,189,136"},
                    {hex:"FDD9B5",rgb:"253,217,181"},
                    {hex:"FFA343",rgb:"255,163,67"},
                    {hex:"EFDBC5",rgb:"239,219,197"},
                    {hex:"FFB653",rgb:"255,182,83"},
                    {hex:"E7C697",rgb:"231,198,151"},
                    {hex:"8A795D",rgb:"138,121,93"},
                    {hex:"FAE7B5",rgb:"250,231,181"},
                    {hex:"FFCF48",rgb:"255,207,72"},
                    {hex:"FCD975",rgb:"252,217,117"},
                    {hex:"FDDB6D",rgb:"253,219,109"},
                    {hex:"FCE883",rgb:"252,232,131"},
                    {hex:"F0E891",rgb:"240,232,145"},
                    {hex:"ECEABE",rgb:"236,234,190"},
                    {hex:"BAB86C",rgb:"186,184,108"},
                    {hex:"FDFC74",rgb:"253,252,116"},
                    {hex:"FFFF99",rgb:"255,255,153"},
                    {hex:"C5E384",rgb:"197,227,132"},
                    {hex:"B2EC5D",rgb:"178,236,93"},
                    {hex:"87A96B",rgb:"135,169,107"},
                    {hex:"A8E4A0",rgb:"168,228,160"},
                    {hex:"1DF914",rgb:"29,249,20"},
                    {hex:"76FF7A",rgb:"118,255,122"},
                    {hex:"71BC78",rgb:"113,188,120"},
                    {hex:"6DAE81",rgb:"109,174,129"},
                    {hex:"9FE2BF",rgb:"159,226,191"},
                    {hex:"1CAC78",rgb:"28,172,120"},
                    {hex:"30BA8F",rgb:"48,186,143"},
                    {hex:"45CEA2",rgb:"69,206,162"},
                    {hex:"3BB08F",rgb:"59,176,143"},
                    {hex:"1CD3A2",rgb:"28,211,162"},
                    {hex:"17806D",rgb:"23,128,109"},
                    {hex:"158078",rgb:"21,128,120"},
                    {hex:"1FCECB",rgb:"31,206,203"},
                    {hex:"78DBE2",rgb:"120,219,226"},
                    {hex:"77DDE7",rgb:"119,221,231"},
                    {hex:"80DAEB",rgb:"128,218,235"},
                    {hex:"199EBD",rgb:"251,58,189"},
                    {hex:"1CA9C9",rgb:"28,169,201"},
                    {hex:"1DACD6",rgb:"291,72,214"},
                    {hex:"9ACEEB",rgb:"154,206,235"},
                    {hex:"1A4876",rgb:"26,72,118"},
                    {hex:"1974D2",rgb:"25,116,210"},
                    {hex:"2B6CC4",rgb:"43,108,196"},
                    {hex:"1F75FE",rgb:"31,117,254"},
                    {hex:"C5D0E6",rgb:"197,208,230"},
                    {hex:"B0B7C6",rgb:"176,183,198"},
                    {hex:"5D76CB",rgb:"93,118,203"},
                    {hex:"A2ADD0",rgb:"162,173,208"},
                    {hex:"979AAA",rgb:"151,154,170"},
                    {hex:"ADADD6",rgb:"173,173,214"},
                    {hex:"7366BD",rgb:"115,102,189"},
                    {hex:"7442C8",rgb:"116,66,200"},
                    {hex:"7851A9",rgb:"120,81,169"},
                    {hex:"9D81BA",rgb:"157,129,186"},
                    {hex:"926EAE",rgb:"146,110,174"},
                    {hex:"CDA4DE",rgb:"205,164,222"},
                    {hex:"8F509D",rgb:"143,80,157"},
                    {hex:"C364C5",rgb:"195,100,197"},
                    {hex:"FB7EFD",rgb:"251,126,253"},
                    {hex:"FC74FD",rgb:"252,116,253"},
                    {hex:"8E4585",rgb:"142,69,133"},
                    {hex:"FF1DCE",rgb:"255,29,206"},
                    {hex:"FF48D0",rgb:"255,72,208"},
                    {hex:"E6A8D7",rgb:"230,168,215"},
                    {hex:"C0448F",rgb:"192,68,143"},
                    {hex:"6E5160",rgb:"110,81,96"},
                    {hex:"DD4492",rgb:"221,68,146"},
                    {hex:"FF43A4",rgb:"255,67,164"},
                    {hex:"F664AF",rgb:"246,100,175"},
                    {hex:"FCB4D5",rgb:"252,180,213"},
                    {hex:"FFBCD9",rgb:"255,188,217"},
                    {hex:"F75394",rgb:"247,83,148"},
                    {hex:"FFAACC",rgb:"255,170,204"},
                    {hex:"E3256B",rgb:"227,37,107"},
                    {hex:"FDD7E4",rgb:"253,215,228"},
                    {hex:"CA3767",rgb:"202,55,103"},
                    {hex:"DE5D83",rgb:"222,93,131"},
                    {hex:"FC89AC",rgb:"252,137,172"},
                    {hex:"F780A1",rgb:"247,128,161"},
                    {hex:"C8385A",rgb:"200,56,90"},
                    {hex:"EE204D",rgb:"238,32,77"},
                    {hex:"FF496C",rgb:"255,73,108"},
                    {hex:"EF98AA",rgb:"239,152,170"},
                    {hex:"FC6C85",rgb:"252,108,133"},
                    {hex:"FC2847",rgb:"252,40,71"},
                    {hex:"FF9BAA",rgb:"255,155,170"},
                    {hex:"CB4154",rgb:"203,65,84"},
                    {hex:"FFFFFF",rgb:"255,255,255"},
                    {hex:"EDEDED",rgb:"237,237,237"},
                    {hex:"DBD7D2",rgb:"219,215,210"},
                    {hex:"CDC5C2",rgb:"205,197,194"},
                    {hex:"95918C",rgb:"149,145,140"},
                    {hex:"414A4C",rgb:"65,74,76"},
                    {hex:"232323",rgb:"35,35,35"},
                    {hex:"000000",rgb:"0,0,0"}];

return "#"+colours[i].hex;

}
0
ответ дан Johnny Rockex 19 August 2018 в 09:33
поделиться
  • 1
    Цвет v.s. цвет зависит от британских против. Английское правописание. Поэтому цвет такой же правильный, как цвет, поскольку он зависит от того, в какой стране вы находитесь. Кроме того, я не вижу цели этого вообще. Почему не function hexToRGB(hex){return hex.split(/(?=(?:..)*$)/g).map(function(x){return parseInt(x,16)}).join(",")} – Jack Giffin 28 April 2018 в 20:33

Насколько я знаю, это не встроено. Это будет своего рода хак, но я думаю, что вы могли бы создать невидимый div, установить его свойство фона CSS для именованного цвета, а затем использовать JS для получения цвета фона div, а затем удалить div.

0
ответ дан Kip 19 August 2018 в 09:33
поделиться
  • 1
    Где гарантия того, что вычисленное значение цвета будет представлено как hex? – kangax 15 October 2009 в 16:30
  • 2
    @kangax: JS даст вам цвет. как вы хотите представлять это зависит от вас. – Kip 15 October 2009 в 17:01
  • 3
    Существует программный способ сделать это преобразование, как видно из другого ответа, который я опубликовал в этой теме. – csuwldcat 11 December 2010 в 18:30

Изменить: я немного почистил это и сделал gist и demo . Основной подход остается тем же.

«Добавить элемент в DOM и проверить его метод ComputedStyle» кажется мне немного сложным - вам нужно добавить его и проверить его, и не забудьте удалить его, а вы 'изменение DOM только для вычисления цвета и вызывает ли это перепланировку? Итак, вот решение, основанное на временном (и никогда не отображаемом) <canvas>:

function colorToRGBA(color) {
    // Returns the color as an array of [r, g, b, a] -- all range from 0 - 255
    // color must be a valid canvas fillStyle. This will cover most anything
    // you'd want to use.
    // Examples:
    // colorToRGBA('red')  # [255, 0, 0, 255]
    // colorToRGBA('#f00') # [255, 0, 0, 255]
    var cvs, ctx;
    cvs = document.createElement('canvas');
    cvs.height = 1;
    cvs.width = 1;
    ctx = cvs.getContext('2d');
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, 1, 1);
    return ctx.getImageData(0, 0, 1, 1).data;
}

function byteToHex(num) {
    // Turns a number (0-255) into a 2-character hex number (00-ff)
    return ('0'+num.toString(16)).slice(-2);
}

function colorToHex(color) {
    // Convert any CSS color to a hex representation
    // Examples:
    // colorToHex('red')            # '#ff0000'
    // colorToHex('rgb(255, 0, 0)') # '#ff0000'
    var rgba, hex;
    rgba = colorToRGBA(color);
    hex = [0,1,2].map(
        function(idx) { return byteToHex(rgba[idx]); }
        ).join('');
    return "#"+hex;
}

Обратите внимание, что это позволяет вам использовать что-либо, что является допустимым шрифтом canvas, поэтому, если вы хотите создать один пиксель шаблон из изображения, он также расскажет вам о цвете.

Я тестировал это в достаточно современных версиях IE, Chrome, Safari и Firefox.

24
ответ дан Nate 19 August 2018 в 09:33
поделиться
  • 1
    function standardize_color (str) {var ctx = document.createElement ('canvas'). getContext ('2d'); ctx.fillStyle = str; return ctx.fillStyle; } – JayB 6 November 2017 в 22:02
  • 2
    Это супер аккуратно! Я не уверен, нравится мне это лучше или нет; с "ctx.fillStyle нормализует цвета к rbga" трюк, вы не можете поместить градиент или шаблон. Я думаю, он отвечает OP в меньшем количестве строк кода, но он несколько менее гибкий. – Nate 6 November 2017 в 23:07
  • 3
    Ответ @JayB выше - это кратчайший рабочий ответ всего этого вопроса (вы должны записать его как отдельный ответ для видимости). – dlauzon 17 November 2017 в 17:07
  • 4

Это даст вам в RGB - вы можете легко выполнить шестнадцатеричное преобразование.

d = document.createElement("div");
d.style.color = "white";
document.body.appendChild(d)
//Color in RGB 
window.getComputedStyle(d).color

Получить вычисляемый стиль не поддерживается во всех браузерах.

38
ответ дан row1 19 August 2018 в 09:33
поделиться
  • 1
    IE9 +, все вечнозеленые браузеры на этот комментарий (2014/08/20) caniuse.com/#feat=getcomputedstyle – seth flowers 20 August 2014 в 16:11
  • 2
    Обратите внимание, что это добавляет элемент к вашему <body>; вы должны удалить его после проверки его цвета. – Nate 1 December 2014 в 16:35
  • 3
    Вы not даже должны добавить элемент в свой документ, чтобы проверить его стиль, обойдя эту проблему. – Félix Saparelli 12 December 2016 в 03:29
  • 4
    В Chrome это узел должен находиться в DOM, чтобы получить что-либо из getCompuedStyle. В противном случае атрибут цвета будет "". – Norman Breau 31 October 2017 в 23:36

Нет, нет. И даже если бы это было так, вероятно, скорее всего, поддерживало бы что-то вроде RGB для HEX, которое перевело бы [255,255,255] на #FFFFFF, а не на «белый». Вы можете найти примеры конверсий RGB в HEX и наоборот в Интернете, но менее вероятно, что вы хотите. Возможно, вам придется создать его самостоятельно, но это не сотни строк, вы выбираете наиболее распространенные 16 цветов и создаете переключатель. Я не хочу обидеть вас, создавая его сам:).

-7
ответ дан treznik 19 August 2018 в 09:33
поделиться
  • 1
    Читайте выше ответ, вы, безусловно, можете конвертировать именованные цвета в HEX и RGB. Люди даже читают другие ответы, прежде чем они публикуют? – csuwldcat 11 December 2010 в 18:28
  • 2
    Я, вероятно, разместил сначала, так что он не мог видеть «другие ответы». прежде чем я отправил. И да, я был несколько не прав, но смешно, как выбранный ответ делает именно то, что я сказал, решение будет. (пользовательское сопоставление значений ключа) – treznik 10 April 2012 в 15:11
  • 3
    Очевидно, что если у вас есть прецедент, где вам нужно только 15 известных шестнадцатеричных значений, сопоставленных с именами цветов, которые вы хотите использовать простой, кешированный объект. Но вопрос, задаваемый вопросом, заключался в том, что он нуждался в сотнях цветов (которые некоторые браузеры могут или не могут распознавать названия цветов), поэтому я почувствовал, что какая-то программная программа будет служить для этого лучше всего. Кроме того, если вам нужен простой способ автоматической генерации статической карты объектов, вы можете просто запустить сценарий, который я написал, и кешировать цвета, почти как однокомпонентный шаг (думаю, МЕНЬШЕ или что-то в этом роде). – csuwldcat 23 April 2012 в 22:44
16
ответ дан Community 30 October 2018 в 21:56
поделиться
Другие вопросы по тегам:

Похожие вопросы: