A minimal web app for identifying the dominant colour in an image. Upload any image file and instantly get its dominant colour displayed by name, with hex, RGB, and OKLCH values ready to copy.
- Upload a local image file (JPEG, PNG, WebP, GIF, BMP)
- Identifies the dominant colour using ColorThief
- Resolves the nearest human-readable colour name from a library of 30,000+ named colours
- Displays the colour as a full-bleed card with automatic light/dark text contrast
- One-click copying of hex, RGB, and OKLCH values
- Uploaded image becomes the full-page background
- React 19 + TypeScript
- Vite — build tool and dev server
- Tailwind CSS v4 — utility-first styling
- shadcn/ui + Radix UI — accessible component primitives
- ColorThief — dominant colour extraction
- color-name-list + nearest-color — colour name resolution
- Lucide React — icons
- Node.js 18+
- npm
npm installnpm run devOpen http://localhost:5173 in your browser.
npm run buildThe output is written to dist/.
npm run previewsrc/
├── App.tsx # Root component — image processing logic and state
├── main.tsx # React entry point
├── global.d.ts # Global type declarations
├── components/
│ ├── layout/
│ │ ├── ImageSelectionWindow.tsx # File upload form
│ │ ├── ImageViewerWindow.tsx # Dominant colour display card
│ │ └── CopyButton.tsx # Copy-to-clipboard button with confirmation state
│ └── ui/ # shadcn/ui primitive components
├── lib/
│ └── utils.ts # cn() class merging helper
└── styles/
└── index.css # Global styles and Tailwind theme tokens
- Click Load Image and select an image file from your computer.
- The dominant colour is displayed as a full card — name, hex, RGB, and OKLCH values shown.
- Click the copy icon next to any value to copy it to the clipboard.
- Click Change Image to start over with a new file.
npm run lint