MakeMyPalette

MakeMyPaletteについて

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

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

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

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

できること

  • カラーパレットジェネレーター — 任意のベースカラーから補色・類似色・トライアドなどの色相ハーモニーを生成。CSS 変数、Tailwind 設定、SCSS、JSON として書き出せます。
  • カラーフォーマット変換 — 任意の色の値を貼り付けると、HEX・RGB・RGBA・HSL・HSLA・HSV で即座に確認できます。任意のフォーマットをワンクリックでコピー。
  • コントラストチェッカー — 前景色と背景色のペアを、通常テキストと大きなテキストの WCAG 2.1 AA・AAA 要件に対して検査します。
  • カラーミキサー — RGB または HSL 空間で 2 色を任意の比率で混ぜ合わせ、HEX・RGB・HSL の値を即コピー。
  • 画像からのパレット抽出 — 画像をドロップして、メディアンカット量子化で主要な色を抽出。CSS 変数、Tailwind 設定、SCSS、JSON として書き出せます。
  • 色覚異常シミュレーター — 7 種類の色覚特性を通じてパレットを表示。赤と緑の見分けがつきにくい約 8% のユーザーにとって衝突するペアを発見します。
  • 色名ルックアップ — 知覚的な Lab 距離で任意の HEX に最も近い CSS 色名を特定、または任意の CSS キーワードの正確な HEX を逆引きします。
  • アクセシブルパレットジェネレーター — 任意のブランドカラーからトーンスケール (50–950) を構築し、各シェードの白・黒およびスケール内の他の色との WCAG AA/AAA コントラスト評価を確認できます。
  • グラデーションジェネレーター — 複数のカラーストップ、角度、リアルタイムプレビューで、線形・放射状・円錐の CSS グラデーションを作成。
  • Box Shadow ジェネレーター — オフセット・ブラー・スプレッド・カラー・インセットを完全制御しながら複数の box-shadow を重ねられます。CSS を即コピー。
  • Text Shadow ジェネレーター — ドロップシャドウ、ネオングロー、3D タイポ、レタープレス、ロングシャドウなどの text-shadow レイヤーを重ねられます。実テキストでプレビューして CSS をコピー。
  • CSS フィルタージェネレーター — blur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate、sepia を 1 つの CSS フィルターにまとめ、画像やテキスト上でライブプレビュー。
  • cubic-bezier イージングビジュアライザー — 2 つの制御点をドラッグしてカスタム cubic-bezier() イージングカーブを設計。ease、ease-in、ease-out と比較しながら、タイミングカーブがライブアニメーションを駆動する様子を確認できます。
  • Border Radius プレビュー — 4 つの角を個別に微調整するか、8 値の楕円構文を使用。形状がリアルタイムで更新されます。
  • Clip-Path メーカー — インタラクティブなエディタで clip-path ポリゴンを自由に描画、または三角形・六角形・矢印などのプリセットから開始できます。
  • ファビコンジェネレーター — 画像をアップロードするか文字ベースのアイコンを作成し、モダンブラウザや Web マニフェストで必要な PNG サイズをすべてダウンロードできます。

使用技術

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

フィードバック

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