A color extraction and palette editing tool. Extract colors from images, visualize them in 3D space, edit palettes, and export as theme files.
- Image upload and color extraction with K-means clustering
- Color visualization (3D sphere, pie chart, color pool)
- Image effects (brightness/contrast/saturation, hue shift)
- Contrast checker for accessibility
- Theme export in multiple formats
- Drag and drop interface for editing color arrays
- Next.js 15 with App Router
- React 19
- TypeScript 5
- Tailwind CSS 4
- shadcn/ui
- Three.js / React Three Fiber
- Better Auth for authentication
- PostgreSQL with Prisma
- Hono for API routes
- Node.js 18 or later
- pnpm
- Docker and Docker Compose
- Clone the repository and install dependencies:
git clone <repository-url>
cd iroiro
pnpm install- Copy the environment file and configure it:
cp .env.example .envEdit .env and fill in the required values:
DATABASE_URL: PostgreSQL connection string (default:postgresql://postgres:postgres@localhost:5432/app)NEXT_PUBLIC_BETTER_AUTH_URL: Application URL (default:http://localhost:3000)BETTER_AUTH_SECRET: Generate withpnpx @better-auth/cli secretGITHUB_IDandGITHUB_SECRET: GitHub OAuth credentials (optional)- S3 configuration: Optional for image storage
- Start the database:
docker compose up -d- Generate Prisma client and push schema:
pnpx @better-auth/cli generate
pnpm db push- Start the development server:
pnpm devOpen http://localhost:3000 in your browser.
- Upload Image: Click or drag-and-drop an image into the Image Uploader module
- Extract Colors: Use the Sampler module to extract colors with K-means clustering
- Visualize: View colors in 3D sphere, pie chart, or color pool
- Edit: Drag and drop colors in the Color Pool to rearrange
- Export: Use Theme Exporter to download palette in various formats
Each module can be flipped to see configuration options on the back side:
- Image Uploader: Upload images via click, drag-and-drop, or paste
- Sampler: Extract colors using K-means algorithm with adjustable parameters
- Effect: Adjustment: Apply brightness, contrast, and saturation adjustments
- Effect: Shifter: Apply hue rotation to images
- 3D Sphere: Visualize colors in 3D RGB color space
- Contrast Checker: Check color contrast ratios for accessibility
- Pie Chart: Display color distribution as a pie chart
- Color Pool: Edit color array with drag-and-drop
- Theme Exporter: Export palettes in multiple formats
Click the "Flip" button on each module to access its configuration panel. Configure input/output IDs to connect modules together.
pnpm dev: Start development server with Turbopnpm build: Build for productionpnpm start: Start production serverpnpm lint: Run ESLintpnpm lint:fix: Fix linting issuespnpm typecheck: Run TypeScript type checkingpnpm fmt:check: Check code formattingpnpm fmt:write: Format code with Prettierpnpm db: Access Prisma CLI
src/
├── app/
│ ├── (display)/ # Main application page
│ │ └── _components/ # Color tool modules
│ ├── api/ # API routes (Hono + Better Auth)
│ ├── about/ # About page
│ └── dashboard/ # Dashboard page
├── components/
│ ├── auth/ # Authentication components
│ ├── layout/ # Layout components
│ ├── misc/ # Utility components
│ ├── providers/ # React context providers
│ └── ui/ # shadcn/ui components
└── lib/
├── auth.ts # Better Auth configuration
├── auth-client.ts # Auth client utilities
├── db.ts # Prisma client
├── hono.ts # Hono RPC client
└── utils.ts # Utility functions
- The project uses pnpm for package management
- ESLint and Prettier are configured for code quality
- Husky and lint-staged ensure code quality on commits
- Environment variables are validated with Zod in
src/env.ts - Use absolute imports with
@/alias
MIT