lookfortheroot

Сделать ширину окошка 100vw, но установить лимит в 400px. Тогда влезет во всё, что меньше (с поправкой на содержимое и отступы)

function openPost() {
    document.getElementById("mySidepost").style.width = "100vw";
    document.getElementById("mySidepost").style.maxWidth = "400px";
    [...]
}

Если установлен margin, то будет переполнение по ширине. Нужно вычитать:

document.getElementById("mySidepost").style.width = "calc(100vw - 10px)";

А вообще, немного странно скриптами выполнять работу CSS. Намного лучше эти параметры перенести в стили.

Судя по постановке задачи, строго HEX вам не требуется. Браузеры давно уже поддерживают HSL, можно использовать его напрямую без лишних конвертаций:

let
	h, s, l,
	min_s = 30, max_s = 70,
	min_l = 70, max_l = 100;

h = Math.floor(Math.random() * 360); // 0-360 градусов цвета
s = Math.floor(Math.random() * (max_s - min_s) + min_s); // 30-70% насыщенности
l = Math.floor(Math.random() * (max_l - min_l) + min_l); // 70-100% яркости

document.body.style.backgroundColor = `hsl(${h}, ${s}%, ${l}%)`;