Essential toolkit for Wplace.live players. Free, open-source tools for color conversion, pixel art planning, and server monitoring.

• Convert HEX, RGB, or HSL colors to the closest match in the official Wplace palette
• Real-time color preview and comparison
• Click to copy color codes
• Visual palette display with all official Wplace colors

• Grid-based pixel art editor with official Wplace color palette
• Zoom and pan functionality for detailed work
• Export designs as PNG images
• Save and load templates in JSON format
• Mobile-responsive with touch controls
• Drawing tools with left-click to draw, right-click to pan

• Real-time monitoring of Wplace.live server status
• Response time tracking
• Uptime percentage calculation
• Status history with timestamps
• Auto-refresh every 30 seconds (optional)

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Icons: Lucide React
• Build Tool: Turbopack (for development)

• Node.js 18+
• npm or yarn

1. Clone the repository:

git clone <repository-url>
cd wplace_tool

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser.

npm run build
npm start

wplace_tool/
├── src/
│   ├── app/                 # Next.js App Router pages
│   ├── components/          # React components
│   │   ├── ColorConverter.tsx
│   │   ├── PixelPlanner.tsx
│   │   ├── ServerStatus.tsx
│   │   ├── Navigation.tsx
│   │   └── Footer.tsx
│   └── lib/                 # Utility functions
│       └── wplace-colors.ts # Color palette and conversion utilities
├── public/                  # Static assets
└── README.md

Uses Euclidean distance in RGB color space to find the closest match in the Wplace palette:

distance = √[(r₁-r₂)² + (g₁-g₂)² + (b₁-b₂)²]

• Left Click/Drag: Draw pixels with selected color
• Right Click/Drag: Pan around the canvas
• Mouse Wheel: Zoom in/out
• Touch: Full mobile support with pinch-to-zoom

• Monitors wplace.live server availability
• Tracks response times and uptime percentage
• Maintains history of last 50 status checks
• No-CORS requests for compatibility

This is an open-source project. Contributions are welcome! Contribute List:

• cabbagehao
• wplace tool

Free to use for the Wplace community.

• Wplace.live - Main Wplace website
• Built for the Wplace community with ❤️