Так как вы упомянули, что у вас есть постоянный фон, цвет шаров может быть случайным, но они должны падать на определенных диапазонах, которые по-прежнему дополняют фон.
Основы. Прежде чем мы это сделаем, вам нужно знать основы. Рассмотрим следующие цвета:
Black #000000 rgb(0,0,0)
Red #FF0000 rgb(255,0,0)
Green #00FF00 rgb(0,255,0)
Blue #0000FF rgb(0,0,255)
Yellow #FFFF00 rgb(255,255,0)
Cyan #00FFFF rgb(0,255,255)
Pink #FF00FF rgb(255,0,255)
Gray #C0C0C0 rgb(192,192,192)
White #FFFFFF rgb(255,255,255)
Смесь цветов RGB [(0..255), (0..255), (0..255)] создает новые цвета, как указано выше.
Вычисление отрицательных цветов Вычисление отрицательных цветов аналогично преобразованию красного в голубой, зеленого в фиолетовый и синего в желтый.
Red #FF0000 rgb(255,0,0) -> Cyan #00FFFF rgb(0,255,255)
Green #00FF00 rgb(0,255,0) -> Purple #FF00FF rgb(255,0,255)
Blue #0000FF rgb(0,0,255) -> Yellow #FFFF00 rgb(255,255,0)
Дополнительный цвет
В соответствии со ссылкой на вычисление дополнительных цветов: http://serennu.com/colour/rgbtohsl.php
О HSL
HSL выражает цвета с точки зрения их оттенка, насыщенности и яркости, давая число для каждого из этих трех атрибутов цвета.
Оттенок - это позиция цвета на цветовом круге, выраженная в градусах от 0 ° до 359 °, представляющая 360 ° колеса; 0 ° - красный, 180 ° - красный, противоположный голубой, и так далее.
Насыщенность - это интенсивность цвета, насколько он тусклый или яркий. Чем ниже насыщенность, тем более тусклый (серый) цвет выглядит. Это выражается в процентах, 100% - полное насыщение, самый яркий и 0% - отсутствие насыщенности, серый.
Легкость - это то, насколько светлый цвет. Немного отличается от насыщенности. Чем больше белого цвета, тем выше его значение Легкости, чем больше черного, тем ниже его Легкость. Таким образом, 100% Lightness превращает цвет в белый, 0% Lightness превращает цвет в черный, и «чистый» цвет будет 50% Lightness.
Легче увидеть разницу между Насыщенностью и Легкостью, чем объяснить это. Если вы хотите прояснить ситуацию, попробуйте просмотреть варианты «Яркость» и «Насыщенность» на странице калькулятора цвета, выбрав в качестве начального цвета довольно яркий цвет.
Таким образом, запись HSL выглядит следующим образом, давая значения Hue, Saturation и Lightness в следующем порядке: t
Красный: 0 ° 100% 50% Бледно-розовый: 0 ° 100% 90% Голубой: 180 ° 100% 50% Вот шаги:
Преобразуйте ваш цвет в HSL.
Измените значение оттенка на противоположное значение оттенка (например, если ваш оттенок равен 50 °, противоположный будет под углом 230 ° на колесе - на 180 ° дальше вокруг).
Оставьте значения насыщенности и легкости такими, какими они были.
Преобразуйте это новое значение HSL обратно в исходное обозначение цвета (RGB или что-то еще).
Такие сайты, как EasyRGB.com, могут сделать для вас общее преобразование из RGB в HSL или наоборот.
Пример программирования сделан на PHP по ссылке
Преобразование из RGB в HSL
Значение выше синего цвета # 0000FF rgb (0,0,255) может быть представлено как красный шестнадцатеричный 00 + зеленый шестнадцатеричный 00 + синий шестнадцатеричный FF
$redhex = substr($hexcode,0,2);
$greenhex = substr($hexcode,2,2);
$bluehex = substr($hexcode,4,2);
Он также может быть представлен как красное десятичное число 0 + зеленое десятичное число 0 + голубое десятичное число 255
$var_r = (hexdec($redhex)) / 255;
$var_g = (hexdec($greenhex)) / 255;
$var_b = (hexdec($bluehex)) / 255;
Теперь вставьте эти значения в процедуру rgb2hsl. Ниже приведена моя PHP-версия универсального кода EasyRGB.com для этого преобразования:
Входные данные - $ var_r, $ var_g и $ var_b сверху. Выходные данные - эквивалент HSL как $ h, $ s и $ l - они снова выражаются в виде долей 1, как и входные значения
$var_min = min($var_r,$var_g,$var_b);ttt
$var_max = max($var_r,$var_g,$var_b);
$del_max = $var_max - $var_min;
$l = ($var_max + $var_min) / 2;
if ($del_max == 0)
{
$h = 0;
$s = 0;
}
else
{
if ($l < 0.5)
{
$s = $del_max / ($var_max + $var_min);
}
else
{
$s = $del_max / (2 - $var_max - $var_min);
};
$del_r = ((($var_max - $var_r) / 6) + ($del_max / 2)) / $del_max;
$del_g = ((($var_max - $var_g) / 6) + ($del_max / 2)) / $del_max;
$del_b = ((($var_max - $var_b) / 6) + ($del_max / 2)) / $del_max;
if ($var_r == $var_max)
{
$h = $del_b - $del_g;
}
elseif ($var_g == $var_max)
{
$h = (1 / 3) + $del_r - $del_b;
}
elseif ($var_b == $var_max)
{
$h = (2 / 3) + $del_g - $del_r;
};
if ($h < 0)
{
$h += 1;
};
if ($h > 1)
{
$h -= 1;
};
};
Итак, теперь у нас есть цвет как значение HSL в переменных $ h, $ s и $ l. Эти три выходные переменные на данном этапе снова представлены как доли от 1, а не как градусы и проценты. Так, например, голубой (180 ° 100% 50%) будет выглядеть как $ h = 0,5, $ s = 1 и $ l = 0,5.
Затем найдите значение противоположного оттенка, то есть того, который находится на расстоянии 180 ° или 0,5 (я уверен, у математиков есть более элегантный способ обозначить это, но):
Рассчитайте противоположный оттенок, $ h2
$h2 = $h + 0.5;
if ($h2 > 1)
{
$h2 -= 1;
};
Значение HSL дополнительного цвета теперь составляет $ h2, $ s, $ l. Итак, мы готовы преобразовать это обратно в RGB (снова моя PHP-версия формулы EasyRGB.com). Обратите внимание, что форматы ввода и вывода на этот раз отличаются, см. Мои комментарии в верхней части кода:
Входные данные - это значение HSL дополнительного цвета, хранящееся в $ h2, $ s, $ l в виде дробей 1 Выходные данные - это RGB в обычном формате 255 255 255, хранящиеся в $ r, $ g, $ b. Оттенок преобразуется с использованием функции hue_2_rgb, показанной в конце этого кода
if ($s == 0)
{
$r = $l * 255;
$g = $l * 255;
$b = $l * 255;
}
else
{
if ($l < 0.5)
{
$var_2 = $l * (1 + $s);
}
elset
{
$var_2 = ($l + $s) - ($s * $l);
};
$var_1 = 2 * $l - $var_2;
$r = 255 * hue_2_rgb($var_1,$var_2,$h2 + (1 / 3));
$g = 255 * hue_2_rgb($var_1,$var_2,$h2);
$b = 255 * hue_2_rgb($var_1,$var_2,$h2 - (1 / 3));
};
// Function to convert hue to RGB, called from above
function hue_2_rgb($v1,$v2,$vh)
{
if ($vh < 0)
{
$vh += 1;
};
if ($vh > 1)
{
$vh -= 1;
};
if ((6 * $vh) < 1)
{
return ($v1 + ($v2 - $v1) * 6 * $vh);
};
if ((2 * $vh) < 1)
{
return ($v2);
};
if ((3 * $vh) < 2)
{
return ($v1 + ($v2 - $v1) * ((2 / 3 - $vh) * 6));
};
return ($v1);
};
И после этой процедуры у нас наконец-то есть $ r, $ g и $ b в формате 255 255 255 (RGB), которые мы можем преобразовать в шесть цифр шестнадцатеричного числа:
$rhex = sprintf("%02X",round($r));
$ghex = sprintf("%02X",round($g));
$bhex = sprintf("%02X",round($b));
$rgbhex = $rhex.$ghex.$bhex;
$ rgbhex - это наш ответ - дополнительный цвет в гексе.
Так как ваш цвет фона синий или 0,0255, HSL
Оттенок (H): 240 градусов / Насыщенность (S): 100% / Легкость (L): 4,9%
противоположность 240 - 60 по кругу, затем преобразование обратно в RGB дает значение # 181800