Color Palette

Generate harmonious color palettes from images with color relationships and ready-to-use CSS variables.

Request Parameters

Response

Returns a JSON object containing a harmonious color palette derived from the image, along with color relationships and CSS code.

Example Request

    // example.sh
curl -X POST "https://oyyi.xyz/api/image/color-palette"   -H "accept: application/json" \
  -H "Content-Type: multipart/form-data" \
  -F "file=@image.jpg" \
  -F "num_colors=5" \
  -F "palette_type=vibrant"
  

Example with Python

    // get_color_palette.py
import requests
import json

url = "https://oyyi.xyz/api/image/color-palette"

files = {
    'file': open('image.jpg', 'rb')
}

data = {
    'num_colors': 5,
    'palette_type': 'vibrant'
}

response = requests.post(url, files=files, data=data)

# Parse the JSON response
palette = response.json()
print(json.dumps(palette, indent=2))
  

Example with JavaScript

    // get_color_palette.js
// Using fetch API
const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('num_colors', '5');
formData.append('palette_type', 'vibrant');

fetch('https://oyyi.xyz/api/image/color-palette', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(palette => {
  console.log(palette);
  // Display or process the color palette
})
.catch(error => console.error('Error:', error));
  

Example Response

    // response.json
{
  "palette": [
    {
      "hex": "#2C8ECB",
      "rgb": [44, 142, 203],
      "hsl": [204, 64, 48],
      "name": "Blue",
      "role": "primary"
    },
    {
      "hex": "#E74C3C",
      "rgb": [231, 76, 60],
      "hsl": [6, 78, 57],
      "name": "Red",
      "role": "accent"
    },
    {
      "hex": "#27AE60",
      "rgb": [39, 174, 96],
      "hsl": [145, 63, 42],
      "name": "Green",
      "role": "secondary"
    },
    {
      "hex": "#F5F5F5",
      "rgb": [245, 245, 245],
      "hsl": [0, 0, 96],
      "name": "White",
      "role": "background"
    },
    {
      "hex": "#3A3A3A",
      "rgb": [58, 58, 58],
      "hsl": [0, 0, 23],
      "name": "Dark Gray",
      "role": "text"
    }
  ],
  "palette_type": "vibrant",
  "color_relationships": {
    "complementary": "#CB692C",
    "triadic": ["#2CCB69", "#692CCB"],
    "analogous": ["#2C69CB", "#2CCBAE"],
    "monochromatic": ["#1A5478", "#3EAAF0"]
  },
  "css": {
    "variables": "--primary-color: #2C8ECB;
--accent-color: #E74C3C;
--secondary-color: #27AE60;
--background-color: #F5F5F5;
--text-color: #3A3A3A;",
    "tailwind": "{ primary: '#2C8ECB', accent: '#E74C3C', secondary: '#27AE60', background: '#F5F5F5', text: '#3A3A3A' }"
  }
}
  

Palette Types

Response Structure

How It Works

The color-palette endpoint goes beyond simple color extraction to create harmonious, design-ready color palettes:

1. Color Extraction: The image is analyzed to extract its dominant colors, similar to the dominant-color endpoint.
2. Color Refinement: The extracted colors are refined based on the selected palette type, adjusting saturation, brightness, and other properties.
3. Color Harmony: The colors are analyzed for harmony and adjusted to create a cohesive palette.
4. Role Assignment: Each color is assigned a suggested role in a design system (primary, accent, background, etc.).
5. Relationship Calculation: Color relationships are calculated based on color theory principles.
6. CSS Generation: Ready-to-use CSS variables and Tailwind configuration are generated from the palette.

The result is a design-ready color palette that maintains the essence of the original image while ensuring color harmony and usability.

Color Spaces

Error Responses

Notes

• Unlike the dominant-color endpoint, which focuses on extracting existing colors, this endpoint creates a harmonious palette that may adjust colors for better design compatibility.
• The color roles (primary, accent, etc.) are suggestions based on color theory and common design practices.
• The LAB color space (default) typically produces the most harmonious palettes but may result in slight adjustments to the original image colors.
• For the most accurate representation of the image's actual colors, use the dominant-color endpoint instead.
• The maximum file size allowed is 20MB.
• The CSS variables and Tailwind configuration can be directly used in web projects.

Use Cases

• Creating design systems based on brand imagery
• Generating website color schemes from logo or hero images
• Developing app themes that match product photography
• Creating harmonious color palettes for marketing materials
• Extracting seasonal color themes from trend imagery
• Generating CSS variables for web development
• Creating Tailwind theme configurations
• Finding complementary colors for design accents