Pokéball 1
Pokéball 2
Pokéball 3
Pokéball 4
Pokéball 5

Palette Town API

Access Pokémon color palettes for your projects

Endpoints

GET /api/pokemon/:id

Get a Pokémon with its color palette

Example: /api/pokemon/25

GET /api/colors/:id

Get detailed color formats for a Pokémon

Example: /api/colors/25

GET /api/colors

Get all Pokémon type colors

Example: /api/colors

Response Example

Select an endpoint to see example response

Usage Examples

Fetch with JavaScript

// Get Pikachu's colors
fetch('/api/pokemon/25')
  .then(response => response.json())
  .then(data => {
    // Use the color data
    document.body.style.backgroundColor = data.colors.primary;
    document.body.style.color = data.colors.text;
    console.log(data);
  });

Use in CSS

/* Add this to your CSS */
.pikachu-theme {
  --primary-color: #F8D030;
  --secondary-color: #A1871F;
  --text-color: #000000;
  
  background-color: var(--primary-color);
  color: var(--text-color);
}

.pikachu-theme .accent {
  background-color: var(--secondary-color);
}

React Component Example

import { useState, useEffect } from 'react';

function PokemonTheme({ pokemonId, children }) {
  const [colors, setColors] = useState(null);
  
  useEffect(() => {
    fetch(`/api/colors/${pokemonId}`)
      .then(res => res.json())
      .then(data => setColors(data))
      .catch(err => console.error('Failed to load colors:', err));
  }, [pokemonId]);
  
  if (!colors) return <div>Loading theme...</div>;
  
  return (
    <div style={{ 
      backgroundColor: colors.primary.hex,
      color: colors.text.hex,
      padding: '20px',
      borderRadius: '8px',
      boxShadow: `0 4px 6px ${colors.secondary.rgba.replace('1)', '0.3)')}`
    }}>
      {children}
    </div>
  );
}