UI
Create Saved Browse
API

Create color scales with the UI Colors API. Simply input a hexcode, and the API will return a full color scale ranging from shade 50 to 950 in both hexcode and HSL formats.

You may not use this API to create a competing application, plugin, or browser extension whose primary purpose is to generate color scales.
Read the full Terms of Use.
Example
POST https://uicolors.app/api/v1/color-scales/tailwindcss3/generate/f49d0c

x-api-key: YOUR_API_KEY
Response 
{
    "name": "Orange Peel",
    "shades": [
        {
            "name": "50",
            "hexcode": "#fffbeb",
            "hsl": {
                "hue": 48,
                "saturation": 100,
                "lightness": 96
            }
        },
        {
            "name": "100",
            "hexcode": "#fef3c7",
            "hsl": {
                "hue": 48,
                "saturation": 96,
                "lightness": 89
            }
        },
        {
            "name": "200",
            "hexcode": "#fde58a",
            "hsl": {
                "hue": 47,
                "saturation": 97,
                "lightness": 77
            }
        },
        {
            "name": "300",
            "hexcode": "#fbd24e",
            "hsl": {
                "hue": 46,
                "saturation": 96,
                "lightness": 65
            }
        },
        {
            "name": "400",
            "hexcode": "#fabe25",
            "hsl": {
                "hue": 43,
                "saturation": 96,
                "lightness": 56
            }
        },
        {
            "name": "500",
            "hexcode": "#f49d0c",
            "hsl": {
                "hue": 37,
                "saturation": 91,
                "lightness": 50
            }
        },
        {
            "name": "600",
            "hexcode": "#d87607",
            "hsl": {
                "hue": 32,
                "saturation": 94,
                "lightness": 44
            }
        },
        {
            "name": "700",
            "hexcode": "#bc560a",
            "hsl": {
                "hue": 26,
                "saturation": 90,
                "lightness": 39
            }
        },
        {
            "name": "800",
            "hexcode": "#923f0e",
            "hsl": {
                "hue": 22,
                "saturation": 83,
                "lightness": 31
            }
        },
        {
            "name": "900",
            "hexcode": "#78340f",
            "hsl": {
                "hue": 21,
                "saturation": 78,
                "lightness": 26
            }
        },
        {
            "name": "950",
            "hexcode": "#451a03",
            "hsl": {
                "hue": 21,
                "saturation": 92,
                "lightness": 14
            }
        }
    ]
}