Scales

<Description>An overview of all Radix Colors scales.</Description>

Gray

{

<ColorScaleGroup> <ColorScale label="Gray" name="gray" /> <ColorScale label="Gray Alpha" name="grayA" /> <ColorScale label="Gray Dark" name="grayDark" /> <ColorScale label="Gray Dark Alpha" name="grayDarkA" /> </ColorScaleGroup>

}

Mauve

{

<ColorScaleGroup> <ColorScale label="Mauve" name="mauve" /> <ColorScale label="Mauve Alpha" name="mauveA" /> <ColorScale label="Mauve Dark" name="mauveDark" /> <ColorScale label="Mauve Dark Alpha" name="mauveDarkA" /> </ColorScaleGroup> }

Slate

{

<ColorScaleGroup> <ColorScale label="Slate" name="slate" /> <ColorScale label="Slate Alpha" name="slateA" /> <ColorScale label="Slate Dark" name="slateDark" /> <ColorScale label="Slate Dark Alpha" name="slateDarkA" /> </ColorScaleGroup>

}

Sage

{

<ColorScaleGroup> <ColorScale label="Sage" name="sage" /> <ColorScale label="Sage Alpha" name="sageA" /> <ColorScale label="Sage Dark" name="sageDark" /> <ColorScale label="Sage Dark Alpha" name="sageDarkA" /> </ColorScaleGroup>

}

Olive

{

<ColorScaleGroup> <ColorScale label="Olive" name="olive" /> <ColorScale label="Olive Alpha" name="oliveA" /> <ColorScale label="Olive Dark" name="oliveDark" /> <ColorScale label="Olive Dark Alpha" name="oliveDarkA" /> </ColorScaleGroup> }

Sand

{

<ColorScaleGroup> <ColorScale label="Sand" name="sand" /> <ColorScale label="Sand Alpha" name="sandA" /> <ColorScale label="Sand Dark" name="sandDark" /> <ColorScale label="Sand Dark Alpha" name="sandDarkA" /> </ColorScaleGroup>

}

Gold

{

<ColorScaleGroup> <ColorScale label="Gold" name="gold" /> <ColorScale label="Gold Alpha" name="goldA" /> <ColorScale label="Gold Dark" name="goldDark" /> <ColorScale label="Gold Dark Alpha" name="goldDarkA" /> </ColorScaleGroup>

}

Bronze

{

<ColorScaleGroup> <ColorScale label="Bronze" name="bronze" /> <ColorScale label="Bronze Alpha" name="bronzeA" /> <ColorScale label="Bronze Dark" name="bronzeDark" /> <ColorScale label="Bronze Dark Alpha" name="bronzeDarkA" /> </ColorScaleGroup>

}

Brown

{

<ColorScaleGroup> <ColorScale label="Brown" name="brown" /> <ColorScale label="Brown Alpha" name="brownA" /> <ColorScale label="Brown Dark" name="brownDark" /> <ColorScale label="Brown Dark Alpha" name="brownDarkA" /> </ColorScaleGroup>

}

Yellow

{

<ColorScaleGroup> <ColorScale label="Yellow" name="yellow" /> <ColorScale label="Yellow Alpha" name="yellowA" /> <ColorScale label="Yellow Dark" name="yellowDark" /> <ColorScale label="Yellow Dark Alpha" name="yellowDarkA" /> </ColorScaleGroup>

}

Amber

{

<ColorScaleGroup> <ColorScale label="Amber" name="amber" /> <ColorScale label="Amber Alpha" name="amberA" /> <ColorScale label="Amber Dark" name="amberDark" /> <ColorScale label="Amber Dark Alpha" name="amberDarkA" /> </ColorScaleGroup>

}

Orange

{

<ColorScaleGroup> <ColorScale label="Orange" name="orange" /> <ColorScale label="Orange Alpha" name="orangeA" /> <ColorScale label="Orange Dark" name="orangeDark" /> <ColorScale label="Orange Dark Alpha" name="orangeDarkA" /> </ColorScaleGroup>

}

Tomato

{

<ColorScaleGroup> <ColorScale label="Tomato" name="tomato" /> <ColorScale label="Tomato Alpha" name="tomatoA" /> <ColorScale label="Tomato Dark" name="tomatoDark" /> <ColorScale label="Tomato Dark Alpha" name="tomatoDarkA" /> </ColorScaleGroup>

}

Red

{

<ColorScaleGroup> <ColorScale label="Red" name="red" /> <ColorScale label="Red Alpha" name="redA" /> <ColorScale label="Red Dark" name="redDark" /> <ColorScale label="Red Dark Alpha" name="redDarkA" /> </ColorScaleGroup>

}

Ruby

{

<ColorScaleGroup> <ColorScale label="Ruby" name="ruby" /> <ColorScale label="Ruby Alpha" name="rubyA" /> <ColorScale label="Ruby Dark" name="rubyDark" /> <ColorScale label="Ruby Dark Alpha" name="rubyDarkA" /> </ColorScaleGroup>

}

Crimson

{

<ColorScaleGroup> <ColorScale label="Crimson" name="crimson" /> <ColorScale label="Crimson Alpha" name="crimsonA" /> <ColorScale label="Crimson Dark" name="crimsonDark" /> <ColorScale label="Crimson Dark Alpha" name="crimsonDarkA" /> </ColorScaleGroup> }

Pink

{

<ColorScaleGroup> <ColorScale label="Pink" name="pink" /> <ColorScale label="Pink Alpha" name="pinkA" /> <ColorScale label="Pink Dark" name="pinkDark" /> <ColorScale label="Pink Dark Alpha" name="pinkDarkA" /> </ColorScaleGroup>

}

Plum

{

<ColorScaleGroup> <ColorScale label="Plum" name="plum" /> <ColorScale label="Plum Alpha" name="plumA" /> <ColorScale label="Plum Dark" name="plumDark" /> <ColorScale label="Plum Dark Alpha" name="plumDarkA" /> </ColorScaleGroup>

}

Purple

{

<ColorScaleGroup> <ColorScale label="Purple" name="purple" /> <ColorScale label="Purple Alpha" name="purpleA" /> <ColorScale label="Purple Dark" name="purpleDark" /> <ColorScale label="Purple Dark Alpha" name="purpleDarkA" /> </ColorScaleGroup> }

Violet

{

<ColorScaleGroup> <ColorScale label="Violet" name="violet" /> <ColorScale label="Violet Alpha" name="violetA" /> <ColorScale label="Violet Dark" name="violetDark" /> <ColorScale label="Violet Dark Alpha" name="violetDarkA" /> </ColorScaleGroup> }

Iris

{

<ColorScaleGroup> <ColorScale label="Iris" name="iris" /> <ColorScale label="Iris Alpha" name="irisA" /> <ColorScale label="Iris Dark" name="irisDark" /> <ColorScale label="Iris Dark Alpha" name="irisDarkA" /> </ColorScaleGroup> }

Indigo

{

<ColorScaleGroup> <ColorScale label="Indigo" name="indigo" /> <ColorScale label="Indigo Alpha" name="indigoA" /> <ColorScale label="Indigo Dark" name="indigoDark" /> <ColorScale label="Indigo Dark Alpha" name="indigoDarkA" /> </ColorScaleGroup> }

Blue

{

<ColorScaleGroup> <ColorScale label="Blue" name="blue" /> <ColorScale label="Blue Alpha" name="blueA" /> <ColorScale label="Blue Dark" name="blueDark" /> <ColorScale label="Blue Dark Alpha" name="blueDarkA" /> </ColorScaleGroup> }

Cyan

{

<ColorScaleGroup> <ColorScale label="Cyan" name="cyan" /> <ColorScale label="Cyan Alpha" name="cyanA" /> <ColorScale label="Cyan Dark" name="cyanDark" /> <ColorScale label="Cyan Dark Alpha" name="cyanDarkA" /> </ColorScaleGroup> }

Teal

{

<ColorScaleGroup> <ColorScale label="Teal" name="teal" /> <ColorScale label="Teal Alpha" name="tealA" /> <ColorScale label="Teal Dark" name="tealDark" /> <ColorScale label="Teal Dark Alpha" name="tealDarkA" /> </ColorScaleGroup>

}

Jade

{

<ColorScaleGroup> <ColorScale label="Jade" name="jade" /> <ColorScale label="Jade Alpha" name="jadeA" /> <ColorScale label="Jade Dark" name="jadeDark" /> <ColorScale label="Jade Dark Alpha" name="jadeDarkA" /> </ColorScaleGroup>

}

Green

{

<ColorScaleGroup> <ColorScale label="Green" name="green" /> <ColorScale label="Green Alpha" name="greenA" /> <ColorScale label="Green Dark" name="greenDark" /> <ColorScale label="Green Dark Alpha" name="greenDarkA" /> </ColorScaleGroup>

}

Grass

{

<ColorScaleGroup> <ColorScale label="Grass" name="grass" /> <ColorScale label="Grass Alpha" name="grassA" /> <ColorScale label="Grass Dark" name="grassDark" /> <ColorScale label="Grass Dark Alpha" name="grassDarkA" /> </ColorScaleGroup> }

Lime

{

<ColorScaleGroup> <ColorScale label="Lime" name="lime" /> <ColorScale label="Lime Alpha" name="limeA" /> <ColorScale label="Lime Dark" name="limeDark" /> <ColorScale label="Lime Dark Alpha" name="limeDarkA" /> </ColorScaleGroup> }

Mint

{

<ColorScaleGroup> <ColorScale label="Mint" name="mint" /> <ColorScale label="Mint Alpha" name="mintA" /> <ColorScale label="Mint Dark" name="mintDark" /> <ColorScale label="Mint Dark Alpha" name="mintDarkA" /> </ColorScaleGroup>

}

Sky

{

<ColorScaleGroup> <ColorScale label="Sky" name="sky" /> <ColorScale label="Sky Alpha" name="skyA" /> <ColorScale label="Sky Dark" name="skyDark" /> <ColorScale label="Sky Dark Alpha" name="skyDarkA" /> </ColorScaleGroup>

}

---

Overlays

These scales are designed for overlays and don’t change across light and dark theme.

{

<ColorScaleGroup> <ColorScale label="Black Alpha" name="blackA" /> <ColorScale label="White Alpha" name="whiteA" /> </ColorScaleGroup>

}