About

What you can do here

The homepage is a sandbox. Two color bubbles sit on a sample music player. Drag them, and the buttons, text, surfaces, and borders update together. A badge tells you whether the main text still meets WCAG contrast. You can switch between light and dark, and between several moods, from a quiet palette to a high-contrast one.

When the theme looks right, copy it. The export panel can give you Tailwind CSS v4 theme variables, a shadcn-style CSS block, or a prompt you can paste into an AI coding tool such as Cursor. You can read the same colors as OKLCH, HSL, RGB, or HEX. The preview itself stays in OKLCH, because that is the space the mixer uses.

The Gradients section is a library of ready-made pairs. Each page shows the gradient and a 50 to 900 color scale you can copy. You can also open that pair back in the sandbox and keep adjusting it.

The blog compares OKLCH with RGB and HSL, including measured lightness and contrast.

The tools convert a color, check WCAG contrast, and mix colors in the browser.

Who it is for

The site is written for developers and UI designers who need a theme they can paste into a codebase, not a mood board they have to rebuild by hand. It is especially useful when you are working in Tailwind CSS v4, shadcn, or an AI assistant that should follow a fixed set of color tokens instead of inventing new ones.

You do not need an account. There is nothing to install. The mixing, the contrast check, and the copied code all happen in your browser.

What the contrast badge means

The badge compares the theme’s text and status colors with the backgrounds they sit on, using the WCAG contrast ratio. Most moods aim for AA, which is 4.5:1 for normal text. Contrast mood aims higher. The badge is a guide for the theme on this page. Once you put the colors into your own layout, check the finished screen, because size, weight, and background can change the result.

How the colors are made

The sandbox mixes your two colors in OKLCH, a color space that tracks lightness more closely than HSL. Mixing, conversion, and contrast use chroma.js. The gradient pages are produced by our own rules: fixed hue names, a contrast check, and a scale that steps lightness instead of fading toward gray. We do not copy palettes from other color websites.

Screens differ. A color that looks right on your laptop can shift on a phone or a wide-gamut monitor. Use the exported values as the source of truth, and look at them on the devices you care about.

Contact

Questions, corrections, and privacy requests go to support@colorblend.app. The contact page lists what to include so we can answer usefully.