Helpers for UI color tuples, including the Tailwind CSS v4.2 palette.
These helpers return the tuple formats accepted by Emerge.UI color
attributes such as Background.color/1, Border.color/1, Font.color/1,
and Svg.color/1. Gradient values from gradient/2 work in all color
attributes, including shadow colors.
Tailwind palette values are derived from the official v4.2 OKLCH tokens and converted to stable sRGB byte tuples.
Examples
iex> Emerge.UI.Color.color(:sky)
{:color_rgb, {0, 188, 255}}
iex> Emerge.UI.Color.color(:rose, 300)
{:color_rgb, {255, 161, 173}}
iex> Emerge.UI.Color.color(:sky, 200, 0.3)
{:color_rgba, {184, 230, 254, 77}}
iex> Emerge.UI.Color.color_rgba(12, 34, 56, 0.5)
{:color_rgba, {12, 34, 56, 128}}Summary
Types
A single RGB or alpha byte channel.
Supported named colors.
An evenly spaced linear gradient with at least two solid stops.
Tuple accepted by Emerge.UI color attributes.
Supported Tailwind shade values.
Types
@type channel() :: 0..255
A single RGB or alpha byte channel.
@type color() ::
:slate
| :gray
| :zinc
| :neutral
| :stone
| :red
| :orange
| :amber
| :yellow
| :lime
| :green
| :emerald
| :teal
| :cyan
| :sky
| :blue
| :indigo
| :violet
| :purple
| :fuchsia
| :pink
| :rose
| :taupe
| :mauve
| :mist
| :olive
| :black
| :white
Supported named colors.
@type gradient() :: {:color_gradient, [solid_input()], number()}
An evenly spaced linear gradient with at least two solid stops.
Tuple accepted by Emerge.UI color attributes.
@type shade() :: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
Supported Tailwind shade values.
@type solid() :: rgb_tuple() | rgba_tuple()
Functions
Return a Tailwind or flat color tuple.
shade defaults to 400 and alpha uses CSS-style fractional
opacity from 0.0 to 1.0.
Opaque colors collapse to {:color_rgb, {r, g, b}}. Translucent colors return
{:color_rgba, {r, g, b, a}}.
Examples
iex> Emerge.UI.Color.color(:sky)
{:color_rgb, {0, 188, 255}}
iex> Emerge.UI.Color.color(:sky, 200, 0.3)
{:color_rgba, {184, 230, 254, 77}}
iex> Emerge.UI.Color.color(:black, 400, 0.5)
{:color_rgba, {0, 0, 0, 128}}Return a raw RGB tuple accepted by Emerge.UI color attributes.
Example
iex> Emerge.UI.Color.color_rgb(12, 34, 56)
{:color_rgb, {12, 34, 56}}@spec color_rgba(integer(), integer(), integer(), number()) :: rgba_tuple()
Return a raw RGBA tuple accepted by Emerge.UI color attributes.
alpha uses CSS-style fractional opacity from 0.0 to 1.0.
Example
iex> Emerge.UI.Color.color_rgba(12, 34, 56, 0.5)
{:color_rgba, {12, 34, 56, 128}}@spec gradient([solid_input()], number()) :: gradient()
Construct a linear gradient from at least two solid colors.
Stops are evenly spaced, in list order, and retain their alpha. angle is in
degrees: 0 points right and 90 points down. The gradient axis spans the
frame diagonal through its center; endpoints need not coincide with its edges.
Use the value anywhere a UI color is accepted: backgrounds, fonts, borders, shadows and SVG tint. Nested gradients are not supported.
Backgrounds, borders and shadows use the element's border box as the gradient reference. Text and SVGs use their content box. Paragraph/flow fragments share the paragraph's content box, and multiline text shares one box across lines; gradients do not restart at each glyph, word, border edge or SVG tile. Clips crop coverage without changing this reference. Transforms move the gradient with the element. SVG tint replaces source RGB while preserving source alpha.
Animated gradients require matching stop counts across keyframes. A solid endpoint is interpolated as identical stops at the other endpoint's angle.
Named atoms keep the renderer's existing named-color meaning; for Tailwind
palette colors use color/1, color/2, or color/3 instead of bare atoms.
Examples
iex> Emerge.UI.Color.gradient([:black, :white])
{:color_gradient, [:black, :white], 0}
iex> Emerge.UI.Color.gradient([:red, :green, :blue], 90)
{:color_gradient, [:red, :green, :blue], 90}