Add vivid wide-gamut P3 colors to your designs and run color manipulations with predictable results.
Polychrom—APCA Contrast CheckerMaker
📌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 🙌
Report
imgproxyHunter
📌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
Report
Connect.ClubI'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!
Report
Polychrom—APCA Contrast CheckerMaker
@fedor_sokolov hey-hey! It is mutual, we are big fans of ELK 🙌
Thank you!
Report
ONLYOFFICEI 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.
Report
Polychrom—APCA Contrast CheckerMaker
@evgenykatyshev you definitely should give it a try! It’s no more difficult than using HSL.
We wish that too!
Report
Love that you're incorporating education with something interesting and useful. Congratulations on the launch!
Report
Polychrom—APCA Contrast CheckerMaker
@isha_varma07 yes! Thank you, Isha 😊
Report
HurryIncredible 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.
Report
Browserslist@jokull yes, oklch() CSS support was added to Chrome 111 and Firefox 112.
But note, that designers could start using OKLCH math for colors before browsers support. Designer could use OKLCH math to define colors and developers will copy old hex values.
We need new support only to be able to render vivid P3 colors (but even for them, we will have sRGB fallbacks which will work in all browsers).
Report
I'm looking forward to the moment when Figma and Sketch will make these color space the new standard 🫶
Report
Polychrom—APCA Contrast CheckerMaker
@victoria_melnikova we couldn’t be agree more! We hope that adoption of the OKLCH color space will push big guys to implement it 😊
Report
123
•••
Next
