無料ツール
UI デザインに使える無料ツール。
画像の準備、色選び、コントラストの確認、DESIGN.md の作成など、Codex でデザインするときの日々の作業に役立つ、小さな無料ツールです。どれもブラウザ内で動き、アップロードも登録も不要です。
ツール一覧
- 画像変換ツール：PNG・JPG・WebPPNG、JPG、WebP の間で画像を一括変換し、ファイルサイズを比べられます。
- 画像からカラーパレットを抽出どんな画像からでも主な色を HEX コードで、多い順に取り出せます。
- WCAG 2.2 対応のコントラストチェッカー文字色と背景色が AA と AAA を満たすかをチェックします。
- DESIGN.md ジェネレーター色、フォント、余白を、Codex 用の DESIGN.md にまとめます。
- カラーパレットジェネレーター1 つの色から調和のとれた 5 色を作り、気に入った色をロックして、HEX、Tailwind、DESIGN.md としてコピーできます。
- Tailwind カラーパレットジェネレーター1 つの色を、OKLCH で計算した 50〜950 のスケールにして、Tailwind v4 の @theme ブロックで取り出せます。
- OKLCH カラー変換ツールHEX、rgb()、hsl() の色を OKLCH に、またその逆に変換し、sRGB の外にある色は警告します。
- shadcn テーマジェネレーター1 つの色から、ライブプレビュー付きで、ライトとダークの shadcn/ui テーマ一式を作ります。
ツールの組み合わせ方
- 写真、スクリーンショット、気に入ったモックアップなどの参考画像から色を抜き出すには、パレットツールを使います。
- その色の上で文字が読みやすいかを確認するには、コントラストチェッカーを使います。
- ジェネレーターですべてを DESIGN.md にまとめれば、Codex がすべての画面で同じ色、文字、余白を使います。
- 完成したページの画像を WebP に変換して、読み込みを速くします。