Jump to content

build color palette with loops


jodunno

Recommended Posts

Hello everyone,

i use content security policy set at self for javascript and css. unsafe-inline is forbidden. However, i want to allow the background to be changed in tow ways: foto selection and color selection if photos are turned off. I have accomplished all of this but unsafe inline does not help my purpose. I need the color to be accessible via css file. Thus, input color cannot be used here unless i dynamically crete a css file based upon a selection. I don't want to do this, so i hardcoded the 216 colors into a css file which is only 6kb. perfect! now i need to loop through the color values to dynamically create the 216 color palette. I've never done this before so i had to think about it and try to recognize a pattern. I noticed that red is first follwed by green and blue. so green and blue should be together inside a red loop. I've tested my theory and it works. yipee. Now i want to know if there is a better method for accomplishing this task? i've tried searching google with no luck at all. i don't know what to search for other than 'build a 256 color palette using php loops'. I really find nothing of value. Amazing!

here is my code which is working. so can someone offer a more professional method?

<?php declare (strict_types = 1);
  $rgb = ['00','33','66','99','cc','ff'];
  $colors = 0;

  foreach ($rgb as $red) {
      foreach ($rgb as $green) {
          foreach ($rgb as $blue) {
              echo $red . $green . $blue . ', '; ++$colors;
          }
      } echo '<br><br>';
  } echo 'there are ' . $colors . ' colors in this palette';

exit;
?>

Thank you very much and i hope that you all have a fantastic day 🙂

Edited by jodunno
Link to comment
Share on other sites

Hi StevenOliver,

so you answer my question with a question. LOL. I know why i have a lenny face but i don't know why yours is missing :-) - just poking fun. hopefully you see it that way.

anyway, i'm quite happy with a hexidecimal arranged palette. I have no intentions of organizing it via hsv. I think that adding hsv is simple enough. I've added some quick code to illustrate my point:

<?php declare (strict_types = 1);
  $rgbhex = ['00','33','66','99','cc','ff']; $rgbdec = ['0','51','102','153','204','255'];
  $hexpalette = array(); $decpalette = array(); $palette = array(); $colors = 0;

  foreach ($rgbhex as $redhex) {
      foreach ($rgbhex as $greenhex) {
          foreach ($rgbhex as $bluehex) {
              $hexKey = $redhex . $greenhex . $bluehex;
              $decVal = hexdec($redhex) . ',' . hexdec($greenhex) .  ',' . hexdec($bluehex);
              array_push($hexpalette, $hexKey); array_push($decpalette, $decVal); ++$colors;
          }
      }
  } echo 'there are ' . $colors . ' colors in this palette';

echo '<br><br>';
$palette = array_combine($hexpalette, $decpalette); unset($hexpalette); unset($decpalette);
print_r($palette);

foreach ($palette as $rgbVal) {
  list($r,$g,$b) = explode(',',$rgbVal);
  $r = ($r / 255); $g = ($g / 255); $b = ($b / 255);
  $cMax = max($r, $g, $b); $cMin = min($r, $g, $b); $delta = $cMax - $cMin;
  $hsV = $cMax;
  //et cetera...
}
exit;
?>

one could just continue with the hsv conversion and saving it to a new hex key hsv value array for output to the screen. I think it should work. Anyway, i was just wondering if there is a mathematical way to represent the hex codes in a 6-6-6 fashion. so that maybe i could alter the code to support a 6-8-5 palette, which is also nice.

besides the wonder of an alternate method, i was hoping for a method easier than three loops. Meantime, i am not really interested in using php to dynamically create a css file with headers. I just want to allow members to change my default bg color if they dislike it. I recommend that members use my bg photos but i offer a setting to turn them off and use colors instead. I'm just trying to be thoughtful but not behave like a serf. Thus, grouping colors seems to servant like to your every whim. I'm just not interested in anything more than a palette structured by hex codes.

Best wishes to all and stay safe and healthy.

Link to comment
Share on other sites

Hello again,

i've decided to write an hsv converter using known formulas. i had to laugh because alot of proposed solutions are not correct. hsv is degrees percentage percentage and alot of code on the internet does not factor degrees for hue and the code is actually division by zero, which means the author is a mathematical idiot. i found a couple of examples actually implementing degrees. Anyway, i've tinkered with the code and i have it producing correct results as compared with the hsv values in my photoimpact 256color palette. it still isn't sorted by groups correctly. I'm not interested in solving the sorting problem when a world full of smarter people should be doing it.

Anyway, i'll see if i can produce a 6-6-6, 6-8-5 method and move on. colors do not need anymore of my time. a simple hex palette is all that i need. if i wanted to group the colors it would be a manual color group flag before a sort.

Have a great day.

Link to comment
Share on other sites

Hello again,

I've tinkered with my hsv sorting algorithm and i'm happy with the results. so i guess that i am able to group the colors afterall. I am not sure if the natsort is scientifically accurate or not but the final palette looks very nice. I've attached a png image of the final palette. Any additional comments?

Best wishes.

hsvnatsort.png

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.