A color picker designed for human eyes, not computer math.
Equal values = equal brightness. Finally.
↑ Click a color to see the magic
Traditional pickers use RGB or HSL — math designed for computers, not humans.
Yellow at "50% brightness" blazes while blue at "50% brightness" looks dim. Same numbers, completely different perception.
Yellow and cyan blaze. Blue looks dim. Your users waste time fighting their own perception. HSL lightness doesn't mean brightness.
HSL blue-to-white passes through purple. OKLCH keeps the hue constant.
HSL blue-to-yellow passes through dark gray zones. OKLCH stays vibrant.
Customize the picker options and see the changes in real-time. No more guessing, no more trial and error.
Built on color science, not convention. L=0.5 looks 50% bright for every hue. Equal numbers = equal perception.
Pure vanilla JavaScript. No bloat. No build step.
Copy two files. Write three lines of code. You're done. The color picker you can be proud of forever.
Perceptually harmonious palette spanning the full spectrum. Instant conversion to OKLCH, RGB, HEX, and HSL.
<link rel="stylesheet" href="oklume.css">
<script src="oklume.js"></script>
<div id="picker"></div>
<script>
const picker = new Oklume('#picker', {
onChange: (color) => {
document.body.style.backgroundColor = color.oklch;
}
});
</script>OKLCH is a perceptually uniform color space based on Oklab. Unlike RGB or HSL, OKLCH ensures that equal numeric values produce equal perceived brightness and saturation across all hues. This makes color selection intuitive and predictable.
Oklume requires modern browsers with OKLCH support: Chrome 111+, Safari 15.4+, Firefox 113+, Edge 111+. The library automatically checks for browser support and displays a warning if OKLCH is not available.
Yes! You can provide a custom palette array when initializing Oklume:
const picker = new Oklume('#picker', {
palette: [
{ l: 0.5, c: 0.2, h: 0 },
{ l: 0.6, c: 0.25, h: 130 },
// ... your colors
]
});Yes! Oklume is framework-agnostic. Just mount the component to any DOM element. For React, use useEffect. For Vue, use onMounted. For Angular, use ngAfterViewInit.
MIT License with attribution requirement. You're free to use Oklume in any project, but please include attribution to "Oklume by Anton Ipatov" in your documentation or UI.