[javascript] JavaScript를 사용하여 문자열을 기반으로 16 진수 색상 만들기
오래된 문자열 (일반적으로 단일 단어 임)을 받아들이고 어떻게 든 함수를 만들고 싶습니다. 사이의 16 진수 값을 생성 #000000하고 #FFFFFF난 HTML 요소의 색상으로 사용할 수 있도록를.
#FFF덜 복잡한 16 진수 값 (예 🙂 일 수도 있습니다. 실제로 ‘웹 안전’팔레트의 색상이 이상적입니다.
답변
임의의 문자열 에 대한 Compute hex 색상 코드 에서 Javascript로 Java를 이식하면 됩니다.
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;
}변환하려면 다음을 수행하십시오.
intToRGB(hashCode(your_string))답변
다음은 6 자리 색상 코드를 일관되게 반환하는 CD Sanchez의 답변에 대한 수정입니다.
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예:
(대체 / 간단한 솔루션은 ‘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 %는 저에게 효과적입니다. 밝기는 깊이를 결정하고, 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 answer 에서 색상 목록이 해제되었으며 색상이 더 많은 다른 목록이 있습니다.
답변
해시에서 색상을 생성 할 수있는 Please.js에 대한 풀 요청 을 열었습니다 .
문자열을 다음과 같이 색상에 매핑 할 수 있습니다.
const color = Please.make_color({
from_hash: "any string goes here"
});예를 들어, "any string goes here"로 리턴 "#47291b"
과 "another!"같은 반환"#1f0c3d"
답변
입력이 간단한 해시가 전체 색상 스펙트럼을 사용하기에 충분히 다르지 않은 경우 해시 함수 대신 시드 난수 생성기를 사용할 수 있습니다.
Joe Freeman의 답변에서 나온 컬러 코더와 David Bau의 시드 난수 생성기를 사용하고 있습니다.
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 pseudo random function을 사용했습니다. 여기에서 사용 했고 일부 패딩과 수학을 사용했습니다.
멋지게 보이고 기능을 수행하지만 함수가 균일하게 분산 된 색상을 생성한다고 의심합니다.
