Получение среднего цвета изображения

#любой_язык #цвета

Два дня тому назад, отключили интернет и пришлось быть без интернета. Вместо музыки
на сайте слушал приложение Windows "Музыка Groove". И тут я заметил интересную вещь:
приложение брало изображение саундтрека и аддитивным смещением  вычисляло средний цвет
всего изображения.


Саундтреки MARVEL были взяты для примера.
Как это можно реализовать? Подойдут решения на WPF, Windows Forms, ASP.NET или просто
на HTML/CSS/Javascript. 
    

Ответы

Ответ 1

Python-скрипт на основе примера из документации OpenCV:

import cv2
import numpy as np
from sklearn.cluster import KMeans
from collections import Counter


def get_dominant_color(image, k=4):
    image = image.reshape((image.shape[0] * image.shape[1], 3))
    clt = KMeans(n_clusters=k)
    labels = clt.fit_predict(image)
    label_counts = Counter(labels)
    dominant_color = clt.cluster_centers_[label_counts.most_common(1)[0][0]]
    return list(dominant_color)


bgr_image = cv2.imread('image.png')
hsv_image = cv2.cvtColor(bgr_image, cv2.COLOR_BGR2HSV)
dom_color = get_dominant_color(hsv_image)
dom_color_hsv = np.full(bgr_image.shape, dom_color, dtype='uint8')
dom_color_bgr = cv2.cvtColor(dom_color_hsv, cv2.COLOR_HSV2BGR)
output_image = np.hstack((bgr_image, dom_color_bgr))
cv2.imshow('Dominant Color', output_image)
cv2.waitKey(0)

Наложение цветов, C#

#c_sharp #цвета

У меня есть два изображения - А и Б, которые я хотел бы сложить.

Причем они должны складываться таким образом, чтобы получилось как "слои" в фотошопе/паинтнете
- то есть изображение А позади изображения Б.

Беда в том, что в изображении Б используется прозрачность.

Как следствие пиксель должен трансформировать по какой то формуле, но я не смог вычислить
самостоятельно как именно.

Если у изображения Б пиксель прозрачен, то мы юзаем пиксель А

Если у изображения Б пиксель сплошной, то мы юзаем пиксель Б

А как мы получаем пиксель например с половиной прозрачности?
    

Ответы

Ответ 1

Почему бы не так: если alpha — прозрачность пикселя верхней картинки, то результирующий
пиксель есть средневзвешенное пикселя верхней картинки с весом alpha, и нижней с весом
(1 - alpha)?

Рандомный оттенок

#jquery #цвета

Хочу создать форму, где пользователь нажимает на нужный цвет и скрипт генерирует
случайный оттенок этого цвета.

Я генерирую цвет rgb с помощью random. Но я не могу Придумать, как сделать, что бы
генерировался именно оттенок цвета, а не случайный цвет



$(function() {
  $('#color').change(function() {
    var min = 0, max = 255;
    
    var rgbColor = 'rgb('+(Math.floor(Math.random() * (max - min)) + min)+','+(Math.floor(Math.random()
* (max - min)) + min)+','+(Math.floor(Math.random() * (max - min)) + min)+')';
    
    $('#shade').val(rgbColor).css('border-color', rgbColor);
  });
});
#shade {border: 2px solid #000;}


Выберите цвет: 
  
    Выбрать цвет...
    Красный
    Зелёный
    Жёлтый
    Синий
    Серый
  


  Оттенок:
  





Как сделать, что бы генерировался оттенок?
    

Ответы

Ответ 1

Нужно записывать кода всех оттенков нужных



$(function() {
  $('#color').change(function() {
    var self = this,
        // Создаём список цветов
        colorsModels = {
          'red': {'r': '50-255', 'g': '0', 'b': '0'},
          'green': {'r': '0', 'g': '50-255', 'b': '0'},
          'yellow': {'r': '50-255', 'g': 'r', 'b': '0'},
          'blue': {'r': '0', 'g': '0', 'b': '50-255'},
          'grey': {'r': '50-200', 'g': 'r', 'b': 'r'}
        };
    // Проверяем, существует ли цвет указанный в списке
    if( colorsModels[self.value] !== undefined  ){
      // Передаём массив цвета в переменную и создаём rgb
      var model = colorsModels[self.value],
          rgb = {r: null, g: null, b: null};
      
      // Перебираем каждый цвет из массива
      for(var key in model){
        if( /\d{1,3}\-\d{1,3}/.exec(model[key]) ){ // Проверяем, указано ли значение
диапазоном
          // Вычисляем минимум и максимум с диапазона
          var min = parseFloat( model[key].replace(/(\d{1,3})\-\d{1,3}/, '$1') ),
              max = parseFloat( model[key].replace(/\d{1,3}\-(\d{1,3})/, '$1') );
          
          // Вычисляем рандомное число в этом диапазоне
          var value = Math.floor(Math.random() * (max - min)) + min;
          
          // Применяем значение
          rgb[key] = value;
        }else if( /\d{1,3}/.exec(model[key]) ){ // Если цвет указан не диапазоном,
то проверяем, цифра ли это
          // Преобразовываем значение в цифру
          var value = parseFloat( model[key] );
          
          // Применяем значение
          rgb[key] = value;
        }else if( model[key] === 'r' || model[key] === 'g' || model[key] === 'b'
){ // Проверяем, ну казано ли значение повторяющим цветом (не равно ли значение пердыдущим
цветам)
          // Проверяем, на допустимость повторения
          if( (key !== 'r' && key !== model[key]) || (model[key] === 'g' && key !==
'r') ){
            // Если всё нормально, то копируем значение
            rgb[key] = rgb[model[key]];
          }else{
            console.error('Invalid!');
          };
        }else{
          console.error('Undefined a value color!');
        };
      };
      
      // Устанавливаем значение
      var rgbColor = 'rgb('+rgb['r']+','+rgb['g']+','+rgb['b']+')';
      
      $('#shade').val(rgbColor).css('border-color', rgbColor);
    }else{
      console.error('Undefined a color!');
    };
  });
});
#shade {border: 2px solid #000;}


Выберите цвет: 
  
    Выбрать цвет...
    Красный
    Зелёный
    Жёлтый
    Синий
    Серый
  


  Оттенок:
  



Ответ 2

Обычно цвет переводят в цветовую модель HSV, меняют оттенок цвета (Hue) и переводят
обратно в RGB. Если нужно поменять насыщенность - Saturation. Если светлоту - Volume.

Посмотрите также другие цветовые модели - многие из них "заточены" под разные вещи.


Ответ 3

Для серого цвета надо выбросить один random, и выпавшее значение присваивать всем
каналам (r,g,b).
Для прочих цветов генерировать значения не в полном диапазоне [0, 255], а раздельно
по каналам, отдавая предпочтение тем или иным из них.

function limitedRandom (min, max)
{
    return (Math.floor(Math.random() * (max - min)) + min);
}

red = {
    r: limitedRandom(150, 255);
    g: limitedRandom(0, 100);
    b: limitedRandom(0, 100);
};


yellow = {
    r: limitedRandom(150, 255);
    g: limitedRandom(150, 255);
    b: limitedRandom(0, 100);
};
// and so on


Конкретные границы диапазонов цветов подберите по своему вкусу в графическом редакторе.

Рандомный оттенок

#jquery #цвета

Хочу создать форму, где пользователь нажимает на нужный цвет и скрипт генерирует
случайный оттенок этого цвета.

Я генерирую цвет rgb с помощью random. Но я не могу Придумать, как сделать, что бы
генерировался именно оттенок цвета, а не случайный цвет



$(function() {
  $('#color').change(function() {
    var min = 0, max = 255;
    
    var rgbColor = 'rgb('+(Math.floor(Math.random() * (max - min)) + min)+','+(Math.floor(Math.random()
* (max - min)) + min)+','+(Math.floor(Math.random() * (max - min)) + min)+')';
    
    $('#shade').val(rgbColor).css('border-color', rgbColor);
  });
});
#shade {border: 2px solid #000;}


Выберите цвет: 
  
    Выбрать цвет...
    Красный
    Зелёный
    Жёлтый
    Синий
    Серый
  


  Оттенок:
  





Как сделать, что бы генерировался оттенок?
    

Ответы

Ответ 1

Нужно записывать кода всех оттенков нужных



$(function() {
  $('#color').change(function() {
    var self = this,
        // Создаём список цветов
        colorsModels = {
          'red': {'r': '50-255', 'g': '0', 'b': '0'},
          'green': {'r': '0', 'g': '50-255', 'b': '0'},
          'yellow': {'r': '50-255', 'g': 'r', 'b': '0'},
          'blue': {'r': '0', 'g': '0', 'b': '50-255'},
          'grey': {'r': '50-200', 'g': 'r', 'b': 'r'}
        };
    // Проверяем, существует ли цвет указанный в списке
    if( colorsModels[self.value] !== undefined  ){
      // Передаём массив цвета в переменную и создаём rgb
      var model = colorsModels[self.value],
          rgb = {r: null, g: null, b: null};
      
      // Перебираем каждый цвет из массива
      for(var key in model){
        if( /\d{1,3}\-\d{1,3}/.exec(model[key]) ){ // Проверяем, указано ли значение
диапазоном
          // Вычисляем минимум и максимум с диапазона
          var min = parseFloat( model[key].replace(/(\d{1,3})\-\d{1,3}/, '$1') ),
              max = parseFloat( model[key].replace(/\d{1,3}\-(\d{1,3})/, '$1') );
          
          // Вычисляем рандомное число в этом диапазоне
          var value = Math.floor(Math.random() * (max - min)) + min;
          
          // Применяем значение
          rgb[key] = value;
        }else if( /\d{1,3}/.exec(model[key]) ){ // Если цвет указан не диапазоном,
то проверяем, цифра ли это
          // Преобразовываем значение в цифру
          var value = parseFloat( model[key] );
          
          // Применяем значение
          rgb[key] = value;
        }else if( model[key] === 'r' || model[key] === 'g' || model[key] === 'b'
){ // Проверяем, ну казано ли значение повторяющим цветом (не равно ли значение пердыдущим
цветам)
          // Проверяем, на допустимость повторения
          if( (key !== 'r' && key !== model[key]) || (model[key] === 'g' && key !==
'r') ){
            // Если всё нормально, то копируем значение
            rgb[key] = rgb[model[key]];
          }else{
            console.error('Invalid!');
          };
        }else{
          console.error('Undefined a value color!');
        };
      };
      
      // Устанавливаем значение
      var rgbColor = 'rgb('+rgb['r']+','+rgb['g']+','+rgb['b']+')';
      
      $('#shade').val(rgbColor).css('border-color', rgbColor);
    }else{
      console.error('Undefined a color!');
    };
  });
});
#shade {border: 2px solid #000;}


Выберите цвет: 
  
    Выбрать цвет...
    Красный
    Зелёный
    Жёлтый
    Синий
    Серый
  


  Оттенок:
  



Ответ 2

Обычно цвет переводят в цветовую модель HSV, меняют оттенок цвета (Hue) и переводят
обратно в RGB. Если нужно поменять насыщенность - Saturation. Если светлоту - Volume.

Посмотрите также другие цветовые модели - многие из них "заточены" под разные вещи.


Ответ 3

Для серого цвета надо выбросить один random, и выпавшее значение присваивать всем
каналам (r,g,b).
Для прочих цветов генерировать значения не в полном диапазоне [0, 255], а раздельно
по каналам, отдавая предпочтение тем или иным из них.

function limitedRandom (min, max)
{
    return (Math.floor(Math.random() * (max - min)) + min);
}

red = {
    r: limitedRandom(150, 255);
    g: limitedRandom(0, 100);
    b: limitedRandom(0, 100);
};


yellow = {
    r: limitedRandom(150, 255);
    g: limitedRandom(150, 255);
    b: limitedRandom(0, 100);
};
// and so on


Конкретные границы диапазонов цветов подберите по своему вкусу в графическом редакторе.

Определить математически <<средний цвет>> из 2х

#c_sharp #цвета

Имеем 2 цвета, заданы в RGB, по 1 байту на цвет.

Если брать и складывать каждый из цветов, затем делить на 2, то получается на мой
взгляд не совсем верно. Допустим FF0000 и 00FF00 таким образом родят 7F7F00, который
смотрится намного темнее, чем оба его "родителя". Если таким образом считать средний
между FF0000 и FFFF00, то будет FF7F00, который на взгляд явно ближе к FF0000, чем
к FFFF00. На взгляд средний между ними примерно FFAA00.

В каждом пикселе монитора мы имеем 3 субпикселя, питание подаваемое на которые изменяется
от 0 до 255 (некоторых баллов) при данной глубине цвета, если я всё верно понимаю.
Хочу узнать, как можно математически просчитать цвет, который был бы "средним" между
двумя заданными, а именно был бы похож на каждый из них в равной мере, при этом имея
среднюю между ними яркость.
Возможно, есть стандартные библиотеки в средах разработки, которые делают что-то
подобное?



div {
  width: 6em;
  height: 6em;
  display: inline-block;
  font-family: monospace;
  text-indent: -12ch;
  overflow: hidden;
}

div:after {
  content: attr(style);
}












    

Ответы

Ответ 1

В RGB нельзя высчитать "средний" цвет. Во первых, яркость разных цветов воспринимается
глазом по разному - т.е. яркость не "определяется наибольшим значением любого из 3
цветов". 

В RGB (sRGB) зеленый ярче красного, красный ярче синего. FF0000 по яркости совпадает
с 009B00 (справа), а не с вырвиглазным 00FF00 (слева):



Во вторых, отсчет яркости не привязан строго к 0, и простое "уполовинивание" значения
дает слишком темные цвета. Например, "полуяркий красный" - это, скорее, A60000, а не
7F0000, как можно было бы ожидать. 

Для правильного смешивания цветов их стоит предварительно перевести в цветовое пространство,
отражающее человеческое восприятие, например, Lab color space, и высчитывать среднее
уже в этом пространстве. Вот сравнительные результаты для чистых R G и B (сверху -
с преобразованием в Lab и усреднением, снизу - с усреднением в RBG).







Видно, что усреднение по RGB дает слишком темный результат, а усреднение через Lab
- средний по яркости.

В C# реализуется достаточно легко, готовые форумы есть по ссылкам на вики выше. Если
не хочется вручную вписывать преобразование - возьмите готовую библиотеку:

PM> Install-Package ColorMine




var color1 = new Rgb() { R = 255 };
var color1Lab = color1.To();

var color2 = new Rgb() { G = 255 };
var color2Lab = color2.To();

var averageLab = new Lab()
{
    L = (color1Lab.L + color2Lab.L) / 2,
    A = (color1Lab.A + color2Lab.A) / 2,
    B = (color1Lab.B + color2Lab.B) / 2,
};

var averageLabRgb = averageLab.ToRgb();


Ответ 2

Есть две модели смешивания: адитивное и субтрактивное смешение цветов. Можно почитать
тут https://creativshik.com/pochemu-vret-monitor/

Адитивное будет так (оно "работает" при световом смешивании лучей, в некоторых графических
программах):

r =  (r1 + r2 ) / 2;
g =  (b1 + b2 ) / 2;
b =  (b1 + b2 ) / 2;


Cубтрактивное 

r =  // TODO:
g =  
b =  


Второе "смешивание" цветов похоже на привычное смешивание "акварельных красок" на
белом листе. Ещё такое смешивание можно включить в Corel Draw.

Адитивное - "приближает" цвета к чёрному. А субтрактивное - к белому.

Если стоит задача определить "ближайший" цвет,
 то используется сумма rgb c коефициентами

Q = r * Kr + g* Kg +  b*Kb;


Где Q- будет "вес" по которому можно определить схожесть. этой формулой переводят
изображение в чёрнобелое. Для разных преобразований используют разные коефициенты.
Стандартные для ч/б где-то видел - найду запишу.



Коефициенты нашёл, вот 


  Y=0.299*R+0.587*G+0.114*B (В.Порев "Компьютерная графика", BHV, 2002г. -
  страница 41.)
  
  Y= 0.2125R + 0.7154G + 0,0721В (Фотошоп ссылка )


При попытке вставить коефициенты - они в формуле сокращаются, т.е. для Y(R=255,G=0,B=0)=76,5
, Y(R=0;G=255;B=0)=150,45. Средний цвет будет (128,128,0), но и средняя яркость будет
тоже средней - 113,48. Если вы хотите "поднять" яркость до max(Y(цвет1),Y(цвет2)) то
вы можете пересчитать цвет, учитывая формулу приведённую выше. 

Если у вас задача "не потерять яркость", тогда ставим задачу - сохранить максимальную
яркость.

 Y(Red=255) = 76,5   Y(Green=255) = 150,45,  Y=(Red+Green) = 113,48;
 t = Ymax / Y =  150,45/113,48 = 1,325 
 Тогда (адитивное смешение):
 r` = (r1 + r2)*t/2  = (255 + 0)*1,325/2 = 170
 g` = (g1 + g2)*t/2  = (0 + 255)*1,325/2 = 170
 b` = (b1 + b2)*t/2  = (0 + 0)*1,325 / 2 = 0
 Y(R=170,G=170,B=0) = 150,45


Для субтрактивного смешения можно написать аналогичную формулу. Можно так же в цикле
прибавлять еденицу - выйдет похожее значение (R=169,G=127,B=42). Внизу пример, сначала
R (255,0,0), потом результат "затемнённый" R+G (128,128,0), Потом скорректированый
по яркости (170,170,0), потом сделаный инкрементом (169,127,42). Потом зеленый (0,255,0)


И последнее, ставьте проверки что б компонента не выходила за пределы [0,255], если
меньше 0 то присваивать 0, если более 255 то ставить 255.

Расчет “цветовой карты” в C#

#c_sharp #цвета

Нужно чтобы числа от 0 до 255 соответствовали такой вот color map 

и в результате получались три числа RGB, например (0,0,255)
    

Ответы

Ответ 1

Вам поможет вот эта иллюстрация с Википедии (ссылка)



Ваш пример начинается с 240° и идет налево до 0°.

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


1 четверть: Синий 100%, Зеленый растет от 0% до 100%
2 четверть: Зеленый 100%, Синий уменьшается со 100% до 0%
3 четверть: Зеленый 100%, Красный растет от 0% до 100%
4 четверть: Красный 100%, Зеленый уменьшается со 100% до 0%


Думаю с арифметикой приведения вы справитесь


Ответ 2

Немного поработал над вашей картинкой. 

Если рассмотреть, то понятно что 


синий цвет идет от 0 до 127 с интенсивностью от 255 до 0.
зеленый цвет идет от 0 до 127 с интенсивностью от 0 до 255 и от 128 до 255 с интенсивностью
от 255 до 0
красный цвет от 128 до 255 с интенсивностью от 0 до 255
Основываясь на это пишем код:



struct Color {
  public Color(int r, int g, int b) { R = r; G = g; B = b;}
  int R,G,B;
}

Color getColor(int color)
{
  int red = (color >= 128) ? (color - 128)*2 : 0;
  int green = (color < 128) ? color*2 : 255 - (color - 128)*2; 
  int blue = (color < 128) ? 255 - 2*color : 0;
  return new Color(red,green,blue);
}



Передает в функцию число от 0 до 255, получаем цвет в RGB.

P.S. Возможно, плохо обработал граничные значения (0, 127 или 128 и 255).

Цветовая математика в JavaScript

#javascript #css #цвета

Используя Less можно делать операции над цветами, например darken("red",10%).

Есть ли в стандартном JavaScript функции для работы с цветом?

Если нету, то может быть есть легковесные библиотеки для этого, если есть, то какие?
    

Ответы

Ответ 1

В CSS есть свои собственные переменные, по сути их можно адаптировать и использовать
для этого.

Пример:



:root {
  --opacity: 1;
}

div {
  /*пример*/
  background: hsla( 16, 100%, 50%, calc(var(--opacity) *.9));
  /*другие стили*/
  width: 20%;
  margin: 10% auto;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding: 20px;
  border: 5px solid black;
}
Sample Text

Javascript Canvas и CSS цвета

#javascript #css #canvas #цвета

На сайте мне необходима функция цветовой пипетки,
то есть возможность скопировать цвет пикселя, который находится под курсором.

Для этого я использую canvas и функцию ctx.getImageData и получаю массив с нужными
цветами rgba.

С помощью этого массива можно повторить цвет, в рамках самого Canvas, 
но если попытаться применить этот цвет на стили CSS, то цвет будет другой.

Как я понимаю, между цветовой схемой Canvas и CSS существуют различия.
Как построить JavaScript-функцию, которая бы устраняла эти различия?

UPD: я создал небольшой пример.

Там можно увидеть три элемента — широкий div, с цветом rgb(36,43,51),
внутри которого находится элемент Canvas, на котором размещено изображение, состоящее
из фона такого же цвета и белой полосы слева,
и ниже него элемент img с тем же содержимым. 

Вы не увидите разницы между цветами div и img, потому что они одни и те же. 

Но изображение, отображаемое внутри Canvas имеет совсем другой цвет и заметно выделяется
на общем фоне.

Как я понимаю, использование функции ctx.getImageData показывает правильные цвета
и для CSS, и для Canvas, но проблема в том, что все цвета внутри тега canvas искажаются.
    

Ответы

Ответ 1

Цветовые схемы не должны отличаться, если вы все делаете верно, приведу рабочий пример:



let canvas = document.getElementById('canvas_id'),
  ctx = canvas.getContext('2d'),
  base_image = new Image();
//Изображение в base64 чтобы небыло ошибок с cross origin при вызове getImageData
base_image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAEVCAYAAAAWzhetAAAHKUlEQVR4nO3Yz3EcSB2G4Z/Xg2u5cCMJNgmSIB4gHYiCIJYQfKCwyusZeTx/NOKAiIDq6vK7z6Py/evq1rzWvHudeZ2qP739i/p7+Gw/z8xfd49Y6s8z89PuEWv86/cz//jj7hXr/GVm/rl7xDp/2z1goT/Mz/NT+PJ+2D0AAPj/CToABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABBwuuxes9JiZ++4R69zDl/eye8ByL5N9nLd7+3G+7h6wVvRVzszMbW5zCZ/w8Gn3gpVuM/N194h1voYvL5yDN5fJPs6nY/txPnYPWCv6Kmdm5pf5ZT6FT+grdwAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACDgcdy9Y6Tozp90j1jmFL++8e8By58k+ztOH9uN82T1greirnJmZ05zmGD7hoXu06Qc9fDZB/46dPrQfp6B/t05vP1W+cgeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgIDDx90LVnqZmevuEetcw5d32z1gudtkH+fxuf04H7sHrBV9lTMz83k+z8fwCf2FDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYfL7gUr3WcmfMBL+Gy33QOWu032cV4+tB/nY/eAtcI3N5e3n6rD0+4FK51nJnzAp/DZvuwesNyXyT7O4639OO+7B6wVvrn5cZ7mx/AJfeUOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABh+PuBSvdZ+a8e8Q65/DlXXcPWO462cd5et9+nI/dA9aKvsqZmXme5zmGT9gP+rfdI9b5Fr68X0fQo4/z+Yf244wHPfoqZ+Z/Qe+e0FfuABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQcPi0e8FK55l52j1inafw5R13D1juODPvd49Y4/ky8/S73SvWue0esFb4I3Pez9O8D5/wcN29YKWXSf/y3cKXF762N7fJnvJ6bT/O190D1oq+ypmZuc51ruET+sodAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACDh93L1jpZWYuu0escwlf3m33gOVuk32c10f7cT52D1gr+ipnZubzPM8tfEJ/oQNAgKADQICgA0CAoANAgKADQICgA0CAoANAgKADQICgA0CAoANAgKADQICgA0CAoANAgKADQICgA0CAoANAgKADQICgA0CAoANAgKADQICgA0CAoANAgKADQICgA0CAoANAgKADQMDhuHvBSteZOe0esc7pt7sXrHPePWC582T/P337zczpsHvFOi+7B6wV/sicxzzPY77unrHMoXx5gv79+rZ7wHLnmXndPWKNq6B/z8IfmfOY53kNBz36JwIA/LoIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAEHP69e8FKl5n5snvEOl/e7V6wzn33gOW+zsx194g17oeZ5/ANvuwesFb4I3Ouc5nzfNs9Y5lD9CPlvx6TLsM9fHnxz8xJn/D+2n6cr7sHrBX+yJzrXOdd+IS+cgeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgID/AHRqDt5smHseAAAAAElFTkSuQmCC";
base_image.onload = () => {
canvas.width = base_image.width;
canvas.height = base_image.height;
ctx.drawImage(base_image, 0, 0);
}


//При наведении мышки на канвас будем менять цвет у DIV блока
canvas.addEventListener('mousemove', event => {

  let x = event.pageX - canvas.offsetLeft,
    y = event.pageY - canvas.offsetTop,
    imgData = ctx.getImageData(x, y, 1, 1).data;


  document.querySelector('#color_div').style.backgroundColor = `rgba(${imgData[0]},
${imgData[1]}, ${imgData[2]}, 1)`;
});

  

    

    
color
  





Все ровно так, как вы и описывали, в момент наведения мышки мы высчитываем ее x\y
координаты относительно canvas, далее получаем по этим координатам imageData и получаем
4 значения соответствующих red,green,blue,aplha.

Генерация уникальных, хорошо различимых цветов

#c_sharp #алгоритм #цвета

Есть ли хороший алгоритм (либо веб-сервис), который может сгенерировать N цветов,
которые визуально хорошо различимы между собой? 

Это необходимо для отображения на одном графике несколько различных функций одновременно
(N <= 70).
    

Ответы

Ответ 1

Недавно попался один сервис, который можно для этого использовать. Ссылка на сервис.
Как вводить параметры:


Number of swatches - сколько цветов мы хотим.
Rotations - (n - 1) * 0.618, где N - количество цветов, которое мы ввели. Магическое
число 0.618 - это золотое сечение, чтобы новые цвета попадали как можно дальше по оттенку
от всех ранее выбранных.
Hue - внезапно, не оттенок, а насыщенность. С плавным переходом результат не очень,
поэтому наверно придется несколько раз прогонять.


Результаты работы для 21 цвета, hue 3 и hue 1:




Если вдруг сайт упадет и/или нужно будет разобраться на чем основан алгоритм:

Последняя ссылка с https не открывается, поэтому там http


  This is a gradient creation tool that uses the cubehelix method. This
  is built around chroma.js's implementation of cubehelix.

Как через css изменить цвет png изображения?

#css #цвета

Есть png-иконки, например, из вк, синего цвета. Как с помощью css изменить его на белый?
P.S: нагуглил про filter: hue-rotate(), но с белым цветом это походу не вариант.







    

Ответы

Ответ 1

Вы можете использовать css-фильтры:


grayscale конвертирует цвета в ч/б
sepia создает эффект сепии
saturate задает насыщенность
hue-rotate меняет цвета изображения в зависимости от заданного угла. Угол поворота
определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового.
Значение задается в градусах (0deg — 360deg)
invert инвертирует цвета
opacity задает прозрачность элемента 
brightness изменяет яркость изображения
contrast изменяет контрастность изображения
blur создает эффект размытости
drop-shadow создает тень


Примечание: фильтры можно комбинировать между собой



.bg{
  background-color: #8fbd35;
  padding: 20px;
  }

.fl{
  filter: invert(1);
}

  


  





Материал для прочтения: habrahabr

Демо: демо


Ответ 2

Если фон прозрачный, то можно выкрутить картинке яркость. Например:

filter: brightness(10);


Но остаётся некоторая неуверенность, до какого же уровня выкручивать, чтобы наверняка
исчезли все оттенки, кроме белого. А вот brightness(0) даст полностью чёрную картинку,
которую легко инвертировать:

filter: brightness(0) invert(1);


http://codepen.io/glebkema/pen/dNKGXZ



body { background: #ccc; }
img { display: block; }






Ответ 3

Пример смены цветов на CSS:



@keyframes hue {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(-360deg);
    }
}

.hue {
    animation: hue 10s infinite linear;
 }

Как создавать контрастные по отношению друг к другу цвета?

#алгоритм #цвета

В моем проекте есть возможность рисовать график по некоторым наборам данных. Их количество
варьируется от 1 до... до тех пор, пока пользователю не надоест добавлять новые наборы
данных.

Необходимо, чтобы на графике были хорошо различимы ВСЕ линии. Для этого, нужно чтобы
все линии были более-менее контрастны по отношению к друг-другу, на сколько я понимаю. 

Вопрос - как создавать эти контрастные цвета?
    

Ответы

Ответ 1

По совету @Kromster'a воспользовался вот этим скриптом:

for (int i = 0; i < 10; i++)
    colors[i] = HSV(0.1 * i, 0.5, 1.0);

В чём премущество HEX-формата цвета в HTML перед RGB(A)? [закрыт]

Каков выигрыш от использования цвета в шетнадцатиричном (HEX) формате HTML?
Этот формат гораздо труднее для восприятия, чем RGB, да и канала прозрачности нет. Казалось бы, при таком раскладе можно и полностью отказаться он HEX в пользу RGBA, но HEX не только активно используется, но и имеет большую популярность.
Остаётся сделать вывод, что использование цвета в этом формате является приоритетным с точки зрения оптимизации. Верно ли это предположение?

Ответ

Это почти одно и то же. Просто HEX использует представление в шестнадцатеричной системе счисления (#RRGGBB или #RGB), а rgb в десятичной, что более удобно для человеческого восприятия. Еще в rgb можно указывать значения в процентах rgb(100%,0%,0%) и указывать прозрачность rgba(255,255,255,0.5)

Наложение цветов, C#

У меня есть два изображения - А и Б, которые я хотел бы сложить.
Причем они должны складываться таким образом, чтобы получилось как "слои" в фотошопе/паинтнете - то есть изображение А позади изображения Б.
Беда в том, что в изображении Б используется прозрачность.
Как следствие пиксель должен трансформировать по какой то формуле, но я не смог вычислить самостоятельно как именно.
Если у изображения Б пиксель прозрачен, то мы юзаем пиксель А
Если у изображения Б пиксель сплошной, то мы юзаем пиксель Б
А как мы получаем пиксель например с половиной прозрачности?

Ответ

Почему бы не так: если alpha — прозрачность пикселя верхней картинки, то результирующий пиксель есть средневзвешенное пикселя верхней картинки с весом alpha, и нижней с весом (1 - alpha)?

Расчет “цветовой карты” в C#

Нужно чтобы числа от 0 до 255 соответствовали такой вот color map
и в результате получались три числа RGB, например (0,0,255)

Ответ

Вам поможет вот эта иллюстрация с Википедии (ссылка)

Ваш пример начинается с 240° и идет налево до 0°.
Вам нужно разделить всю ширину на 4 области.
1 четверть: Синий 100%, Зеленый растет от 0% до 100% 2 четверть: Зеленый 100%, Синий уменьшается со 100% до 0% 3 четверть: Зеленый 100%, Красный растет от 0% до 100% 4 четверть: Красный 100%, Зеленый уменьшается со 100% до 0%
Думаю с арифметикой приведения вы справитесь

Рандомный оттенок

Хочу создать форму, где пользователь нажимает на нужный цвет и скрипт генерирует случайный оттенок этого цвета.
Я генерирую цвет rgb с помощью random. Но я не могу Придумать, как сделать, что бы генерировался именно оттенок цвета, а не случайный цвет
$(function() { $('#color').change(function() { var min = 0, max = 255; var rgbColor = 'rgb('+(Math.floor(Math.random() * (max - min)) + min)+','+(Math.floor(Math.random() * (max - min)) + min)+','+(Math.floor(Math.random() * (max - min)) + min)+')'; $('#shade').val(rgbColor).css('border-color', rgbColor); }); }); #shade {border: 2px solid #000;}

Выберите цвет: Выбрать цвет... Красный Зелёный Жёлтый Синий Серый

Оттенок:

Как сделать, что бы генерировался оттенок?

Ответ

Нужно записывать кода всех оттенков нужных
$(function() { $('#color').change(function() { var self = this, // Создаём список цветов colorsModels = { 'red': {'r': '50-255', 'g': '0', 'b': '0'}, 'green': {'r': '0', 'g': '50-255', 'b': '0'}, 'yellow': {'r': '50-255', 'g': 'r', 'b': '0'}, 'blue': {'r': '0', 'g': '0', 'b': '50-255'}, 'grey': {'r': '50-200', 'g': 'r', 'b': 'r'} }; // Проверяем, существует ли цвет указанный в списке if( colorsModels[self.value] !== undefined ){ // Передаём массив цвета в переменную и создаём rgb var model = colorsModels[self.value], rgb = {r: null, g: null, b: null}; // Перебираем каждый цвет из массива for(var key in model){ if( /\d{1,3}\-\d{1,3}/.exec(model[key]) ){ // Проверяем, указано ли значение диапазоном // Вычисляем минимум и максимум с диапазона var min = parseFloat( model[key].replace(/(\d{1,3})\-\d{1,3}/, '$1') ), max = parseFloat( model[key].replace(/\d{1,3}\-(\d{1,3})/, '$1') ); // Вычисляем рандомное число в этом диапазоне var value = Math.floor(Math.random() * (max - min)) + min; // Применяем значение rgb[key] = value; }else if( /\d{1,3}/.exec(model[key]) ){ // Если цвет указан не диапазоном, то проверяем, цифра ли это // Преобразовываем значение в цифру var value = parseFloat( model[key] ); // Применяем значение rgb[key] = value; }else if( model[key] === 'r' || model[key] === 'g' || model[key] === 'b' ){ // Проверяем, ну казано ли значение повторяющим цветом (не равно ли значение пердыдущим цветам) // Проверяем, на допустимость повторения if( (key !== 'r' && key !== model[key]) || (model[key] === 'g' && key !== 'r') ){ // Если всё нормально, то копируем значение rgb[key] = rgb[model[key]]; }else{ console.error('Invalid!'); }; }else{ console.error('Undefined a value color!'); }; }; // Устанавливаем значение var rgbColor = 'rgb('+rgb['r']+','+rgb['g']+','+rgb['b']+')'; $('#shade').val(rgbColor).css('border-color', rgbColor); }else{ console.error('Undefined a color!'); }; }); }); #shade {border: 2px solid #000;}

Выберите цвет: Выбрать цвет... Красный Зелёный Жёлтый Синий Серый

Оттенок:

Как через css изменить цвет png изображения?

Есть png-иконки, например, из вк, синего цвета. Как с помощью css изменить его на белый? P.S: нагуглил про filter: hue-rotate(), но с белым цветом это походу не вариант.

Ответ

Вы можете использовать css-фильтры:
grayscale конвертирует цвета в ч/б sepia создает эффект сепии saturate задает насыщенность hue-rotate меняет цвета изображения в зависимости от заданного угла. Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение задается в градусах (0deg — 360deg) invert инвертирует цвета opacity задает прозрачность элемента brightness изменяет яркость изображения contrast изменяет контрастность изображения blur создает эффект размытости drop-shadow создает тень
Примечание: фильтры можно комбинировать между собой
.bg{ background-color: #8fbd35; padding: 20px; } .fl{ filter: invert(1); }

Материал для прочтения: habrahabr
Демо: демо

Как создавать контрастные по отношению друг к другу цвета?

В моем проекте есть возможность рисовать график по некоторым наборам данных. Их количество варьируется от 1 до... до тех пор, пока пользователю не надоест добавлять новые наборы данных.
Необходимо, чтобы на графике были хорошо различимы ВСЕ линии. Для этого, нужно чтобы все линии были более-менее контрастны по отношению к друг-другу, на сколько я понимаю.
Вопрос - как создавать эти контрастные цвета?

Ответ

По совету @Kromster'a воспользовался вот этим скриптом
for (int i = 0; i < 10; i++) colors[i] = HSV(0.1 * i, 0.5, 1.0);