MakeMyPalette

MakeMyPaletteについて

MakeMyPaletteは、Webデザイナーとフロントエンド開発者のために作られた無料のCSS・カラーツール集です。すべてのツールはあなたのブラウザ内で完結します — ファイルのアップロードは行われず、サーバーへのデータ送信もなく、現在のセッションを超えて何も保存されません。

なぜクライアントサイドのみなのか

多くのデザインユーティリティは、技術的な必要がなくてもデータをサーバー経由で処理します。私たちは別のアプローチを取りました。計算、変換、描画のすべての処理をJavaScriptとCanvas APIを使ってブラウザ内で実行します。あなたの色、グラデーション、ファビコンがマシンを離れることはありません。

これはつまり、ページを読み込んだ後はオフラインでも動作し、レイテンシゼロで実行され、プライバシーを既定で尊重するということです。

できること

  • 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.

使用技術

MakeMyPaletteは Next.js、TypeScript、Tailwind CSSで構築されています。ソースコードは GitHub 上の File-Toolkits によってメンテナンスされています。

フィードバック

バグを見つけた、機能リクエストがある場合は GitHub repository にIssueを作成してください。プルリクエストも歓迎します。