🎨 ColorMagic

ColorMagic is a popular free and open-source color palette generator, with many side-tools for all things color. It's built with Nuxt, NuxtUI and typescript.

ColorMagic gets around ~500k pageview per month, with 12K palettes generated daily. You can view our live website analytics here.

Most of the tools run with the assistance of AI using openai.

The site has translations for english, japanese and italian using nuxtjs/i18n.

🏗️ Layers

ColorMagic utilizes Nuxt's in-built layer system to separate domains of the app.

Each layer creates it's own separate module (example) which we then declare in the setup util. The modules are then available to use globally.

🚀 Getting Started

All of ColorMagic's palettes are stored using MongoDB. Setup a local MongoDB instance by using the following:

docker compose up

For more details check out the mongo layer.

Create a .env in the root of the project and add the following values

OPENAI_API_KEY=[sk_srf4s...]

Install dependencies

npm install

Run locally

npm run dev

🔧 Color Tools

This is a WIP, more tools coming soon!

🖥️ API

ColorMagic has a public API that anyone can use free of charge.

We use the awesome @tanstack/vue-query for all API calls and @sinclair/typebox to validate on the server.

You can find the available public API endpoints here.

Please note: This API may be removed or changed at anytime, without warning. Use at your own risk.

❤️ Contribute