colorgenn

A lightweight utility library for generating hex color codes, featuring both random color generation and AI-powered color extraction from natural language using Google's Gemini AI.

Features

• 🎲 Random Generation - Create completely random hex color codes
• 🤖 AI-Powered Colors - Convert natural language descriptions into matching hex codes
• 🧩 TypeScript Support - Full TypeScript definitions included
• ⚡ Zero Dependencies - Minimal footprint (except for optional Gemini integration)
• 🚀 Simple API - Easy to integrate with any JavaScript/TypeScript project

Installation

# Using npm
npm install colorgenn

# Using yarn
yarn add colorgenn

# Using pnpm
pnpm add colorgenn

Usage

Generate Random Hex Colors

Generate completely random hex color codes with a single function call:

import { randomHexColor } from "colorgenn";

const color = randomHexColor();
console.log(color); // Example output: "#a1f2cc"

Get AI-Generated Colors from Natural Language

Convert natural language descriptions into relevant hex color codes using Gemini AI:

import { getColorFromPrompt } from "colorgenn";

// Async function to get a color from a description
async function generateColor() {
  const color = await getColorFromPrompt("a vibrant sunset orange with hints of red");
  console.log(color); // Example output: "#ff7842"
}

generateColor();

Gemini AI Integration

To use the natural language color generation feature, you'll need a Gemini API key:

1. Create an account at Google AI Studio
2. Generate an API key
3. Configure your environment:

# .env file
VITE_API_KEY=your_gemini_api_key_here

For other frameworks, use the appropriate environment variable format (e.g., REACT_APP_API_KEY for Create React App).

React Integration Example

Here's how to integrate with a React application:

import { useState, useEffect } from "react";
import { getColorFromPrompt } from "colorgenn";

function ColoredBackground() {
  const [color, setColor] = useState("#ffffff");
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    async function fetchColor() {
      setIsLoading(true);
      try {
        const newColor = await getColorFromPrompt("a calming blue for a meditation app");
        setColor(newColor);
      } catch (error) {
        console.error("Failed to fetch color:", error);
      } finally {
        setIsLoading(false);
      }
    }
    
    fetchColor();
  }, []);

  return (
    <div 
      className="w-full min-h-screen flex items-center justify-center text-white text-2xl transition-colors duration-500"
      style={{ backgroundColor: color }}
    >
      {isLoading ? "Loading color..." : `Current color: ${color}`}
    </div>
  );
}

export default ColoredBackground;

API Reference

randomHexColor()

Generates a random hex color code.

• Returns: string - A hex color code (e.g., "#a1f2cc")

getColorFromPrompt(prompt: string)

Generates a hex color code from a natural language description using Gemini AI.

• Parameters:
  • prompt (string): A natural language description of the color
• Returns: Promise<string> - A hex color code matching the description
• Requires: Valid Gemini API key set in environment variables

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Built with TypeScript
• AI colors powered by Google's Gemini AI

Made with ❤️ by Jeet