これなら簡単で便利！ 色彩トーンを使ったUIデザインにぴったりな配色を生成するオンラインツール -Kigen Color Generator
Post on:2025年10月16日
sponsorsr
指定したカラーをベースにシェードのバリエーションを生成し、色彩トーンを使ったUIデザインにぴったりな配色を生成するオンラインツールを紹介します。
このツールのUIも非常に洗練されており、操作性も非常に快適です。
Kigen Color Generatorは、人気が高いデザインシステムから取得したプリミティブカラーパレットを用いてUIデザイン用のカラーを生成するジェネレーターです。
指定したカラーをベースにシェード、シェードとは暗清色で黒を加えた色（ちなみにティントは明清色で白を加えた色）、、最近のUIデザインでよく使用されている色彩トーンを使った配色をすぐに生成できます。
デザインシステムは、Tailwind CSSをはじめ、Radix UI, Ant Designなどが揃っており、ブランドに合わせてすぐに使用でき、拡張もできます。
アルゴリズムの一覧
#AD2840のカラーをベースに生成してみると、それぞれのデザインシステムで異なるのがよく分かります。
アルゴリズムによるカラーの比較
生成したカラーはコードで出力され、SVGファイルとしてダウンロードすることもできます。
カラーの出力
コードは、CSS, Tailwind CSS, Tailwind CSS 4, Tokensで出力されます。
カラーのコード
また、HEX値のほか、RGBa, HSL, OKLCHもサポートしています。
カラースペース
sponsors
