An OKLCH color picker, palettes and contrast checker for design engineers
What Colorise Pro is for
Colorise Pro is a free, browser-based color workspace for people who turn design decisions into code: front-end developers, design-system maintainers and designers who ship their own CSS. It brings the jobs that usually live in separate tabs into one place: an OKLCH color picker, palettes you can open and edit, a contrast checker for WCAG 2.x and APCA, and exports that paste straight into a stylesheet or a token file. The tools run in your browser and do not need an account.
Pick colors in OKLCH, not HSL
OKLCH describes a color with three numbers: lightness, chroma and hue. Unlike HSL, its lightness follows how bright a color looks, so a yellow and a blue with the same L value have a similar visual weight. That is what makes it reliable for scales, hover states and dark themes, where you change one number and expect the result to behave. The OKLCH color picker shows a lightness and chroma plane with a hue strip, warns you when a color falls outside sRGB, and gives you HEX, RGB, HSL and oklch() side by side. The OKLCH vs HSL guide explains the difference with worked examples.
Build palettes and color pairs
A palette is more useful when you can see how its colors work together. The Studio lets you lock colors, iterate on the rest and assign roles such as background, text and accent. If you would rather start from a known good combination, color pairs offers two-color, three-color and brand-system sets that already include a contrast check for each direction. You can also browse thousands of ready-made OKLCH color palettes and open any of them in the editor, or pull colors from a photo with the palette extractor, which clusters the image on your device.
For smooth transitions between two colors, the OKLCH gradient tool interpolates in a perceptual space, which avoids the grey, muddy midpoints that plain RGB gradients often produce. The brand color tool reads a public web address and suggests a starting system from the colors it finds.
Check contrast with WCAG 2.x and APCA
Readable text depends on the difference in lightness between text and background. WCAG 2.x measures it as a ratio, where 4.5:1 is the usual minimum for body text and 3:1 for large text and interface components. APCA reports a lightness contrast value called Lc, which depends on text size and weight and is meant to match perception more closely, especially for dark backgrounds. The contrast checker reports both on live type samples, so you can see the numbers and the result together. The WCAG vs APCA guide covers when a ratio is enough and when Lc tells you more. Remember that APCA is not yet part of a published WCAG requirement, so use the WCAG ratio when you need to demonstrate compliance.
Common text and background combinations have their own pages in the contrast pair library, and the palette diff tool compares two palettes slot by slot with ΔE and morphs between them, which helps when you migrate a brand or upgrade design tokens.
Export to HEX, CSS, Tailwind and DTCG tokens
A color is only finished when it lands in your codebase. Colorise Pro exports HEX values, CSS custom properties, oklch() declarations, a Tailwind theme block and design tokens in the DTCG JSON format that tools such as Style Dictionary can read. Because the exports come from the same OKLCH values you picked, nothing is rounded through another color space on the way. Developers who want the data without the interface can use the color API and developer docs.
Where to start
If you have one color in mind, open the OKLCH color picker and look it up in the color library or the color names list. If you are building a whole system, begin in Studio or with color pairs. If you need to defend a choice, run it through the contrast checker.
To learn the ideas behind the tools, the color guides cover building OKLCH scales, gamut mapping to sRGB and extracting palettes from images. Curious about the alternatives? See how Colorise Pro compares in comparisons with Coolors and Adobe Color, and read the color meaning guides for the symbolism behind each hue. Templates for specific jobs live under SaaS landing pages, presentations and business cards.