ColorPaletteGenerator

colorpalettegenerator-1779388706021.tsx

'use client';
import { useState } from 'react';

export default function ColorPaletteGenerator() {
  const generatePalette = (baseHue) => {
    return [10, 25, 40, 55, 70, 85, 95].map(l => {
      const s = 70 - Math.abs(l - 55);
      return `hsl(${baseHue}, ${s}%, ${l}%)`;
    });
  };

  const [hue, setHue] = useState(45);
  const [palette, setPalette] = useState(generatePalette(45));
  const [copied, setCopied] = useState(null);

  const regenerate = () => {
    const newHue = Math.floor(Math.random() * 360);
    setHue(newHue);
    setPalette(generatePalette(newHue));
  };

  const copyColor = (color, i) => {
    navigator.clipboard?.writeText(color);
    setCopied(i);
    setTimeout(() => setCopied(null), 1500);
  };

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '420px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
        <h3 style={{ color: '#F5F5F0', margin: 0, fontSize: '15px', fontWeight: 700 }}>Palette Generator</h3>
        <button onClick={regenerate} style={{
          background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)',
          borderRadius: '8px', padding: '6px 14px', color: '#C9A84C', fontSize: '13px', cursor: 'pointer',
        }}>↻ Regenerate</button>
      </div>
      <div style={{ display: 'flex', borderRadius: '12px', overflow: 'hidden', height: '80px', marginBottom: '12px' }}>
        {palette.map((color, i) => (
          <div key={i} onClick={() => copyColor(color, i)} style={{
            flex: 1, background: color, cursor: 'pointer',
            display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
            paddingBottom: '6px', transition: 'transform 0.2s',
            position: 'relative',
          }}
            onMouseEnter={e => e.currentTarget.style.transform = 'scaleY(1.05)'}
            onMouseLeave={e => e.currentTarget.style.transform = 'scaleY(1)'}
          >
            {copied === i && (
              <span style={{ color: 'rgba(0,0,0,0.6)', fontSize: '10px', fontWeight: 700, background: 'rgba(255,255,255,0.3)', borderRadius: '4px', padding: '2px 4px' }}>✓</span>
            )}
          </div>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '4px' }}>
        {palette.map((color, i) => (
          <div key={i} style={{ textAlign: 'center' }}>
            <p style={{ margin: 0, color: 'rgba(245,245,240,0.35)', fontSize: '9px' }}>
              {i === 0 ? '50' : i === 1 ? '100' : i === 2 ? '300' : i === 3 ? '500' : i === 4 ? '700' : i === 5 ? '900' : '950'}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}

Component info

CategoryUtility

Frameworkreact

TierFREE

Copies0

About

Color palette generator with hex codes

More from Utility

'use client'
import { useState } from 'react'

const PRESETS = [
  { name: 'Gold', primary: '#C9A84C', bg: '#0A0A0A', accent: '#6366f1' },
  { name: 'Neon', primary: '#22d3ee', bg: '#030712', accent: '#a78bfa' },
  { name: 'Crimson', primary: '#ef444

ThemeCustomizer

Utility

'use client'
import { useState, useCallback } from 'react'

interface UploadedFile {
  id: number
  name: string
  size: number
  type: string
  progress: number
  done: boolean
  error?: string
}

const ALLOWED = ['image/png', 'image/jpeg', 'image/w

FileUploadZone

Utility

'use client'
import { useState } from 'react'

interface ClipItem {
  id: number
  content: string
  type: 'text' | 'code' | 'url' | 'email'
  pinned: boolean
  time: number
}

const INITIAL: ClipItem[] = [
  { id: 1, content: 'npx empire-ui-mcp --st

ClipboardManager

Utility

'use client';
import { useState } from 'react';

export default function NeonToggle({ label = "Enable AI Mode", defaultOn = false, color = "#6366f1" }) {
  const [on, setOn] = useState(defaultOn);
  const [pressing, setPressing] = useState(false);

NeonToggle

Utility