самопроизвольный перевод цвета из HEX в rgb
 

Привет! Есть скрипт который должен присвоить цвет элементу.

myElement.style.backgroundColor = '#ee4830';

Далее эти данные должны уйти на сервер, но сервер не принял, обнаружил проблему, что в консоле цвет уже не тот, rgb(238, 72, 48);

Долго искал где ошибка, но не нашел ее. Могу сказать, что если цвет задать 'green' - то в консоле он тоже green. Если цвет изменить на #fff830, то в консоле element.style = rgb(255, 248, 48);

Подскажите как такой вопрос решать?

И что тут изменилось самопроизвольно, rgb(255, 248, 48) это и есть #fff830, просто представление цвета иное, вам какая разница?

сервер принимает только в формате HEX

Ну сделайте тогда так:

myElement.setAttribute('style', 'background-color:#ee4830');

А что это означает?

может не правильно выразился, сервер принимает и проверяет на соответствие массиву цветов, а у него они HEX;

c помощью setAttribute все получилось, спасибо.
Интересно было бы разобраться почему так получается, что цвет переводится в другое представление.

Что значит принимает? Сервер может принять форму. Или это и делается отсылкой html-кода ему? Да и какие проблемы конвертировать цвет из любого представления в другой?

да отправляю форму, через XMLHttpReauest, responseType=json...
Тут интересный момент, через setAttribute в консоле в стилях уже те значения что мне и нужны. Но с сервера приходит ответ:
[{"fieldName":"fireball-color","fieldValue":"rgb(238, 72, 48)","errorMessage":"should be one of [#ee4830,#30a8ee,#5ce6c0,#e848d5,#e6e848]"}]
Я тут подумал не может ли быть проблема в тот момент когда я input-у присваиваю значение...

playerFireball.style.backgroundColor = playerFireball.style.backgroundColor || '#ee4830';

playerFireball.style.backgroundColor = '#ee4830';

- но даже если так, то input.value будет rgb(238, 72, 48)

Если отправление то чего, определили цвет элементу, затем его у него же получили о отправили, или как? Если вставлять в поле формы значение #fff830, то оно никак не превратится в rgb(255, 248, 48), сервер получит ровно то, что имеет value поля формы.

Я наверное не смогу все объяснить, посмотри...

это мой учебный преокт https://github.com/Sunantby/my-projects/tree/for-forum

data.js

'use strict'; 
 
var playerEyes = document.querySelector('.overlay').querySelector('.wizard-eyes');
var playerCoat = document.querySelector('.overlay').querySelector('.wizard-coat');
var playerFireball = document.querySelector('.overlay').querySelector('.setup-fireball');
var inputColorCoat = document.querySelector('.input-color-coat');
var inputColorFireball = document.querySelector('.input-color-fireball');
var inputColorEyes = document.querySelector('.input-color-eyes');
      playerFireball.setAttribute('style', 'background-color:#ee4830');
(function() {
 
 
        window.writeObj = function() {
            playerColorsSetup.coat = inputColorCoat.value;
            playerColorsSetup.fireball = inputColorFireball.value;
            playerColorsSetup.eyes = inputColorEyes.value;
        };
 
        window.writeSetup = function () {
            playerCoat.style.fill = playerCoat.style.fill || 'rgb(101, 137, 164)';
            playerEyes.style.fill = playerEyes.style.fill || 'blue';
            playerFireball.style.backgroundColor = playerFireball.style.backgroundColor || '#ee4830';
        };
 
        window.writeForm = function () {
            inputColorCoat.value = playerCoat.style.fill;
            inputColorEyes.value = playerEyes.style.fill;
            inputColorFireball.value = playerFireball.style.backgroundColor;
        };
 
})();
// выбираем цвет нашего игрока
window.writeSetup();

Как я понять проблемы. Если отправляется полученное из определенного в стиле цвета и сервер получает RGB, то какая проблема его конвертировать в HEX? Да и столь ли это необходимо?

я так понял если значение стиля backgroundColor записать в input.value, то это значение из HEX автоматически конвертируется в rgb... правильно?

это необходимо в рамках учебного проекта...
в input.value должен быть HEX

Нет, это браузер помещает в style цвет в своем представлении, а не в том котором он задается. Если его получать у элемента и вставлять значением в поле, то оно и будет в RGB. Если же в поле записывать HEX, то оно никак не изменится на RGB.

Либо вставляйте непосредственно HEX значение в поле, если не возможно это, то конвертируйте RGB в HEX перед записью его в поле.

спасибо, теперь понятно

Хранить все "настройки" отдельно, из настроек же брать для отправки.

всем спасибо, вопрос решил...
использовал конверсию, кому нужно вот код...

(function () {
	window.convertColor = function (color, type) {
		if (type.toLowerCase() === 'hex') {
			const rgbToHex = rgb => "#" + ((1 << 24) + (Number(rgb.match(/\d{1,3}/gi)[0]) << 16) + (Number(rgb.match(/\d{1,3}/gi)[1]) << 8) + Number(rgb.match(/\d{1,3}/gi)[2])).toString(16).slice(1);
			return rgbToHex(color);
		}
		if (type.toLowerCase() === 'rgb') {
			const  hexToRgb = hex => `rgb(${(parseInt(hex.replace(/\#/gi,''), 16) >> 16) & 255},${(parseInt(hex.replace(/\#/gi,''), 16) >> 8) & 255},${(parseInt(hex.replace(/\#/gi,''), 16)) & 255})`;
			return hexToRgb(color);
		}
	}
})();