Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   сборка массива цветов и их оттенков!!! (https://javascript.ru/forum/misc/76437-sborka-massiva-cvetov-i-ikh-ottenkov.html)

Роман Андреевич 11.01.2019 11:48

сборка массива цветов и их оттенков!!!
 
Коллеги, доброго времени суток, суть такая, для проекта нужно собрать массив цветов.

Например, берем цвет зеленый, и нужно получить какое-то кол-во его оттенков. на выходе должно быть так:

let colors = {
        green: [
            // и тут то самое кол-во его оттенков.
        ]
}


Как собрать массив я в курсе!!! Вопрос именно как получить оттенки? Под оттенками я полагаю изменение черного, типа светлее темнее.

Входящий цвет в любом формате hex / rgb. выходной цвет также. Переводить цвета, можно так:

hexToRGB(hex) {

		let c;

		if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
			
			c = hex.substring(1).split('');
			
			if(c.length == 3){
				
				c = [c[0], c[0], c[1], c[1], c[2], c[2]];

			}

			c = `0x` + c.join('');

			return [(c>>16)&255, (c>>8)&255, c&255];
		}

		return [];

	}

Откопал в сети.

Подскажите кто в курсе, или куда смотреть по крайней мере.
Заранее благодарю.

Nexus 11.01.2019 11:57

Так?
var colors=[[255,0,0],[0,255,0]],
	shades=[];

colors.forEach(function(color,index){
	shades[index]=[];
	let counter=255;
	while(counter){
		shades[index][counter--]=color.map(function(val){
			return !val?val:val-counter;
		});
	};
});

console.log(shades);

Роман Андреевич 11.01.2019 12:00

Nexus, минутку!!!

Роман Андреевич 11.01.2019 12:10

Nexus, если поставить например 228,60,30 то дальше будут отрицательные значения

Nexus 11.01.2019 12:11

Роман Андреевич, скрипт перед вами, поправьте.

Роман Андреевич 11.01.2019 12:12

Nexus, да я просто поделился. Спасибо

Роман Андреевич 11.01.2019 12:13

Nexus, тут еще вопрос в том, я пытаюсь понять как вообще оттенки изменяются??? Темнее, потом еще темнее и так далее.

Как сам процесс происходит

Alexandroppolus 11.01.2019 13:05

Цитата:

Сообщение от Роман Андреевич (Сообщение 501763)
Nexus, тут еще вопрос в том, я пытаюсь понять как вообще оттенки изменяются??? Темнее, потом еще темнее и так далее.

Как сам процесс происходит

проще всего получить цвет в формате HSL (есть библиотеки готовые), в котором уже менять L

потом либо конвертить обратно в rgb (если это надо), либо использовать напрямую - background-color: hsl(60,100%,25%);

https://webref.ru/css/value/color

Роман Андреевич 14.01.2019 06:29

Alexandroppolus, большое спасибо, разобрался!!!

Блондинка 11.03.2019 07:08

Решила воздержаться от создания новой темы, вопрос собсна о том как правильно перевести цвет из rgb в hsl и обратно, например есть зелёный (hex #008000, rgb 0,128,0 hsl 120,0,50) или темно-синий (hex #000080 rgb 0,0,128 hsl 240,0,50) вопрос собсна почему когда на странице прописываешь цвет в rgb, он получается одного оттенка, а когда прописываешь в hsl тот же самый цвет он получается совсем другого оттенка?


Часовой пояс GMT +3, время: 02:01.