# Function to extract colors from coolors.co

**URL:** <https://discourse.processing.org/t/function-to-extract-colors-from-coolors-co/28986>\
**Category:** Coding Questions\
**Created:** [March 30, 2021, 3:31pm UTC](https://discourse.processing.org/t/function-to-extract-colors-from-coolors-co/28986 "2021-03-30T15:31:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![thesandrobrito](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thesandrobrito/32/12634_2.png) [@thesandrobrito](https://discourse.processing.org/u/thesandrobrito)\
**Post date:** [March 30, 2021, 3:31pm UTC](https://discourse.processing.org/t/function-to-extract-colors-from-coolors-co/28986/1 "2021-03-30T15:31:35Z")

</div>

Hi everyone.  
I was trying to come up with a function to extract colours from the URL from [coolors.com](http://coolors.com) to easily change colour pallets. This is an idea I’ve seen done for P5 projects, but I’d like it for Processing.

For some reason, I am able to get the colours and apply them to the background, but not to any object.  
Anyone know why that might be?

```auto
String colors = "https://coolors.co/fec5bb-fcd5ce-fae1dd-f8edeb-e8e8e4-d8e2dc-ece4db-ffe5d9-ffd7ba-fec89a";

color[] pal;
color pallete;

void setup() {
  size(800, 800);
  smooth();
  pal = createPallete(colors);
}
void draw() {
  pallete = pal[int(random(pal.length))];
  background(pallete);
  pallete = pal[int(random(pal.length))];
  fill(pallete);
  ellipse(width/2, height/2, 400, 400);
  noLoop();
}

color[] createPallete(String colors) {
  String[] clrs = splitTokens(colors, "/");
  String[] c = splitTokens(clrs[2], "-");
  //String[] a = new String[c.length];
  color[] col = new color[c.length];

  for (int i = 0; i < c.length; i++) {
    //println(c[i]);
    //a[i] = "#"+c[i];
    col[i] = unhex(c[i]);
  }
  return col;
}
void mousePressed() {
  clear();
  redraw();
}

```

---

<div class="post-metadata">

**Author:** ![micycle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micycle/32/201_2.png) [@micycle](https://discourse.processing.org/u/micycle)\
**Post date:** [March 30, 2021, 5:02pm UTC](https://discourse.processing.org/t/function-to-extract-colors-from-coolors-co/28986/2 "2021-03-30T17:02:09Z")

</div>

Processing **usually** expects integer representations of RGB colour to be negative; colours are effectively created and treated like this:  
`col = -16777216 + (red << 16 | green << 8 | blue)`

`println(color(0)); // -16777216`

However, `background()` seems to accept positive colour integers whereas `fill()` (like most other methods) doesn’t.

In fact, `fill(n)` with n \> 255 doesn’t produce any fill!

**Solution** is to convert the pallete colour int into Processing-compatible int.

`fill(-(2<<24)+pallete);`

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c1e08d27fa7d79f6cffaa1d0d305547873c3ddbe.png)

---

<div class="post-metadata">

**Author:** ![thesandrobrito](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thesandrobrito/32/12634_2.png) [@thesandrobrito](https://discourse.processing.org/u/thesandrobrito)\
**Post date:** [March 30, 2021, 5:37pm UTC](https://discourse.processing.org/t/function-to-extract-colors-from-coolors-co/28986/3 "2021-03-30T17:37:56Z")

</div>

Thank you! I’ve managed to solve it based on your explanation. This is great

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 31, 2021, 1:41am UTC](https://discourse.processing.org/t/function-to-extract-colors-from-coolors-co/28986/4 "2021-03-31T01:41:18Z")

</div>

@thesandrobrito,

This will do the trick in your code:  
`col[i] = unhex("FF" + c[i]);`

See references:  
_[color / Reference / Processing.org](https://processing.org/reference/color_datatype.html)_  
[Color / Processing.org](https://processing.org/tutorials/color/)  
[Color Gradients in Processing (v 2.0) | by Jeremy Behreandt | Medium](https://behreajj.medium.com/color-gradients-in-processing-v-2-0-e5c0b87cdfd2)  
And there are others…

You want the alpha to be _0xFF_ for 100% opaque after conversion instead of 0% opaque.

@micycle ,

> [@micycle](#):
>
> **Solution** is to convert the pallete colour int into Processing-compatible int.
> 
> `fill(-(2<<24)+pallete);`

That should be:  
`fill(-(1<<24)+pallete);`

Which is the same as:  
`fill(0xFF<<24)+pallete);`  
or  
`fill(0xFF000000+pallete);`

`:)`