Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.07.2009, 21:47
Интересующийся
Отправить личное сообщение для mouse_web Посмотреть профиль Найти все сообщения от mouse_web
 
Регистрация: 21.07.2009
Сообщений: 10

Как определить цвет (темный он или светлый)?
Помогите, пожалуйста, разобраться.
У меня на сайте пользователь выбирает фон для своего объявления (цветовая палитра 256 цветов). В зависимости от цвета фона нужно менять цвет текста (черный или белый). Как определить какой фон выбрал пользователь, темный или светлый?
Ответить с цитированием
  #2 (permalink)  
Старый 22.07.2009, 02:34
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

Поищите формулы перевода цвета из RGB-представления в HSL (точно не помню, как называется), там должна быть составляющаяя яркости.
Ответить с цитированием
  #3 (permalink)  
Старый 22.07.2009, 10:11
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,022

Если эта самая палитра представляет собой картинку (некий спектр), при клике по ней передаёте на сервер координаты мышки, относительно картинки. На сервере, имея такую же картинку и координаты, можно узнать выбранный цвет и передать обратно клиенту.
Ответить с цитированием
  #4 (permalink)  
Старый 22.07.2009, 11:07
Интересующийся
Отправить личное сообщение для mouse_web Посмотреть профиль Найти все сообщения от mouse_web
 
Регистрация: 21.07.2009
Сообщений: 10

Сообщение от Octane Посмотреть сообщение
Поищите формулы перевода цвета из RGB-представления в HSL (точно не помню, как называется), там должна быть составляющаяя яркости.
Спасибо!
Это то что нужно.
Как напишу код обязательно опубликую.
Ответить с цитированием
  #5 (permalink)  
Старый 22.07.2009, 13:13
Интересующийся
Отправить личное сообщение для mouse_web Посмотреть профиль Найти все сообщения от mouse_web
 
Регистрация: 21.07.2009
Сообщений: 10

Вот что получилось.

1. Переводим цвет HTML -> RGB -> HSL
2. Получаем: H - цветовой тон (например, красный, зелёный или сине-голубой), S - насыщенность, L - светлота (именно светлота, а не яркость) от 0 до 1.
3. Меняем цвет на нужный

function rgb2hsl(HTMLcolor) {
	r = parseInt(HTMLcolor.substring(0,2),16) / 255;
	g = parseInt(HTMLcolor.substring(2,4),16) / 255;
	b = parseInt(HTMLcolor.substring(4,6),16) / 255;
	var max = Math.max(r, g, b), min = Math.min(r, g, b);
	var h, s, l = (max + min) / 2;
	if (max == min) {
		h = s = 0;
	} else {
		var d = max - min;
		s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
		switch (max) {
			case r: h = (g - b) / d + (g < b ? 6 : 0); break;
			case g: h = (b - r) / d + 2; break;
			case b: h = (r - g) / d + 4; break;
		}
		h /= 6;
	}
	return [h, s, l]; // H - цветовой тон, S - насыщенность, L - светлота
}

function changeColor (HTMLcolor) {
	e = rgb2hsl(HTMLcolor);
	if ((e[0]<0.55 && e[2]>=0.5) || (e[0]>=0.55 && e[2]>=0.75)) {
		fc = '#000000'; // черный
	} else {
		fc = '#FFFFFF'; // белый
	}
	// далее меняем цвет, где это необходимо
}

changeColor ('FF0000');


В функции changeColor помимо светлоты еще учитывается параметр цветового тона. Т.к. например "желтый цвет" и "синий" одинаковой светлоты по тону совсем разные (желтый -светлее, синий - темнее).

Спасибо за внимание!
Ответить с цитированием
  #6 (permalink)  
Старый 22.07.2009, 13:20
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

Я так делал:
var light = (this.r * 0.8 + this.g + this.b * 0.2) / 510 * 100;
Ответить с цитированием
  #7 (permalink)  
Старый 22.07.2009, 13:35
Интересующийся
Отправить личное сообщение для mouse_web Посмотреть профиль Найти все сообщения от mouse_web
 
Регистрация: 21.07.2009
Сообщений: 10

Riim,
Так гораздо эффективнее. Спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как определить активное окно/вкладку? Chameleon Events/DOM/Window 5 19.03.2012 06:59
Переменная от переменной или как к имени переменной конкатенировать значение другой Aderba jQuery 5 12.11.2008 14:25
Как узнать свернуто окно браузера или нет. bar-boss Events/DOM/Window 3 25.09.2008 15:09
Как определить включен ли поддержака объектов ActoveX feodul Events/DOM/Window 5 02.06.2008 11:04
как определить шрифты scuter Общие вопросы Javascript 9 19.05.2008 13:32