explaingit

sanjarbek404/palitra-pro

★ 18TypeScriptAudience · designerComplexity · 2/5ActiveSetup · easy

TLDR

Small React web app that generates color palettes in random, monochromatic, analogous, triadic, and tetradic modes, with lock, undo, copy to HEX/RGB/HSL, and export to CSS, SCSS, or Tailwind.

Mindmap

mindmap
  root((Palitra-Pro))
    Inputs
      Base hue
      Lock toggles
      Spacebar press
    Outputs
      HEX RGB HSL strings
      CSS variables
      SCSS file
      Tailwind config
    Use Cases
      Brainstorm palettes
      Lock favorite colors
      Export to design tokens
    Tech Stack
      React 19
      Vite
      Tailwind 4
      Chroma.js
      Motion
      Lucide React

Things people build with this

USE CASE 1

Generate a tetradic palette, lock the two you like, and spacebar through variations until the other two click.

USE CASE 2

Copy any swatch in HEX, RGB, or HSL with a single click for pasting into a design tool.

USE CASE 3

Export the current palette as CSS variables, SCSS, or a Tailwind theme block for the project you are building.

USE CASE 4

Fork the repo and let the GitHub Actions workflow publish your own variant to GitHub Pages on every push to main.

Tech stack

ReactViteTailwindChroma.jsMotionTypeScript

Getting it running

Difficulty · easy Time to first run · 5min

Standard npm install plus npm run dev. No backend, no env vars, hosted demo is on GitHub Pages.

License is not stated in the available content.

In plain English

Palitra-Pro, also referred to in the README as Rang Palitrasi (the README is written in Uzbek), is a small web app for generating color palettes. The author describes it as a tool for developers and designers who want a quick way to come up with a set of colors that look good together. A live preview of the running app is hosted on GitHub Pages at sanjarbek404.github.io/Palitra-Pro/. The app supports several palette generation modes. There is a fully random mode, and four more structured options based on classic color-theory relationships: monochromatic (variations of a single hue), analogous (neighboring hues on the color wheel), triadic (three hues evenly spaced), and tetradic (four hues). Pressing the spacebar produces a new palette, so you can flip through ideas quickly without using the mouse. Individual colors can be locked so they stay put while the rest of the palette is regenerated. Once you find something you like, you can copy any color to the clipboard in HEX, RGB, or HSL format with a single click. There are undo and save buttons for going back to a previous palette or keeping the current one for later. There is also an export feature that turns the current palette into ready-to-paste code: CSS variables, SCSS, or a Tailwind configuration block. The interface uses Motion for animations and adjusts text color between dark and light automatically so labels stay readable on any background. Under the hood, the project uses React 19, the Vite build tool, Tailwind CSS 4 for styling, Chroma.js for the actual color math, Motion for animations, and Lucide React for icons. To run it locally you clone the repository, run npm install to fetch dependencies, then npm run dev, and the local server starts on a port such as 3000. A GitHub Actions workflow is already set up in the repository, so pushing to the main or master branch automatically publishes the latest version to GitHub Pages. The README does not state a license.

Copy-paste prompts

Prompt 1
Clone Palitra-Pro, run npm install and npm run dev, then add a fifth palette mode called split-complementary using Chroma.js.
Prompt 2
Add a keyboard shortcut in Palitra-Pro that copies the entire current palette as a Tailwind theme.colors block to the clipboard.
Prompt 3
Refactor Palitra-Pro's color math so the export step can also produce a CSS @theme block compatible with Tailwind 4 directives.
Prompt 4
Wire Palitra-Pro's save button to localStorage so the last ten saved palettes survive a page reload and show in a sidebar.
Prompt 5
Audit Palitra-Pro's auto light or dark text contrast logic and replace it with a proper WCAG AA contrast check using Chroma.js.
Open on GitHub → Explain another repo

Generated 2026-05-22 · Model: sonnet-4-6 · Verify against the repo before relying on details.