Color Name API

This API endpoint allows you to get the name of a color based on its hex code.

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!

Please debounce your requests to the API if they're coming from a client-side application. This will help prevent rate limiting and ensure the best performance for all users. libraries like lodash or use-debounce can help you with this.

GET/api/v1/color-name

Making A Request

Making a request

GET
/api/v1/color-name
curl "https://palettespro.com/api/v1/color-name?color=<HEX_CODE>"

Example Response

{
"name": "Sky Blue",
"hex": "#87CEEB",
"rgb": [135, 206, 235],
"closest_color": {
    "hex": "#87CEEB",
    "label": "Sky Blue"
  }
}

Example Error Response

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

Color Name Demo

Debounced Color Name Request Demo

If you're using React, here's a hook that can help you debounce your requests to the API:

Debounced request example.

GET
/api/v1/color-name
import { 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 default function useColorData(hex: string) {
  const [colorData, setColorData] = useState<null | {
    name: string
    hex: string
    rgb: { r: number; g: number; b: number }
    closest_color: { hex: string; label: string }
  }>({
    name: 'Vanilla Cream',
    hex: '##F8D9AF',
    rgb: {
      r: 248,
      g: 214,
      b: 175,
    },
    closest_color: {
      hex: '#F8D9AF',
      label: 'Vanilla Cream',
    },
  })

  // Debounce the hex value with a 300ms delay
  const [debouncedHex] = useDebounce(hex, 300)
  useEffect(() => {
    const fetchedColor = async () => {
      try {
        const request = await fetch(
          `https://palettespro.com/api/v1/color-name?color=${debouncedHex}`,
        )
        const response = await request.json()
        console.log(response)
        setColorData(response)
      } catch (error) {
        console.log(error) 
      }
    }
    fetchedColor()
  }, [debouncedHex]) // Use debouncedHex instead of hex in the dependency array

  return colorData
}

Future Improvements

Was this page helpful?