Я хочу создать функцию, которая будет принимать любую старую строку (обычно это одно слово) и из нее каким- то образом генерировать шестнадцатеричное значение между #000000
и #FFFFFF
, чтобы я мог использовать его как цвет для элемента HTML.
Может быть, даже сокращенное шестнадцатеричное значение (например:), #FFF
если это менее сложно. Фактически, цвет из палитры, пригодной для использования в Интернете, был бы идеальным.
javascript
string
colors
hex
Дарра Энрайт
источник
источник
parseInt(hexstr, 10)
. Чтобы преобразовать целое число в шестнадцатеричное, используйтеn.toString(16)
, где n - целое число.Ответы:
Просто перенесите Java из шестнадцатеричного цветового кода Compute для произвольной строки в Javascript:
function hashCode(str) { // java String#hashCode var hash = 0; for (var i = 0; i < str.length; i++) { hash = str.charCodeAt(i) + ((hash << 5) - hash); } return hash; } function intToRGB(i){ var c = (i & 0x00FFFFFF) .toString(16) .toUpperCase(); return "00000".substring(0, 6 - c.length) + c; }
Чтобы преобразовать, вам нужно сделать:
источник
("00" + ((this >> 24) & 0xFF).toString(16)).slice(-2) + ("00" + ((this >> 16) & 0xFF).toString(16)).slice(-2) + ("00" + ((this >> 8) & 0xFF).toString(16)).slice(-2) + ("00" + (this & 0xFF).toString(16)).slice(-2);
intToRGB(hashCode('hello1')) -> "3A019F"
intToRGB(hashCode('hello2')) -> "3A01A0"
И я улучшаю ваш код, добавляя умножение для окончательного хеш-значения:return 100 * hash;
Вот адаптация ответа CD Санчеса, которая последовательно возвращает шестизначный цветовой код:
var stringToColour = function(str) { var hash = 0; for (var i = 0; i < str.length; i++) { hash = str.charCodeAt(i) + ((hash << 5) - hash); } var colour = '#'; for (var i = 0; i < 3; i++) { var value = (hash >> (i * 8)) & 0xFF; colour += ('00' + value.toString(16)).substr(-2); } return colour; }
Применение:
stringToColour("greenish"); // -> #9bc63b
Пример:
http://jsfiddle.net/sUK45/
(Альтернативное / более простое решение может включать возврат цветового кода в стиле rgb (...).)
источник
Мне нужно было такое же богатство цветов для элементов HTML, я был удивлен, обнаружив, что CSS теперь поддерживает цвета hsl (), поэтому полное решение для меня ниже:
Также см. Как автоматически генерировать N «различных» цветов? для большего количества альтернатив, более похожих на это.
function colorByHashCode(value) { return "<span style='color:" + value.getHashCode().intToHSL() + "'>" + value + "</span>"; } String.prototype.getHashCode = function() { var hash = 0; if (this.length == 0) return hash; for (var i = 0; i < this.length; i++) { hash = this.charCodeAt(i) + ((hash << 5) - hash); hash = hash & hash; // Convert to 32bit integer } return hash; }; Number.prototype.intToHSL = function() { var shortened = this % 360; return "hsl(" + shortened + ",100%,30%)"; }; document.body.innerHTML = [ "javascript", "is", "nice", ].map(colorByHashCode).join("<br/>");
span { font-size: 50px; font-weight: 800; }
В HSL это Оттенок, Насыщенность, Легкость. Таким образом, оттенок от 0 до 359 будет иметь все цвета, насыщенность - это то, насколько насыщенным вы хотите цвет, 100% мне подходит. А Lightness определяет глубину, 50% - это нормально, 25% - темные цвета, 75% - пастельные. У меня 30%, потому что это лучше всего подходит для моей цветовой схемы.
источник
Я считаю, что генерация случайных цветов имеет тенденцию создавать цвета, у которых нет достаточного контраста на мой вкус. Самый простой способ, который я нашел, - это предварительно заполнить список самых разных цветов. Для каждой новой строки назначайте следующий цвет в списке:
// Takes any string and converts it into a #RRGGBB color. var StringToColor = (function(){ var instance = null; return { next: function stringToColor(str) { if(instance === null) { instance = {}; instance.stringToColorHash = {}; instance.nextVeryDifferntColorIdx = 0; instance.veryDifferentColors = ["#000000","#00FF00","#0000FF","#FF0000","#01FFFE","#FFA6FE","#FFDB66","#006401","#010067","#95003A","#007DB5","#FF00F6","#FFEEE8","#774D00","#90FB92","#0076FF","#D5FF00","#FF937E","#6A826C","#FF029D","#FE8900","#7A4782","#7E2DD2","#85A900","#FF0056","#A42400","#00AE7E","#683D3B","#BDC6FF","#263400","#BDD393","#00B917","#9E008E","#001544","#C28C9F","#FF74A3","#01D0FF","#004754","#E56FFE","#788231","#0E4CA1","#91D0CB","#BE9970","#968AE8","#BB8800","#43002C","#DEFF74","#00FFC6","#FFE502","#620E00","#008F9C","#98FF52","#7544B1","#B500FF","#00FF78","#FF6E41","#005F39","#6B6882","#5FAD4E","#A75740","#A5FFD2","#FFB167","#009BFF","#E85EBE"]; } if(!instance.stringToColorHash[str]) instance.stringToColorHash[str] = instance.veryDifferentColors[instance.nextVeryDifferntColorIdx++]; return instance.stringToColorHash[str]; } } })(); // Get a new color for each string StringToColor.next("get first color"); StringToColor.next("get second color"); // Will return the same color as the first time StringToColor.next("get first color");
Хотя у этого есть ограничение только до 64 цветов, я считаю, что большинство людей все равно не заметят разницы после этого. Я полагаю, вы всегда можете добавить больше цветов.
Хотя в этом коде используются жестко запрограммированные цвета, вы, по крайней мере, гарантированно будете знать во время разработки, какой именно контраст вы увидите между цветами при производстве.
Список цветов был взят из этого SO-ответа , есть другие списки с большим количеством цветов.
источник
if(!instance.stringToColorHash[str]) { instance.nextVeryDifferntColorIdx++; instance.nextVeryDifferntColorIdx %= instance.veryDifferentColors.length; instance.stringToColorHash[str] = instance.veryDifferentColors[instance.nextVeryDifferntColorIdx]; }
Я открыл запрос на перенос в Please.js, который позволяет генерировать цвет из хеша.
Вы можете сопоставить строку с цветом следующим образом:
const color = Please.make_color({ from_hash: "any string goes here" });
Например,
"any string goes here"
вернется как"#47291b"
и
"another!"
вернется как"#1f0c3d"
источник
Если ваши входные данные недостаточно различаются, чтобы простой хеш использовал весь спектр цветов, вы можете использовать генератор случайных чисел с начальным значением вместо хеш-функции.
Я использую цветовой кодер из ответа Джо Фримена и генератор случайных чисел Дэвида Бау .
function stringToColour(str) { Math.seedrandom(str); var rand = Math.random() * Math.pow(255,3); Math.seedrandom(); // don't leave a non-random seed in the generator for (var i = 0, colour = "#"; i < 3; colour += ("00" + ((rand >> i++ * 8) & 0xFF).toString(16)).slice(-2)); return colour; }
источник
Еще одно решение для случайных цветов:
function colorize(str) { for (var i = 0, hash = 0; i < str.length; hash = str.charCodeAt(i++) + ((hash << 5) - hash)); color = Math.floor(Math.abs((Math.sin(hash) * 10000) % 1 * 16777216)).toString(16); return '#' + Array(6 - color.length + 1).join('0') + color; }
Это смесь вещей, которые делают работу за меня. Я использовал функцию JFreeman Hash (также ответ в этой теме) и псевдослучайную функцию Asykäri отсюда, а также некоторые отступы и математику от себя.
Я сомневаюсь, что функция воспроизводит равномерно распределенные цвета, хотя выглядит красиво и делает то, что должна.
источник
'0'.repeat(...)
недопустимый javascriptИспользуя
hashCode
ответ Кристиана Санчесаhsl
и современный javascript, вы можете создать средство выбора цвета с хорошим контрастом следующим образом:function hashCode(str) { let hash = 0; for (var i = 0; i < str.length; i++) { hash = str.charCodeAt(i) + ((hash << 5) - hash); } return hash; } function pickColor(str) { return `hsl(${hashCode(str) % 360}, 100%, 80%)`; } one.style.backgroundColor = pickColor(one.innerText) two.style.backgroundColor = pickColor(two.innerText)
div { padding: 10px; }
<div id="one">One</div> <div id="two">Two</div>
Поскольку это hsl, вы можете масштабировать яркость, чтобы получить желаемый контраст.
function hashCode(str) { let hash = 0; for (var i = 0; i < str.length; i++) { hash = str.charCodeAt(i) + ((hash << 5) - hash); } return hash; } function pickColor(str) { // Note the last value here is now 50% instead of 80% return `hsl(${hashCode(str) % 360}, 100%, 50%)`; } one.style.backgroundColor = pickColor(one.innerText) two.style.backgroundColor = pickColor(two.innerText)
div { color: white; padding: 10px; }
<div id="one">One</div> <div id="two">Two</div>
источник
Вот решение, которое я придумал для создания эстетически приятных пастельных тонов на основе входной строки. Он использует первые два символа строки как случайное начальное число, а затем генерирует R / G / B на основе этого начального числа.
Его можно легко расширить так, чтобы семя было XOR всех символов в строке, а не только первых двух.
Вдохновленный ответом Дэвида Кроу здесь: Алгоритм случайного создания эстетически приятной цветовой палитры
//magic to convert strings to a nice pastel colour based on first two chars // // every string with the same first two chars will generate the same pastel colour function pastel_colour(input_str) { //TODO: adjust base colour values below based on theme var baseRed = 128; var baseGreen = 128; var baseBlue = 128; //lazy seeded random hack to get values from 0 - 256 //for seed just take bitwise XOR of first two chars var seed = input_str.charCodeAt(0) ^ input_str.charCodeAt(1); var rand_1 = Math.abs((Math.sin(seed++) * 10000)) % 256; var rand_2 = Math.abs((Math.sin(seed++) * 10000)) % 256; var rand_3 = Math.abs((Math.sin(seed++) * 10000)) % 256; //build colour var red = Math.round((rand_1 + baseRed) / 2); var green = Math.round((rand_2 + baseGreen) / 2); var blue = Math.round((rand_3 + baseBlue) / 2); return { red: red, green: green, blue: blue }; }
GIST здесь: https://gist.github.com/ro-sharp/49fd46a071a267d9e5dd
источник
Вот еще одна попытка:
function stringToColor(str){ var hash = 0; for(var i=0; i < str.length; i++) { hash = str.charCodeAt(i) + ((hash << 3) - hash); } var color = Math.abs(hash).toString(16).substring(0, 6); return "#" + '000000'.substring(0, 6 - color.length) + color; }
источник
Все, что вам действительно нужно, это хорошая хеш-функция. На узле я просто использую
const crypto = require('crypto'); function strToColor(str) { return '#' + crypto.createHash('md5').update(str).digest('hex').substr(0, 6); }
источник
Я конвертировал это для Java.
Танки для всех.
public static int getColorFromText(String text) { if(text == null || text.length() < 1) return Color.BLACK; int hash = 0; for (int i = 0; i < text.length(); i++) { hash = text.charAt(i) + ((hash << 5) - hash); } int c = (hash & 0x00FFFFFF); c = c - 16777216; return c; }
источник
Эта функция делает свое дело. Это адаптация этой, довольно продолжительной реализации этого репо ..
const color = (str) => { let rgb = []; // Changing non-hexadecimal characters to 0 str = [...str].map(c => (/[0-9A-Fa-f]/g.test(c)) ? c : 0).join(''); // Padding string with zeroes until it adds up to 3 while (str.length % 3) str += '0'; // Dividing string into 3 equally large arrays for (i = 0; i < str.length; i += str.length / 3) rgb.push(str.slice(i, i + str.length / 3)); // Formatting a hex color from the first two letters of each portion return `#${rgb.map(string => string.slice(0, 2)).join('')}`; }
источник