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

# Color

> Convert hex colors to rgba strings and pick from a curated palette of named simple colors.

`@ooneex/color` is a tiny color helper for the browser and server. It converts hex color codes into CSS `rgba()` strings (with optional alpha) and ships a fixed palette of pleasant, named colors you can use for tags, avatars, charts, and other UI accents.

## Installation

Add the package with Bun.

```bash theme={null}
bun add @ooneex/color
```

## Usage

Use `hexToRgba` to turn any hex code into an `rgba()` string. It accepts 3, 4, 6, or 8 digit hex (with or without a leading `#`) and returns `null` when the input is invalid.

```typescript theme={null}
import { hexToRgba } from "@ooneex/color";

hexToRgba("#3B82F6");        // "rgba(59, 130, 246, 1)"
hexToRgba("3B82F6");         // "rgba(59, 130, 246, 1)" (# is optional)
hexToRgba("#F00");           // "rgba(255, 0, 0, 1)" (shorthand expands)
hexToRgba("#3B82F6", 0.5);   // "rgba(59, 130, 246, 0.5)" (explicit alpha)
hexToRgba("#3B82F680");      // "rgba(59, 130, 246, 0.502)" (alpha from hex)

hexToRgba("not-a-color");    // null
hexToRgba("#3B82F6", 2);     // null (alpha must be between 0 and 1)
```

The package also exports a curated palette and a map of human-readable names. `SIMPLE_COLORS` is a readonly tuple of hex codes, and `SIMPLE_COLOR_NAMES` maps each one to its label.

```typescript theme={null}
import {
  SIMPLE_COLORS,
  SIMPLE_COLOR_NAMES,
  hexToRgba,
  type SimpleColorType,
} from "@ooneex/color";

// Pick a deterministic color for a label, then build a faded background.
const colorForTag = (tag: string): SimpleColorType => {
  const index = tag.length % SIMPLE_COLORS.length;
  return SIMPLE_COLORS[index];
};

const hex = colorForTag("billing");          // e.g. "#10B981"
const name = SIMPLE_COLOR_NAMES[hex];         // e.g. "Green"
const background = hexToRgba(hex, 0.12);      // "rgba(16, 185, 129, 0.12)"
```

## When to use it

* You need to apply a hex color with transparency in inline styles or canvas, e.g. `hexToRgba(hex, 0.2)` for hover/background tints.
* You want a small, consistent set of distinguishable colors for tags, categories, charts, or avatar backgrounds without hand-picking values.
* You need to safely validate and normalize user-supplied hex input (invalid values return `null` instead of throwing).
* You don't need it if you only ever use static CSS colors or a design system that already provides token-based color utilities.