AI Palette - Color Palette Generator

Installation

Get started by installing the package using your preferred package manager:

npm install ai-palette
# or
yarn add ai-palette

Basic Usage

Import and use the component in your React application:

import { AIPalette, PaletteProvider } from 'ai-palette';

// Basic usage without AI
function App() {
  return (
    <AIPalette
      keyword="sunset"
      count={5}
      format="hex"
      type="complementary"
      mode="basic"
    />
  );
}

// With AI-powered suggestions
function AppWithAI() {
  return (
    <PaletteProvider config={{ apiKey: "your_openai_api_key" }}>
      <AIPalette
        keyword="sunset"
        count={5}
        format="hex"
        type="complementary"
        mode="ai"
      />
    </PaletteProvider>
  );
}

Props

AIPalette Component

Prop	Type	Default	Description
keyword	string	-	The theme or concept for generating colors
count	number	5	Number of colors to generate (2-10)
format	'hex' \| 'rgb' \| 'hsl'	'hex'	Color format to output
type	ColorHarmony	'default'	Color harmony type
mode	'ai' \| 'basic'	'basic'	Generation mode

PaletteProvider Props

Prop	Type	Description
config	{ apiKey?: string }	Configuration object for AI mode

Examples

Basic Mode Example

<AIPalette
  keyword="ocean"
  count={5}
  format="hex"
  type="analogous"
  mode="basic"
  onGenerate={(palette) => console.log("Generated palette:", palette)}
/>

AI Mode Example

<PaletteProvider config={{ apiKey: "your_openai_api_key" }}>
  <AIPalette
    keyword="sunset"
    count={5}
    format="rgb"
    type="complementary"
    mode="ai"
    onGenerate={(palette) => console.log("Generated palette:", palette)}
    onError={(error) => console.error("Error:", error)}
  />
</PaletteProvider>

Image-based Generation

<AIPalette
  image={imageFile}
  count={5}
  format="hsl"
  onGenerate={(palette) => console.log("Generated from image:", palette)}
/>

Ready to try it out?

Check out our interactive demo to see AI Palette in action

Try the Demo

Styling

You can customize the AIPalette component using CSS. The component uses the following CSS class structure:

/* In your globals.css or any CSS file */
.ai-palette {
  /* Main container styles */
  
  .controls {
    /* Control buttons container */
    
    button {
      /* Generate and Upload Image buttons */
    }
  }

  .loading {
    /* Loading message */
  }

  .error {
    /* Error message */
  }

  .palette {
    /* Color palette container */
    
    .color-item {
      /* Individual color item */
    }
  }
}

Example customization:

.ai-palette {
  .controls button {
    background: #4f46e5;
    border-radius: 8px;
    padding: 12px 24px;
    color: white;
    font-weight: 500;
    transition: all 0.2s;
  }

  .controls button:hover {
    background: #4338ca;
    transform: translateY(-2px);
  }

  .palette .color-item {
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  }
}

If you're using Tailwind CSS, you can use the @apply directive with the !important flag:

.ai-palette {
  .controls button {
    @apply bg-indigo-600 rounded-lg px-6 py-3 text-white font-medium 
           transition-all hover:bg-indigo-700 hover:-translate-y-0.5 !important;
  }
}

Documentation