OKLCH Color Picker & Converter - The new way of working with color

Hey-hey, hunters! 👋 I’m in charge of the OKLCH Color Picker and Converter design. As you might have noticed, the Picker has an unusual UI. Indeed, not too many color pickers use graphs, complex sliders, and 3D figures to help users navigate the colors, right? But as we were setting out to build the UI for our Picker, we realized that the OKLCH/LCH color spaces are quite different from the widely adopted ones, and therefore, they require a little more effort in order to properly wrap one’s head around them. That’s precisely why we decided that the key principle guiding the UI of our OKLCH color picker would be education. Designers and developers deserve the opportunity to effectively learn and become familiar with all the new concepts underlying the OKLCH and LCH color spaces. I personally believe that perceptual color spaces, when compared to HSL, RGB, and HEX, are a leap forward, and they provide designers and developers with a reliable basis for building scalable design systems! So don’t hesitate to ask questions. It would be my pleasure to make sophisticated things clearer 🙌

Imagine, a seasoned product designer, Google Fonts contributor, joins forces with one of the best frontend engineers in the world to create the missing tool for working with the bleeding-age color space. Well, that’s how OKLCH Color Picker and Converter came about. Let’s take a step back. What in the world is OKLCH? 🤔 OKLCH is a color space that takes into account how humans perceive color enabling designers and frontend developers to create visually appealing, coherent, and accessible color schemes with greater ease and precision. OKLCH Color Picker & Converter allows users to easily use OKLCH colors in design and development while neither Figma nor Sketch natively support any perceptual color space. If you’re thinking: “I am a DESIGNER. What does this color tool do for me?” Then, here are the answers: 🌈 Access 30% more colors — P3 gamut on modern screens 🤩 Create consistent, appealing color schemes by adjusting lightness, chroma, and hue 👁️ Predictable lightness to ensure palette accessibility “I am a FRONTEND ENGINEER. What does this color tool do for me?” Let’s find out: ⚖️ Native CSS support in all major browsers ⚒️ Predictable color manipulations in CSS — no bad surprises unlike Sass’ darken() 📏 Better accessibility due to predictable lightness We are big believers in pushing the envelope and improving developer productivity. Give OKLCH Color Picker & Converter a try and let us know what you think! Folks behind the tool: 👋 Roman Shamin, @romanshamin Head of Design at Evil Martians, creator of Martian Mono Google Font and Martian Grotesk typeface family 👋 Andrey Sitnik, @sitnik Principal Frontend Engineer at Evil Martians, creator of Autoprefixer, Browserslist, PostCSS, and many PostCSS plugins Learn more: 1. Listen to Shop Talk show episode on why we all should switch to OKLCH 2. Read OKLCH in CSS: why we moved from RGB and HSL 3. Read OK, OKLCH: a color picker made to help think perceptively

Congratulations on the launch! It's a great app for our design team 🙂

Hi, Product Hunt! I started to develop the OKLCH Color Picker and Converter as soon as I found that oklch() was added to CSS (and is now added to all the major browsers). I like oklch() so much, so we are now creating the ecosystem around this new math to work with colors: we help write docs, linters and tools. We’re pleased to present the first color picker on top of OKLCH. Check out the 3D view of the space, and frankly, it was fun to develop, too. Working with colors is deceptive. You think it will be a simple thing, but as you go deeper, you find yourself falling into a rabbit hole of edge cases. OKLCH simplifies so many things, and it finally solves issues with unstable color manipulation results that we've dealt with for so long. And further, OKLCH provides a great foundation for creating strong design systems.

Been using OKLCH since your first article. I hope you are succeeding in spreading this to the design community🙏

Incredible work! Please note that Firefox 112 is shipping on April 11 (in a few days!) which will be a huge milestone for OKLCH - as it will become supported natively by all major browsers.

Excellent tool, definitely useful for designers like myself. Congratulations on the launch

I've known Evil Martians for more than 5 years now and I'm a huge fan. Everything they deliver is top-notch! Good luck with OKLCH Color Picker & Converter!

I haven't try OKLCH yet, but I well know the pain when you work with lightness of butch of colors at some project. I hope your tool and the OKLCH in general will make that lind of work easier.

Looks great! Congrats on the launch!