A production-ready OKLCH color picker with zero dependencies
Oklume is a modern, lightweight color picker built for the OKLCH (Oklab) color space — a perceptually uniform color model that makes color selection more intuitive and predictable. Perfect for designers and developers who want accurate, accessible color tools.
Choose your preferred installation method:
1. Install via npm:
npm install oklume
2. Import in your JavaScript:
import Oklume from 'oklume';
import 'oklume/style.css';
3. Add a container element:
<div id="color-picker"></div>
4. Initialize Oklume:
const picker = new Oklume('#color-picker', {
onChange: (color) => {
console.log(color.oklch);
document.body.style.backgroundColor = color.oklch;
}
});
1. Include Oklume from CDN:
<link rel="stylesheet" href="https://unpkg.com/oklume/oklume.css">
<script src="https://unpkg.com/oklume/oklume.js"></script>
2. Add a container element:
<div id="color-picker"></div>
3. Initialize Oklume:
const picker = new Oklume('#color-picker', {
onChange: (color) => {
console.log(color.oklch);
document.body.style.backgroundColor = color.oklch;
}
});
1. Download the files:
2. Include in your HTML:
<link rel="stylesheet" href="path/to/oklume.css">
<script src="path/to/oklume.js"></script>
3. Add a container element:
<div id="color-picker"></div>
4. Initialize Oklume:
const picker = new Oklume('#color-picker', {
onChange: (color) => {
console.log(color.oklch);
document.body.style.backgroundColor = color.oklch;
}
});
Initialize with element reference:
const element = document.querySelector('#color-picker');
const picker = new Oklume(element, options);
Create multiple pickers:
const picker1 = new Oklume('#picker-1');
const picker2 = new Oklume('#picker-2', { mode: 'compact', trigger: '#btn-2' });
npm install oklume
Then import in your JavaScript:
// ES Modules
import Oklume from 'oklume';
import 'oklume/css';
// CommonJS
const Oklume = require('oklume');
And in your HTML or bundler config, include the CSS:
<link rel="stylesheet" href="node_modules/oklume/oklume.css">
Or if using a bundler (Webpack, Vite, Rollup), import directly:
import 'oklume/style.css';
<link rel="stylesheet" href="https://unpkg.com/oklume/oklume.css">
<script src="https://unpkg.com/oklume/oklume.js"></script>
Download the latest version from this repository:
Include the files in your HTML:
<link rel="stylesheet" href="path/to/oklume.css">
<script src="path/to/oklume.js"></script>
Display the color picker directly on the page:
<div id="color-picker"></div>
<script>
const picker = new Oklume('#color-picker', {
mode: 'expanded',
onChange: (color) => {
console.log('Selected color:', color.oklch);
}
});
</script>
Open the picker in a popup when clicking a button:
<button id="color-button">Choose Color</button>
<div id="color-picker"></div>
<script>
const picker = new Oklume('#color-picker', {
mode: 'compact',
trigger: '#color-button',
onChange: (color) => {
document.body.style.backgroundColor = color.oklch;
}
});
</script>
Compact Mode Features:
Use the color picker with forms:
<form>
<label>Background Color:</label>
<button type="button" id="color-btn">Pick Color</button>
<input type="hidden" name="color" id="color-value">
<div id="picker"></div>
</form>
<script>
const colorInput = document.getElementById('color-value');
const picker = new Oklume('#picker', {
mode: 'compact',
trigger: '#color-btn',
onChange: (color) => {
colorInput.value = color.oklch;
}
});
// Set initial color
picker.setColor(0.7, 0.15, 30);
colorInput.value = picker.getColor().oklch;
</script>
Use your own color palette:
const customPalette = [
{ l: 0.5, c: 0.2, h: 0 }, // Red
{ l: 0.6, c: 0.25, h: 130 }, // Green
{ l: 0.55, c: 0.26, h: 240 }, // Blue
{ l: 0.9, c: 0.1, h: 70 }, // Yellow
];
const picker = new Oklume('#picker', {
palette: customPalette
});
Show only the color palette without sliders or output:
const picker = new Oklume('#picker', {
showSliders: false,
showFormats: false,
onChange: (color) => {
document.body.style.backgroundColor = color.oklch;
}
});
Set and get colors programmatically:
const picker = new Oklume('#picker');
// Set to a warm orange
picker.setColor(0.7, 0.15, 30);
// Get current color
const currentColor = picker.getColor();
console.log(currentColor.oklch); // 'oklch(0.7 0.15 30)'
console.log(currentColor.hex); // '#d99f7f'
console.log(currentColor.rgb); // 'rgb(217, 159, 127)'
Customize which UI elements are visible:
// Hide preview section
const picker1 = new Oklume('#picker1', {
showPreview: false
});
// Show only specific color formats
const picker2 = new Oklume('#picker2', {
showFormats: ['oklch', 'hex']
});
// Ultra minimal - only palette
const picker3 = new Oklume('#picker3', {
showPreview: false,
showSliders: false,
showFormats: false
});
When creating a new Oklume instance, you can pass these options:
const picker = new Oklume(container, {
mode: 'expanded',
trigger: null,
palette: null,
onChange: null,
showPreview: true,
showSliders: true,
showFormats: ['oklch', 'rgb', 'hex', 'hsl']
});
| Option | Type | Default | Description |
|---|---|---|---|
mode | string | 'expanded' | Display mode: 'expanded' (inline) or 'compact' (popup) |
trigger | string|HTMLElement | null | Required for compact mode: Button or element that opens the picker |
palette | Array<{l, c, h}> | 160 default colors | Custom palette of OKLCH colors |
onChange | Function | null | Callback fired when color changes. Receives color object: {oklch, rgb, hex, hsl} |
showPreview | boolean | true | Show/hide the preview box |
showSliders | boolean | true | Show/hide the sliders (Lightness, Chroma, Hue) |
showFormats | Array<string>|false | ['oklch','rgb','hex','hsl'] | Array of format names to display, or false to hide all |
new Oklume(container, options)
Parameters:
container (string|HTMLElement) — CSS selector or DOM element where the picker will be renderedoptions (Object) — Configuration options (see Configuration Options)Example:
const picker = new Oklume('#my-picker', {
mode: 'expanded',
onChange: (color) => console.log(color)
});
setColor(l, c, h)Programmatically set the current color.
picker.setColor(0.7, 0.15, 30);
Parameters:
l (number) — Lightness (0-1)c (number) — Chroma (0-0.4)h (number) — Hue (0-360)getColor()Get the current color in all supported formats.
const color = picker.getColor();
// Returns:
// {
// oklch: 'oklch(0.7 0.15 30)',
// rgb: 'rgb(217, 159, 127)',
// hex: '#d99f7f',
// hsl: 'hsl(21, 56%, 67%)'
// }
Returns: Object with CSS-ready color strings
togglePicker()Toggle the picker open/closed (compact mode only).
picker.togglePicker();
destroy()Remove the picker from the DOM and clean up all event listeners.
picker.destroy();
checkBrowserSupport()Check if the current browser supports OKLCH colors.
if (!picker.checkBrowserSupport()) {
console.warn('OKLCH not fully supported in this browser');
}
Returns: boolean — true if OKLCH is supported
Oklume outputs colors in four CSS-ready formats:
'oklch(0.7 0.15 30)'
'rgb(217, 159, 127)'
'#d99f7f'
'hsl(21, 56%, 67%)'
All displayed color values are editable. Click on any value to edit it:
oklch(0.7 0.15 30) or 0.7 0.15 30rgb(217, 159, 127) or 217, 159, 127#d99f7f or d99f7f or #fff (3-digit shorthand supported)hsl(21, 56%, 67%) or 21, 56%, 67%Keyboard Shortcuts:
The picker automatically parses various color format inputs and converts them to OKLCH internally.
Customize the appearance using CSS custom properties:
:root {
/* Colors */
--oklume-bg: oklch(1 0 0); /* Background */
--oklume-border: oklch(0.9 0 0); /* Borders */
--oklume-text: oklch(0.25 0 0); /* Text */
--oklume-text-muted: oklch(0.45 0 0); /* Muted text */
--oklume-accent: oklch(0.5 0.25 250); /* Accent color */
/* Dimensions */
--oklume-max-width: min(350px, 100vw - 32px);
--oklume-preview-height: clamp(80px, 20vw, 120px);
--oklume-swatch-size: clamp(28px, 8vw, 36px);
/* Spacing */
--oklume-gap: clamp(3px, 1vw, 6px);
--oklume-gap-section: clamp(12px, 4vw, 20px);
--oklume-padding: clamp(8px, 3vw, 16px);
/* Border radius */
--oklume-radius: clamp(4px, 1.5vw, 8px);
/* Animation */
--oklume-transition-speed: 0.2s;
}
:root {
--oklume-bg: oklch(0.2 0 0);
--oklume-border: oklch(0.3 0 0);
--oklume-text: oklch(0.9 0 0);
--oklume-text-muted: oklch(0.7 0 0);
--oklume-accent: oklch(0.6 0.25 280);
}
Style your trigger button however you want:
<button id="color-btn" style="
width: 150px;
height: 40px;
border-radius: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
cursor: pointer;
">
Pick Color
</button>
Oklume requires modern browsers with OKLCH support:
| Browser | Minimum Version |
|---|---|
| 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.
const picker = new Oklume('#picker');
if (!picker.checkBrowserSupport()) {
// Provide fallback UI or use RGB values
console.warn('OKLCH not supported, falling back to RGB');
}
OKLCH (Oklab with Lightness, Chroma, Hue) is a perceptually uniform color space that offers significant advantages over traditional RGB/HSL:
Oklume includes 160 carefully curated OKLCH colors:
oklch(0.7 0.15 30)MIT License with attribution requirement
Copyright (c) 2025 Anton Ipatov
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
Attribution requirement: If you use this software in a publicly distributed product, you must include attribution to "Oklume by Anton Ipatov" in your documentation or user interface.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Anton Ipatov Twitter: @ipatovanton
Contributions are welcome! Please feel free to submit issues or pull requests.
FAQs
A production-ready OKLCH color picker with zero dependencies
We found that oklume demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.