Smart Chroma generates a color palette based on human vision.

If you create a color palette using a generic color space, the saturation and lightness of the appearance will appear to vary simply by changing the hue. This is because the saturation and lightness of the color space do not take human vision into account. This tool allows you to instantly and easily generate a color palette that takes human vision into account.

This tool is inspired by Color Space and uses the HCT color space internally. Source code available on GitHub.

Just install it from the Figma Community.

First, run the following command.

npm install
npm run build

Second, set up a local server and open site/dist/index.html.

Here is a list of commands you can use during development.

npm run build
npm run dev # Watch all files
npm run serve # Watch only the site files and start a local server
npm run lint
npm run format
npm run format:check

• The Science of Color & Design - Material Design
• Color Space: First plugin with HCT | Figma Community
• material-color-utilities/typescript at main · material-foundation/material-color-utilities
• Anatomy of Dynamic color | DroidKaigi 2022 - inSmartBank
• L*a*b*値が同じなのに色が違うこともある？　CIELABは白基準で変わる | カラーマネジメント実践ブログ 〜フォトレタッチの現場から〜
• Node.js v19 の主な変更点 - 別にしんどくないブログ
• 【JavaScript】「html-to-image」ライブラリを使って指定した要素をSVG画像に変換する – 株式会社シーポイントラボ ｜ 浜松のシステム・RTK-GNSS開発
• bubkoo/html-to-image: ✂️ Generates an image from a DOM node using HTML5 canvas and SVG.