Palette

The palette parameter extracts a palette of color values from an image and returns them in the specified format. Palette extraction occurs after image processing, so applying any adjustments and cropping will change the color palette response.

Valid values are css and json.


Try it

Click an image below to fetch its palette and see the dominant colors extracted from the image.



palette=css

The response is a CSS file with text/css MIME type. Each color has a “foreground” class (color) and a “background” class (background-color). The CSS also includes white and black for building color swatch UIs.

prefix is an optional parameter that sets the prefix of the generated CSS class names. If omitted, classes use the default prefix image (e.g. .image-fg-1, .image-bg-1). With prefix:tropper, you get .tropper-fg-1, .tropper-bg-1, and so on.

https://img.imageboss.me boss-images /width/300/palette:css,prefix:tropper/examples/02.jpg

Example: use as a stylesheet

<link
  rel="stylesheet"
  href="https://img.imageboss.me/boss-images/width/300/palette:css,prefix:tropper/examples/02.jpg"
/>

Example output (excerpt, default prefix image):

.image-fg-1 { color: #ffd807 !important; }
.image-bg-1 { background-color: #ffd807 !important; }
.image-fg-2 { color: #6dca9a !important; }
.image-bg-2 { background-color: #6dca9a !important; }
/* ... plus .image-fg-ex-1 / .image-bg-ex-1 (white), .image-bg-ex-2 (black),
   and dominant: .image-fg-vibrant, .image-bg-muted, etc. */

With prefix:tropper, the same output uses .tropper-fg-1, .tropper-bg-1, .tropper-fg-vibrant, and so on.


palette=json

The response is a JSON object with average_luminance, colors (array of red, green, blue, hex), and dominant_colors (e.g. vibrant, vibrant_light, vibrant_dark, muted, muted_light, muted_dark).

https://img.imageboss.me boss-images /width/300/palette:json/examples/02.jpg

Example response

{
  "average_luminance": 0.48,
  "colors": [
    { "red": 0.25, "green": 0.75, "blue": 0.75, "hex": "#3fbfbf" },
    ...
  ],
  "dominant_colors": {
    "vibrant": { "hex": "#3fbfbf", ... },
    "vibrant_light": { ... },
    "vibrant_dark": { ... },
    "muted": { ... },
    "muted_light": { ... },
    "muted_dark": { ... }
  }
}