#6366f1
#06b6d4
#f59e0b
Runs locally — nothing is uploaded
Result
Pick two colors.
How to use
- 1Pick two colors, or tick the box to add a third.
- 2Choose linear, radial or conic and set the angle.
- 3Compare the standard and the OKLab preview and copy the CSS you prefer.
It tells the browser to mix the colors in the OKLab color space instead of sRGB. Transitions between distant hues stay bright instead of turning grey in the middle.
Current Chrome, Edge, Firefox and Safari support color interpolation in gradients. The code puts a plain gradient first, so older browsers fall back to it.
For linear gradients 0deg points up and 90deg to the right. For conic gradients it is where the first color starts. Radial gradients ignore it.
Related tools
Contrast checkerWCAG AA/AAA contrast ratio, plus APCAColor converterHEX, RGB, HSL, OKLCH and CMYK in one goPalette generatorOKLCH color scales and harmoniesType scaleModular font sizes with a live previewCSS clamp() generatorFluid sizes between two viewport widthsPX to REM converterBatch px ⇄ rem for any root size
Let's make something good
Tell us about your project — we reply within one business day.