Zen Colors easily create perceptual color tints, shades and scales

Works with your color

const c = new Color('#6b6a5b');

Effortless color scales

Generate predictable color palettes from a single color with .all(weight) that includes tints and shades.

new Color('#6b6a5b').all(10);

Easy Tints

Mix a base color with white and create a single .tint() or multiple .tints().

new Color('#6b6a5b').tint(10);

Quick Shades

Mix a base color with black and create a single .shade() or multiple .shades().

new Color('#6b6a5b').shades(10);

oklch() by default

Working with modern CSS colors creates predictable color matching aligned with our vision capabilities.

oklch(73% 0.1 161)

Contrast information

Get WCAG contrast information via .contrast(color).

new Color('#6b6a5b').contrast('#fff');

Readable text colors

Use .fg() to quickly get an AA - AAA contrast text color.

new Color('#6b6a5b').fg(); // #fff

Output as strings

Easily output your color scale as oklch / hex / rgb / hsl.

new Color('#6b6a5b')
         .rgbString(); // 'rgb(107 106 91)' 

Output as CSS variables

Output single colors or scales as: --color-{name}-*.

new Color('#6b6a5b').all(10)
         .cssVariablesString('primary');

Fine-tune your color

Click the header swatch to adjust the lightness, chroma and hue of your color to fit your style.

Color scale previews

Preview generated color palettes with tints and shades from a single color.

Export CSS variables

Choose between the 50 … 950 scale, or a scale with tint (-tN) and shade (-sN) keys for your exported color scales.

Tailwind ready

Export color scales as Tailwind CSS ready @theme {} variables for easy use within your Tailwind project.

--color-brand: …; → .bg-brand

History saved

Go back in time to your last 20 colors saved in your own browser. Available in the sidebar.