Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.01.2019, 11:48
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

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

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

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 [];

	}

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

Подскажите кто в курсе, или куда смотреть по крайней мере.
Заранее благодарю.
Ответить с цитированием
  #2 (permalink)  
Старый 11.01.2019, 11:57
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Так?
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);
Ответить с цитированием
  #3 (permalink)  
Старый 11.01.2019, 12:00
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

Nexus, минутку!!!
Ответить с цитированием
  #4 (permalink)  
Старый 11.01.2019, 12:10
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

Nexus, если поставить например 228,60,30 то дальше будут отрицательные значения
Ответить с цитированием
  #5 (permalink)  
Старый 11.01.2019, 12:11
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Роман Андреевич, скрипт перед вами, поправьте.
Ответить с цитированием
  #6 (permalink)  
Старый 11.01.2019, 12:12
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

Nexus, да я просто поделился. Спасибо
Ответить с цитированием
  #7 (permalink)  
Старый 11.01.2019, 12:13
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

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

Как сам процесс происходит
Ответить с цитированием
  #8 (permalink)  
Старый 11.01.2019, 13:05
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,012

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

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

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

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

Последний раз редактировалось Alexandroppolus, 11.01.2019 в 13:10.
Ответить с цитированием
  #9 (permalink)  
Старый 14.01.2019, 06:29
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

Alexandroppolus, большое спасибо, разобрался!!!
Ответить с цитированием
  #10 (permalink)  
Старый 11.03.2019, 07:08
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите , элементы массива по порядку из другого массива Rost_shat Javascript под браузер 9 28.07.2018 20:03
Соединение массива Artur_Hopf Общие вопросы Javascript 4 07.06.2018 16:48
Обход многомерного массива с задержкой после каждого цикла Walk Общие вопросы Javascript 2 14.08.2017 16:17
Помогите к js коду, написать html код Modrih Элементы интерфейса 8 16.06.2015 18:08
Сортировка массива по возрастанию другого массива. vas88811 Events/DOM/Window 4 12.01.2014 10:31