v2.8 • UI • 5kb gzipped • MIT
ColorForge
Palette generation and contrast checking in perceptual colour space, built for design tokens.
// why colorforge
Perceptual, not hexadecimal
Works in OKLCH, so a lightness ramp looks even to a person rather than only to the arithmetic.
// stack
Contrast built in
Every generated step reports its contrast against your surfaces, so a failing token never reaches a build.
ColorForge started as a single file in a client project and stayed small on purpose. It does one job, it does it in 5kb gzipped, and it has no runtime dependencies.
Getting started
Install it, import it, call it:
npm i colorforge-jsWorks in OKLCH, so a lightness ramp looks even to a person rather than only to the arithmetic.
What it does not do
It does not manage your state, style your components or ship a plugin system. Those are your decisions, and keeping them out is what keeps the bundle honest.
- OKLCH ramps
- Contrast assertions
- MIT licensed, commercially friendly
Features
OKLCH ramps
Generate a tonal scale that stays perceptually even across the whole range.
Contrast assertions
Assert a minimum ratio in tests and fail the build when a token regresses.
Container aware
Adapts to the box it is given rather than the viewport, so it works in a sidebar.
Accessibility audited
Tested against screen readers on three platforms, with the findings published in the repository.
ESM and types
Ships module and CommonJS builds with hand-written type definitions and source maps.
Styling stays yours
ColorForge sets no colours and no spacing. Every visual decision belongs to your design system.
Get ColorForge v2.8
9 files • .min.js 5kb • .zip 56kb • sha384 verified
Changelog
- OKLCH ramp generation
- Contrast assertions for CI
- Colour-vision simulation
- Node 18 is now the minimum supported version
- CommonJS build restored for older bundlers
- Reworked the public API for consistency
- Deprecated helpers removed
// related
Related products
ChartForge
Canvas charts in twelve lines. Responsive, accessible and dark-mode ready, with no D3 learning curve.
View →MotionEase
Physics-based micro-animations with a single call. Spring curves that feel right without a tuning session.
View →FormFlow
Validation and multi-step logic that works the same in React, Vue and vanilla. Your markup stays yours.
View →Ship the interface today.
MIT licensed. Commercial friendly. Five-minute setup.