Palettes • The Color Palette & Naming API Documentation

Gradient Stops API Endpoints

This API endpoint allows you to get gradients from an input color

If you appreciate our API and would like to support us, consider buying our book. It's a great way to deepen your understanding while helping us continue providing quality services. You can find the book at our book page. Your support is greatly appreciated!

GET/api/v1/gradient-stops

Making A Request

Name
color
Type
string
Description
A color to be used for the base of the color scheme.
Name
count
Type
number
Description
The amount of colors to be used in the gradient

Read how these params work

Making a request

GET

/api/v1/gradient-stops

curl "https://palettespro.com/api/v1/gradient-stops?color=<INPUT_COLOR>&count=<NUMBER_OF_COLORS_IN_GRADIENT>"

Example Response

{
  "to_light": [
    {
      "opacity": "20%",
      "hex": "#e2edfd"
    },
    {
      "opacity": "40%",
      "hex": "#c5dafc"
    },
    {
      "opacity": "60%",
      "hex": "#a8c8fa"
    },
    {
      "opacity": "80%",
      "hex": "#8bb5f9"
    },
    {
      "opacity": "100%",
      "hex": "#6ea3f7"
    }
  ],
  "to_dark": [
    {
      "opacity": "0%",
      "hex": "#6ea3f7"
    },
    {
      "opacity": "20%",
      "hex": "#5882c6"
    },
    {
      "opacity": "40%",
      "hex": "#426294"
    },
    {
      "opacity": "60%",
      "hex": "#2c4163"
    },
    {
      "opacity": "80%",
      "hex": "#162131"
    }
  ],
  "from_light_to_dark": [
    {
      "opacity": "0%",
      "hex": "#ffffff"
    },
    {
      "opacity": "50%",
      "hex": "#b7d1fb"
    },
    {
      "opacity": "100%",
      "hex": "#6ea3f7"
    },
    {
      "opacity": "0%",
      "hex": "#6ea3f7"
    },
    {
      "opacity": "50%",
      "hex": "#37527c"
    },
    {
      "opacity": "100%",
      "hex": "#000000"
    }
  ],
  "gradient": [
    {
      "hex": "#9ec2fa",
      "isParam": false
    },
    {
      "hex": "#6ea3f7",
      "isParam": true
    },
    {
      "hex": "#0b51c1",
      "isParam": false
    },
    {
      "hex": "#052961",
      "isParam": false
    },
    {
      "hex": "#000000",
      "isParam": false
    }
  ]
}

Example Error Response

{
  "error": "Invalid color HEX code."
}

Gradient Stops Demo

Count