早速ですが皆さんはウェブ開発で下のようなカラーパレットを定義しておくとき皆さんはどのように定義していますか? 例えば下のようなコードを一つ一つカラーコードで定義している方も多いかと思います。 :root { --color-green-50: #E8F5F3; --color-green-100: #D1EBE7; --color-green-200: #A3D7D0; --color-green-300: #75C3B9; --color-green-400: #47AF9F; --color-green-500: #6AC1B7; --color-green-600: #4D8A7F; --color-green-700: #3A6A63; --color-green-800: #264A47; --color-green-900: #132B2B; } Figmaなどのデザインツール
![CSSのcolor-mix関数を使ってTailwind風のカラーパレットを作る](https://cdn-ak-scissors.b.st-hatena.com/image/square/6cb4f4209ad92dd74b4446cdc2f1580798e1c062/height=288;version=1;width=512/https%3A%2F%2Fstatic.mosya.dev%2Fblogs%2Fcolor-mix%2Fogp.png)