Colors & Fonts

1つのベースカラーから完全なカラースケールを生成したり、色彩理論に基づいた5色パレットを作成できるツール。リアルタイムのコントラストチェック、HSL編集、Tailwind v4・CSS・SCSS・Figmaトークンへのエクスポートに対応。

Summary

カラースケール生成とコントラストチェックを1つに

Colors & Fontsは、1つのベースカラーから完全なカラースケールを生成し、アクセシビリティ基準に沿ったコントラスト比をリアルタイムで確認できるツール。HSL値を直接編集しながらパレットを調整でき、色彩理論ベースの5色ハーモニーパレットも生成できる。

エクスポート形式がTailwind v4、CSS変数、SCSS、Figmaトークンと幅広く、デザインシステムのトークン定義にそのまま使える。フォントペアリングの提案機能やメッシュグラデーション生成もあり、配色とタイポグラフィをまとめて検討できる設計になっている。

URL: https://colorsandfonts.com/DATE: 2026年4月12日

珍しいアニメーション付きReactコンポーネントの無料・オープンソースなレジストリ。Tailwind CSS、Motion、shadcn CLIで作られていて、コピペして自分のコードにできる。

サイト、Webアプリ、モバイル、コンポーネント、フローのデザインチェックリスト集。細部まで確認して、より良いものを出す。

クリック直後の0.5秒を扱うReact向けマイクロインタラクション集。54個のコンポーネントを、部品の種類ではなく人が何の最中かで10セクションに分類。ソースをコピーして使い、依存はmotionだけ。

デザインのScopeを、
もっと広げよう。

noteメンバーシップで、デザインの深掘り記事を毎週配信。

チームへのデザイン導入・研修もご相談ください。