Generate palettes, check contrast, and convert formats — with OKLCH math under the hood.
Palette generator, WCAG contrast checker, HEX/RGB/HSL/OKLCH converter, and a shade and tint scale generator. The math runs in OKLCH so the results look right, not just compute right.
Generate color palettes from a base color using harmony modes
Check WCAG contrast ratios between foreground and background colors
Convert colors between HEX, RGB, HSL, and OKLCH
Generate a 10-step tint and shade scale from a base color
5 min read
Color tools cover three jobs: generating a palette, checking accessibility, and converting between formats. Color is the area of CSS where the math matters most — #808080 is not actually a perceptual midpoint between black and white, even though the numbers say it should be. That mismatch between what the math claims and what your eyes see is why OKLCH exists and why we use it as the default for the palette and shade/tint generators.
The four tools in this category cover the everyday color tasks you do while building a UI: pick a brand color and generate a coordinated palette, check whether your text passes WCAG, convert a value between HEX and OKLCH, and build a 50–950 shade scale for your design tokens.
tailwind.config.js or as CSS custom properties.HSL was designed for math, not human perception. Equal steps along its L channel don't look equally bright — a yellow at 50% lightness looks dramatically brighter than a blue at 50% lightness, even though the numbers are identical. That's why a 10-step HSL shade scale tends to look fine at the ends and muddy in the middle, especially for hues near yellow and cyan.
OKLCH was designed around human perception. Its L channel is perceptually linear, so a 0.1 step in lightness looks like the same visual jump no matter which hue you started from. That's the reason it's the default in the palette generator and the shade/tint generator — not because it's newer, but because it produces scales that look as even as the math claims.
SnipKit's color tools are built around four principles:
Yes. Every tool on SnipKit is free to use, with no accounts, no trials, and no paywall.
No. SnipKit has no sign-up flow at all. Open the site, use the tool, copy the code.
Yes. Each tool saves your current state to your browser's localStorage so you can come back later or refresh without losing progress. Nothing is sent to a server. Clearing your browser data removes the saved state.
Yes. Anything you generate is yours — no license, no attribution required. Use it in client work, personal projects, or commercial products.
OKLCH is a perceptually uniform color space — equal steps in lightness look equally bright to the human eye. HSL doesn't do that, which is why a HSL-walked shade scale tends to look fine at the ends and muddy in the middle. Our palette generator and shade/tint generator both compute in OKLCH for that reason. You can still toggle the output to HEX or HSL if your project needs them.
The color converter handles HEX, RGB, HSL, and OKLCH — convert in any direction with one-click copy on each format. The palette and shade/tint generators emit OKLCH by default, with HEX and HSL toggles for compatibility with older codebases or design tools that don't speak OKLCH yet.
It calculates the WCAG 2.1 contrast ratio between your foreground and background colors and shows the exact ratio plus four badges: AA and AAA for normal text, AA and AAA for large text (≥18pt regular or ≥14pt bold). The thresholds are 4.5:1 (AA normal), 7:1 (AAA normal), 3:1 (AA large), and 4.5:1 (AAA large).