Color tools,
printed sharp.
Pick an ink. Mix. Copy. Ship.
Generate complementary, analogous, triadic, and more color harmonies from any base color. Export as CSS variables, Tailwind config, SCSS, or JSON.
Paste any color value and instantly see it in HEX, RGB, RGBA, HSL, HSLA, and HSV. Copy any format with one click.
Check foreground and background color pairs against WCAG 2.1 AA and AAA requirements for normal and large text.
Blend two colors at any ratio in RGB or HSL space and copy the resulting hex, RGB, and HSL values instantly.
Drop in any image and extract its dominant colors with median-cut quantization. Export as CSS variables, Tailwind config, SCSS, or JSON.
See your palette through seven types of color vision deficiency. Spot pairs that collide for the ~8% of users with red/green confusion.
Find the closest CSS named color for any hex using perceptual Lab distance, or reverse lookup the exact hex behind any CSS keyword.
Build a tonal scale (50–950) from any brand color and see WCAG AA/AAA contrast ratings for every shade against white, black, and the rest of the scale.
Build linear, radial, and conic CSS gradients with multiple color stops, angle control, and real-time preview.
Layer multiple box shadows with full control over offset, blur, spread, color, and inset. Copy the CSS instantly.
Stack text-shadow layers for drop shadows, neon glows, 3D type, letterpress, and long shadows. Preview on live text and copy the CSS.
Layer blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia into a single CSS filter with live preview on image or text.
Drag the two control points to design custom cubic-bezier() easing curves. Compare against ease, ease-in, ease-out, and watch the timing curve drive a live animation.
Fine-tune all four corners independently or use the 8-value elliptical syntax. See the shape update live.
Draw custom clip-path polygons with an interactive editor, or start from presets like triangles, hexagons, and arrows.