カスタムRadix Colorsパレットの作成方法を学びましょう。
カスタムカラーパレットツール を使用して、いくつかの参照カラーに基づいてRadix Colorsスケールを生成します。結果に満足したら、生成されたCSSをプロジェクトに貼り付け、通常のRadix Colorsスケールと同じように使用します。
生成されたスケールはRadix Colorsスケール自体に基づいているため、同様のコンポーネントデザインと良好に動作します。妥当な背景色を使用する限り、コントラスト比はRadix Colorsが提供するものと同様になります。
カスタムカラーパレットには、Radix Colorsのステップ1～12と、それらのアルファバリアント、および広色域カラー定義が含まれます。広色域カラー定義は、AppleのP3に対応したディスプレイなど、広色域カラー空間でアルファカラーがフルサチュレーションで表示されるようにするために必要です。これは、アルファブレンドがP3とsRGBで異なるためです。
スケールの理解ガイドで、基本パレット構成について説明します。生成されたCSSには、Radix Themesで専ら使用されるいくつかの追加カラー（例：）も含まれています。
variant="surface"コンポーネントで使用されるサーフェースカラー必要のないカラーは、生成されたCSSから削除してください。
入力フィールドには、一般的なCSSカラーフォーマット、またはcolor(display-p3 1 0.5 0)などの広色域カラー空間を使用できます。生成されたCSSには、最も近いsRGBフォールバックが提供されます。
ダークテーマカラーを生成するには、ウェブサイトヘッダーで外観をダークに切り替えます。生成されたCSSは、ライトテーマのカラーオーバーライドの後から貼り付けてください。