@IdoNotKnowWhatToSay

Как изменить контрастность цвета на заданное число по шкале от 1 и до 21?

Удалось найти формулы, которые помогают вычислить контрастность в диапазоне от 1 и до 21 между двумя цветами, но появилась несколько иная задача.
Есть ли формула, которая поможет изменить контрастность на заданное число? К примеру, имеется цвет текста, который в контрастности с цветом фона на 3 единицы из 21 и нужно изменить цвет таким образом, чтобы 3 стала, например, 4.5

// Вот так мы получаем яркость цвета
function getLuminance(rgb) {
    rgb = rgb.map((val) => {
        val /= 255;

        return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
    });

    return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
}

// А эта функция получает контрастность между двумя цветами
function getContrastRatio(foreground, background) {
    const lumA = getLuminance(foreground);
    const lumB = getLuminance(background);

    return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
}


А теперь нужно каким-то образом научиться изменять контрастность у цветов и при этом сохраняя оттенок (то-есть, он может становиться или светлее, если цвет фона темный или темнее, если цвет фона светлый)
  • Вопрос задан
  • 393 просмотра
Пригласить эксперта
Ответы на вопрос 2
Alexandroppolus
@Alexandroppolus
кодир
Можно попробовать перевести RGB в другую цветовую модель, например HSV или HSL или AHSL (или что-то вроде того). В этих моделях оттенок и яркость - отдельные независимые координаты (как например красный и синий цвета в RGB), и ты можешь менять яркость, не меняя оттенок. Потом обратно в RGB.

Ну а как менять яркость пикселей - отдельный вопрос. Скорее всего, выбрать какую-то "среднюю" яркость, и всё что темнее неё - делать ещё темнее, а всё что ярче - ещё ярче. Примерно так.
Ответ написан
tundramani
@tundramani
переводишь цвет в HSL
и меняешь светлоту-темноту - это то что определяет контрастность
при этом цветность-серость и тон остаются неизменными

здесь в верхнем ряду тон
внизу слева цветность-серость
внизу справа светлота-темнота
61420d48c7832058118978.png
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы