Blending Colors

Blend two or more colors seamlessly, simulating paint mixing.

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/blend-colors

Making A Request

Name
colors
Type
string[]
Description
An array of colors to blend together. Must be at least 2 colors.
Name
formats
Type
string || string[]
Description
The formats to return the blended color in. Defaults to hex, rgb, and hsl.

Read how these params work

Example Request

GET

/api/v1/blend

curl "https://palettespro.com/api/v1/blend-colors?color=<HEX_ONE>&color=<HEX_TWO>&color=<HEX_THREE>"

Example Response

{
  "blendedColor": "#804080"
}

Example Error Response

{
  "error": "Please provide at least 2 colors."
}

Blending Colors Demo

Debounced React Hook Demo

You can use this hook to prevent overwhelming the API with requests from a client-side application. This will help prevent rate limiting and ensure the best performance for all users.

Debounced request example.

GET

/api/v1/blend-colors

'use client'
import React, { useEffect, useState } from 'react'
import { useDebounce } from 'use-debounce'

type hsl = {
  h: number
  s: number
  l: number
}

type hex = {
  hex: string
}
export type Color = hsl & hex

export function useBlendColors(color1: Color, color2: Color) {
  const [output, setOutput] = useState<Color | null>(null)

  // Debounce both color values
  const [debouncedColor1] = useDebounce(color1, 100)
  const [debouncedColor2] = useDebounce(color2, 100)

  useEffect(() => {
    const fetchBlended = async () => {
      try {
        const url = `https://palettespro.com/api/v1/blend-colors?color=${encodeURIComponent(
          debouncedColor1.hex,
        )}&color=${encodeURIComponent(debouncedColor2.hex)}`

        const request = await fetch(url)
        const response = await request.json()
        const blended_hex = response.blendedColor
        const hsl = hexToHsl({ hex: blended_hex })

        setOutput({
          ...hsl,
          hex: sanitizeHex(blended_hex),
        })
      } catch (error) {
        console.error('Error blending colors:', error)
        // You might want to set an error state here
      }
    }

    if (debouncedColor1?.hex && debouncedColor2?.hex) {
      fetchBlended()
    }
  }, [debouncedColor1, debouncedColor2])

  return output
}