Как сделать из данного времени код в формате HEX?

Question

[Rufix]

Нашел в Youtube видео, где человек делает часы, которые меняют фон с течением времени. Решил повторить это, естественно без подсказок, правда приходиться лезть сюда, вы уж простите (это наверное глупо).
В общем, мне нужно превратить время в шестнадцатиричную систему, чтобы потом использовать это как цвет в формате HEX. Подскажите пожалуйста, как мне это сделать? Например, время сейчас 20:41:26

Если вам вдруг нужен код, то вот

var clock = document.getElementById ('clock');
var color = document.getElementById ('color');


var timer = setInterval (function () {
	var date = new Date ();
	var h    = date.getHours () + '';
	var m	 = date.getMinutes () + '';
	var s    = date.getSeconds () + '';
	if (h.length == 1) {h = '0' + h};
	if (m.length == 1) {m = '0' + m};
	if (s.length == 1) {s = '0' + s};
	clock.innerHTML = h + ':' + m + ':' + s;
}, 1000);

Answer 1

[Сергей Соколов]

Для цвета нужны значения трёх компонентов от 0 до 255 в десятичной системе, или от 00 до FF в шестнадцатиричной. С 16-ричной не обязательно связываться.

body {
  background-color: rgb(123, 45, 67);
}

или динамически

var R = 123, G = 45, B = 67;
document.body.style.backgroundColor = `rgb(${R}, ${G}, ${B})`;

Часы меняются от 0 до 23, минуты и секунды – от 0 до 60.
Надо «спроецировать» каждое из них на диапазон 0..255.

Например, часы:

var D = new Date();
var hours = D.getHours(); // 0..23
var RR = Math.floor(255 * hours / 23); // 0 .. 255

// то же с шестнадцатиричностью
var RR = Math.floor(255 * hours / 23).toString(16); // 0..FF
// может быть 1 или 2 цифры, надо всегда 2
RR = ('0' + RR).substr(-2); // дописываем в начале 0 и берем последние две цифры

Цвет будет меняться каждую секунду. Вроде бы, цель достигнута. Но хорошо бы придумать, как это сделать интереснее. Чтобы цвет менялся по кругу плавно, без резкого скачка в полночь. И больше напоминал цвет неба в это время суток.

Comments

[Rufix]

Итак, неловко вышло, т.к я нашел иной путь решения. Если вам интересно, то вот:

var hexHours     = h.toString(16);
	var hexMinutes  = m.toString(16);
	var hexSeconds  = s.toString(16);
	var hexNumber   = hexHours + hexMinutes + hexSeconds; 
	color.innerHTML = '#' + hexNumber;

	document.body.style.background = '#' + hexNumber;

Конечно, он скорее всего будет иметь слишком резкие переходы, но лично я как новичок доволен) Сейчас буду тестить ваш способ, ну аж уж создать часы, которые будут менять фон в зависимости от времени суток я думаю мне пока что не по силам)

[Сергей Соколов]

Rufix, этот способ может давать непредсказуемые результаты, в т.ч. нерабочие, из-за разного числа цифр в 16-ричном значении. Скажем, в начале часа 12 минут дадут всего одну букву "C". И может получиться код цвета из всего 5 символов вместо 6 или 3, как того требует спецификация.

#FFF - белый цвет, всего три символа
#FFFF - не валидный цвет
#FFFFF - не валидный цвет
#FFFFFF - белый цвет, 6 символов

[Rufix]

Сергей Соколов, Буду пробовать ваш способ, мой полностью нерабочий :) На радостях, увидев, что цвет плавно меняется подумал, что все нормально, а потом вывел значения в консоль, а там просто переменная в hex принимает значение текущего времени, т.е #211333, если сейчас 21:13:33.

[Сергей Соколов]

Rufix, вот фиддл для попробовать.

[Rufix]

Сергей Соколов, Спасибо) Обидно, конечно, что самому не получилось сделать)

[Сергей Соколов]

Rufix, так вы сделайте изменения: чтобы по цветовой модели HSV менялся цвет. H делал цветовой круг за минуту, S насыщенность нарастала к восходу и закату (низкое солнце), а яркость V темнела к ночи, и достигала максимума к полудню.