MakeMyPalette

About MakeMyPalette

MakeMyPalette is a free collection of CSS and color tools built for web designers and front-end developers. Every tool runs entirely in your browser — no files are uploaded, no data is sent to a server, and nothing is stored beyond your current session.

Why client-side only?

Most design utilities send your data through a server, even when there is no technical reason to do so. We took a different approach: every calculation, conversion, and rendering operation happens in your browser using JavaScript and the Canvas API. Your colors, gradients, and favicons never leave your machine.

This means MakeMyPalette works offline once the page loads, runs with zero latency, and respects your privacy by default.

What you can do

  • Color Palette Generator — Generate complementary, analogous, triadic, and more color harmonies from any base color. Export as CSS variables, Tailwind config, SCSS, or JSON.
  • Color Format Converter — Paste any color value and instantly see it in HEX, RGB, RGBA, HSL, HSLA, and HSV. Copy any format with one click.
  • Contrast Checker — Check foreground and background color pairs against WCAG 2.1 AA and AAA requirements for normal and large text.
  • Color Mixer — Blend two colors at any ratio in RGB or HSL space and copy the resulting hex, RGB, and HSL values instantly.
  • Palette from Image — Drop in any image and extract its dominant colors with median-cut quantization. Export as CSS variables, Tailwind config, SCSS, or JSON.
  • Colorblind Simulator — See your palette through seven types of color vision deficiency. Spot pairs that collide for the ~8% of users with red/green confusion.
  • Color Name Lookup — Find the closest CSS named color for any hex using perceptual Lab distance, or reverse lookup the exact hex behind any CSS keyword.
  • Accessible Palette Generator — 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.
  • Gradient Generator — Build linear, radial, and conic CSS gradients with multiple color stops, angle control, and real-time preview.
  • Box Shadow Generator — Layer multiple box shadows with full control over offset, blur, spread, color, and inset. Copy the CSS instantly.
  • Text Shadow Generator — Stack text-shadow layers for drop shadows, neon glows, 3D type, letterpress, and long shadows. Preview on live text and copy the CSS.
  • CSS Filter Generator — Layer blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia into a single CSS filter with live preview on image or text.
  • Cubic Bezier Easing Visualizer — 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.
  • Border Radius Previewer — Fine-tune all four corners independently or use the 8-value elliptical syntax. See the shape update live.
  • Clip-Path Maker — Draw custom clip-path polygons with an interactive editor, or start from presets like triangles, hexagons, and arrows.
  • Favicon Generator — Upload an image or create a letter-based icon, then download all the PNG sizes you need for modern browsers and web manifests.

Built with

MakeMyPalette is built with Next.js, TypeScript, and Tailwind CSS. The source code is maintained by File-Toolkits on GitHub.

Feedback

Found a bug or have a feature request? Open an issue on the GitHub repository. Pull requests are welcome.