OKLCH Color Picker & Converter

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 🙂