> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Color

> A color value that can be used as a standalone view or as a style for fills, foregrounds, and backgrounds.

export const PlatformStatuses = ({statuses}) => {
  const StatusBadge = ({status, label}) => {
    const styles = {
      green: {
        backgroundColor: '#dcfce7',
        color: '#166534'
      },
      orange: {
        backgroundColor: '#fed7aa',
        color: '#9a3412'
      },
      red: {
        backgroundColor: '#fecaca',
        color: '#991b1b'
      },
      gray: {
        backgroundColor: '#f3f4f6',
        color: '#4b5563'
      }
    };
    const baseStyle = {
      display: 'inline-flex',
      alignItems: 'center',
      padding: '0.125rem 0.625rem',
      borderRadius: '9999px',
      fontSize: '0.875rem',
      fontWeight: '500'
    };
    const colorStyle = styles[status] || styles.green;
    return <span style={{
      ...baseStyle,
      ...colorStyle
    }}>
        {label || status}
      </span>;
  };
  const STATUS_CONFIG = {
    supported: {
      label: "Supported",
      color: "green"
    },
    partial: {
      label: "Partial",
      color: "orange"
    },
    "not-implemented": {
      label: "Not Implemented",
      color: "gray"
    }
  };
  const renderCard = (platform, value) => {
    if (!value) return null;
    const {status, note} = typeof value === "string" ? {
      status: value
    } : value;
    const config = STATUS_CONFIG[status];
    if (!config) return null;
    const titleMap = {
      ios: "SwiftUI",
      android: "Jetpack Compose",
      web: "Web"
    };
    return <Card key={platform} title={titleMap[platform] || platform}>
          <StatusBadge status={config.color} label={config.label} />
          {note && <div style={{
      marginTop: '0.5rem',
      fontSize: '0.875rem',
      color: '#6b7280'
    }}>
              {note}
            </div>}
      </Card>;
  };
  if (statuses == null) {
    return null;
  }
  return <Columns cols="3">
      {Object.entries(statuses).map(([platform, value]) => renderCard(platform, value))}
    </Columns>;
};

export const ComposeJS = ({code, name, height}) => {
  const encodedCode = useMemo(() => {
    if (!code) return "";
    try {
      return btoa(code);
    } catch (e) {
      console.error("Failed to encode code", e);
      return "";
    }
  }, [code]);
  if (!encodedCode) {
    return null;
  }
  return <iframe src={`https://www.metabind.ai/embed?code=${encodedCode}&name=${name ?? 'Example'}`} loading="lazy" style={{
    width: "100%",
    height: height || '350px',
    border: "1px solid #e5e7eb",
    borderRadius: "var(--rounded-2xl,1rem)",
    overflow: "hidden"
  }} title="ComposeJS Preview" />;
};

```typescript theme={null}
Color(props?: ColorProps): Color;
```

<ParamField path="props" type="ColorProps" optional>
  Color specification. Accepts multiple formats:

  * **Named colors**: `"red"`, `"blue"`, `"green"`, `"orange"`, `"yellow"`, `"mint"`, `"teal"`, `"cyan"`, `"indigo"`, `"purple"`, `"pink"`, `"brown"`, `"black"`, `"white"`, `"gray"`, `"clear"`
  * **Semantic colors**: `"primary"`, `"secondary"`, `"tertiary"`, `"quaternary"`, `"accent"`, `"background"` -- adapt to light/dark mode
  * **Label colors**: `"label"`, `"secondaryLabel"`, `"tertiaryLabel"`, `"quaternaryLabel"`, `"placeholderText"`, `"link"`
  * **System grays**: `"systemGray"`, `"systemGray2"`, `"systemGray3"`, `"systemGray4"`, `"systemGray5"`, `"systemGray6"`
  * **Backgrounds**: `"systemBackground"`, `"secondarySystemBackground"`, `"tertiarySystemBackground"`, `"systemGroupedBackground"`, `"secondarySystemGroupedBackground"`, `"tertiarySystemGroupedBackground"`
  * **Fills**: `"systemFill"`, `"secondarySystemFill"`, `"tertiarySystemFill"`, `"quaternarySystemFill"`
  * **Separators**: `"separator"`, `"opaqueSeparator"`
  * **Hex strings**: `"#FF5500"`
  * **RGB object (0-1 range)**: `{ r: 0.5, g: 0.3, b: 0.9 }` or `{ red: 0.5, green: 0.3, blue: 0.9, alpha: 1 }`
  * **HSL object**: `{ h: 240, s: 0.8, b: 0.5 }` or `{ hue: 240, saturation: 0.8, brightness: 0.5 }`
  * **ARGB integer**: `0xFFFF5500`
</ParamField>

## Methods

### opacity

Returns a new color with the specified opacity.

```typescript theme={null}
.opacity(value: number): Color
```

<ParamField path="value" type="number">
  Opacity between 0 (fully transparent) and 1 (fully opaque).
</ParamField>

## Support

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: { status: "partial", note: "HSL format, label colors, system grays, system backgrounds, fills, and separators not implemented" },
web: { status: "supported" },
}}
/>

## Usage

### As a standalone view

`Color` can be used directly as a view that fills its frame:

```typescript theme={null}
Color("blue")
    .frame({ width: 100, height: 100 })
    .cornerRadius(8)
```

### Named colors

```typescript theme={null}
Color("red")
Color("blue")
Color("green")
Color("clear")
```

### Semantic colors

Semantic colors adapt to the current light/dark mode:

```typescript theme={null}
Color("primary")
Color("secondary")
Color("accent")
Color("background")
```

### System semantic colors

Additional semantic colors for common UI patterns -- all adapt to light/dark mode:

```typescript theme={null}
Color("label")
Color("secondaryLabel")
Color("systemGray3")
Color("systemBackground")
Color("secondarySystemBackground")
Color("separator")
Color("systemFill")
```

### Hex colors

```typescript theme={null}
Color("#FF5733")
Color("#00AAFF")
```

### RGB colors

```typescript theme={null}
Color({ r: 0.5, g: 0.3, b: 0.9 })
Color({ r: 1, g: 0.34, b: 0.2, a: 0.5 })
Color({ red: 0.5, green: 0.3, blue: 0.9, alpha: 1 })
```

### HSL colors

```typescript theme={null}
Color({ h: 210, s: 0.8, b: 0.9 })
Color({ hue: 210, saturation: 0.8, brightness: 0.9 })
```

### With opacity

```typescript theme={null}
Color("blue").opacity(0.5)
Color("#FF5733").opacity(0.3)
```

### As a style value

Colors are used with style-accepting modifiers like `.foregroundStyle()`, `.background()`, and `.fill()`:

```typescript theme={null}
Text("Hello World")
    .foregroundStyle(Color("red"))

Rectangle()
    .fill(Color("purple"))
    .frame({ width: 100, height: 100 })

VStack([
    Text("Content")
])
.background(Color("blue").opacity(0.1))
```