OKLCH Color Picker & Converter

The new way of working with color

5.0•7 reviews•

438 followers

The new way of working with color

5.0•7 reviews•

438 followers

Visit website

Interface design tools

•

Graphic design tools

•

Design resources

Add vivid wide-gamut P3 colors to your designs and run color manipulations with predictable results.

OKLCH Color Picker & Converter gallery image

Free

Launch tags:Developer Tools•GitHub•Development

Launch Team

Customer.ioAutomate Messaging Everywhere — Startups Get 12 Months Free

Promoted

Polychrom—APCA Contrast Checker

Maker

📌

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

3yr ago

imgproxy

Hunter

📌

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

3yr ago

Connect.Club

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!

Report

3yr ago

Polychrom—APCA Contrast Checker

Maker

@fedor_sokolov hey-hey! It is mutual, we are big fans of ELK 🙌 Thank you!

Report

3yr ago

ONLYOFFICE

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.

Report

3yr ago

Polychrom—APCA Contrast Checker

Maker

@evgenykatyshev you definitely should give it a try! It’s no more difficult than using HSL. We wish that too!

Report

3yr ago

Love that you're incorporating education with something interesting and useful. Congratulations on the launch!

Report

3yr ago

Polychrom—APCA Contrast Checker

Maker

@isha_varma07 yes! Thank you, Isha 😊

Report

3yr ago

Hurry

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.

Report

3yr ago

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

3yr ago

I'm looking forward to the moment when Figma and Sketch will make these color space the new standard 🫶

Report

3yr ago

Polychrom—APCA Contrast Checker

Maker

@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

3yr ago

1 2 3

•••

5.0

Based on 7 reviews

Review OKLCH Color Picker & Converter?

OKLCH Color Picker & Converter is highly praised for its ability to simplify the understanding and application of the OKLCH color space. Users appreciate its utility in creating accessible and uniform color ramps, making it a valuable tool for designers and frontend developers. The tool is recognized for pushing the boundaries of color manipulation, with users expressing excitement for its potential integration into platforms like Figma. The dedication and innovation of the creators, including Roman and Andrey, are acknowledged for delivering a top-notch product.

Summarized with AI

Pros

Cons

Reviews

All Reviews

Most Informative

OKLCH Color Picker & Converter

The new way of working with color

The new way of working with color

What's great

What's great

What's great

What's great

What's great

What's great