OKLCH Color Picker & Converter
GeneratorPick colours in OKLCH, see which ones fall outside sRGB or P3, and copy the CSS value or convert from hex and rgb.
A colour picker and converter for the OKLCH colour space, built by Andrey Sitnik and Roman Shamin at Evil Martians. You set Lightness, Chroma, Hue and Alpha with sliders, or paste a HEX, RGB or HSL value to convert it to OKLCH.
It can show the Display P3 and Rec2020 gamuts on its graphs and in a 3D model of the colour space that you can rotate and zoom. When a colour falls outside sRGB, it gives you the closest sRGB fallback by chroma.
The source is on GitHub under the MIT licence, and the page links to Evil Martians' article on why OKLCH works better than RGB and HSL.
Good for
- Pick OKLCH colours and copy them with an sRGB fallback
- Convert existing HEX, RGB or HSL values to OKLCH
- Check whether a colour sits inside sRGB, P3 or Rec2020
- Build an intuition for how lightness, chroma and hue interact
oklch()
More generators
See all →Anchor position tool
GeneratorClick through position-area values and watch where an anchored element lands around its anchor.- Stars
- 16
- Last commit
- 2 years ago
- Licence
- Not stated
scroll-driven-animations.style
GeneratorDemos plus visualisers that show how scroll() and view() timelines and their ranges map to an animation, with a free video course.- Price
- Free
- Made by
- Bramus Van Damme (Google Chrome DevRel)
- Kind
- Generator
Layoutit Grid
GeneratorDraw rows, columns and named areas visually and get the grid-template CSS and matching HTML.- Stars
- 1,745
- Last commit
- 5 years ago
- Licence
- MIT
