# Colors

Ivy provides predefined colors with light/dark [theme](../../../01_Onboarding/02_Concepts/12_Theming.md) support.

The system includes neutral (Black, White, grayscale), chromatic (Red to Rose spectrum), and semantic (Primary, Secondary, Destructive, Success, Warning, Info) colors.

All colors meet WCAG accessibility standards and automatically adapt to light/dark themes. Use them with [widgets](../../../01_Onboarding/02_Concepts/03_Widgets.md) such as [Box](../../../02_Widgets/01_Primitives/04_Box.md) (`.Color()`, `.Background()`) and [Button](../../../02_Widgets/03_Common/01_Button.md) variants.

### All Colors

```csharp
public class AllColorsView : ViewBase
{
    public override object? Build()
    {
        Colors[] colors = Enum.GetValues<Colors>();
        
        return Layout.Vertical(
            colors.Select(color =>
                new Box(color.ToString())
                    .Width(Size.Auto())
                    .Height(10)
                    .Color(color).BorderRadius(BorderRadius.Rounded)
                    .Padding(3)
                    .ContentAlign(Align.Center)
            )
        );
    }
}
```

### Neutral Colors

```csharp
public class NeutralColorsView : ViewBase
{
    public override object? Build()
    {
        var neutralColors = new Colors[] { Colors.Black, Colors.White, Colors.Slate, Colors.Gray, Colors.Zinc, Colors.Neutral, Colors.Stone };
        
        return Layout.Vertical(
            neutralColors.Select(color =>
                new Box(color.ToString())
                    .Width(Size.Auto())
                    .Height(10)
                    .Color(color).BorderRadius(BorderRadius.Rounded)
                    .Padding(3)
                    .ContentAlign(Align.Center)
            )
        );
    }
}
```

### Chromatic Colors

```csharp
public class ChromaticColorsView : ViewBase
{
    public override object? Build()
    {
        var chromaticColors = new Colors[] { 
            Colors.Red, Colors.Orange, Colors.Amber, Colors.Yellow, Colors.Lime, Colors.Green, 
            Colors.Emerald, Colors.Teal, Colors.Cyan, Colors.Sky, Colors.Blue, Colors.Indigo, 
            Colors.Violet, Colors.Purple, Colors.Fuchsia, Colors.Pink, Colors.Rose 
        };
        
        return Layout.Vertical(
            chromaticColors.Select(color =>
                new Box(color.ToString())
                    .Width(Size.Auto())
                    .Height(10)
                    .Color(color).BorderRadius(BorderRadius.Rounded)
                    .Padding(3)
                    .ContentAlign(Align.Center)
            )
        );
    }
}
```

### Semantic Colors

```csharp
public class SemanticColorsView : ViewBase
{
    public override object? Build()
    {
        var semanticColors = new Colors[] { Colors.Primary, Colors.Secondary, Colors.Destructive, Colors.Success, Colors.Warning, Colors.Info };
        
        return Layout.Vertical(
            semanticColors.Select(color =>
                new Box(color.ToString())
                    .Width(Size.Auto())
                    .Height(10)
                    .Color(color).BorderRadius(BorderRadius.Rounded)
                    .Padding(3)
                    .ContentAlign(Align.Center)
            )
        );
    }
}
```

## Practical Examples

### Colors on Different Backgrounds

This example demonstrates how colors appear on both light and dark backgrounds:

```csharp
public class ColorsOnBackgroundsView : ViewBase
{
    public override object? Build()
    {
        Colors[] colors = Enum.GetValues<Colors>();

        object GenerateColors()
        {
            return Layout.Vertical(
                colors.Select(color =>
                    new Box(color.ToString())
                        .Width(Size.Auto())
                        .Height(10)
                        .Color(color).BorderRadius(BorderRadius.Rounded)
                        .Padding(3)
                        .ContentAlign(Align.Center)
                )
            );
        }

        var lightBackground = Layout.Vertical(
            Text.Block("Light Background").Color(Colors.Black),
            GenerateColors()
        ).Padding(10);

        var darkBackground = Layout.Vertical(
            Text.Block("Dark Background").Color(Colors.White),
            GenerateColors()
        ).Padding(10).Background(Colors.Black);

        return Layout.Grid().Columns(2)
            | lightBackground
            | darkBackground;
    }
}
```

### Common Usage Patterns

#### Status Indicators

```csharp
public class StatusIndicatorsView : ViewBase
{
    public override object? Build()
    {
        return Layout.Vertical(
            new Box("Success").Color(Colors.Success).Padding(5).BorderRadius(BorderRadius.Rounded).ContentAlign(Align.Center),
            new Box("Warning").Color(Colors.Warning).Padding(5).BorderRadius(BorderRadius.Rounded).ContentAlign(Align.Center),
            new Box("Error").Color(Colors.Destructive).Padding(5).BorderRadius(BorderRadius.Rounded).ContentAlign(Align.Center),
            new Box("Info").Color(Colors.Info).Padding(5).BorderRadius(BorderRadius.Rounded).ContentAlign(Align.Center)
        ).Gap(5);
    }
}
```

#### Button Colors

```csharp
public class ButtonColorsView : ViewBase
{
    public override object? Build()
    {
        return Layout.Vertical(
            new Button("Primary Action").Variant(ButtonVariant.Primary),
            new Button("Secondary Action").Variant(ButtonVariant.Secondary),
            new Button("Destructive Action").Variant(ButtonVariant.Destructive)
        ).Gap(10);
    }
}
```

## Best Practices

1. **Use semantic colors** for consistent UI patterns (Primary, Secondary, Destructive, Success, Warning, Info)
2. **Test on both backgrounds** to ensure proper contrast and readability
3. **Consider color meaning** - use red/destructive for errors, green for success
4. **Maintain consistency** - stick to a chosen color scheme throughout your project
5. **Accessibility first** - ensure proper contrast ratios for text and backgrounds

## Technical Implementation

Colors are defined as an enum in `Ivy.Shared.Colors` and map to CSS custom properties that automatically adapt to the current theme. Use [Align](Align.md) with `.ContentAlign()` when centering content inside colored elements. Each color includes variants for different states and theme modes.

```csharp
// Get all available colors dynamically
Colors[] colors = Enum.GetValues<Colors>();

// Using colors with widgets
new Box("Content")
    .Color(Colors.Primary)
    .Background(Colors.Secondary)
    .ContentAlign(Align.Center);
```