;

Colors API

Fluffle provides a built-in Colors API for authoring colors directly in JavaScript while staying fully compatible with React Native.

It includes helpers for modern and familiar color spaces: oklch(), rgb(), hsl(), and hwb().

Basic usage

Import Colors from Fluffle and use its helpers inside your style objects.

ts 
import { StyleSheet, Colors } from '@bibliolab/react-native-fluffle';

const { oklch, hsl, rgb, hwb } = Colors;

const styles = StyleSheet.create({
  title: {
    color: oklch(0.65, 0.1233, 348.23),
  },
  subtitle: {
    color: hsl(220, 18, 35),
  },
  badge: {
    backgroundColor: rgb(37, 99, 235),
  },
  muted: {
    color: hwb(220, 20, 30),
  },
});

Available helpers

ts 
Colors.oklch(l, c, h, alpha?)
Colors.hsl(h, s, l, alpha?)
Colors.rgb(r, g, b, alpha?)
Colors.hwb(h, w, b, alpha?)
  • oklch() — Lightness / chroma / hue angle
  • hsl() — Hue / saturation / lightness
  • rgb() — Red / green / blue channels
  • hwb() — Hue angle / whiteness / blackness

Why use the Colors API?

  • Write color values with a typed JavaScript API instead of raw strings
  • Keep color declarations consistent across your codebase
  • Use modern color spaces like oklch() in React Native projects
  • Let Fluffle handle platform-specific color serialization for you

How it works

  • Color helper values are transformed automatically at runtime
  • rgb() values are serialized to rgb(...) or rgba(...) strings
  • hsl() values are serialized to hsl(...) or hsla(...) strings
  • oklch() values are serialized as native CSS oklch(...) on web
  • On native, oklch() values are converted to hex or hex8 color strings for React Native compatibility
  • All helpers ultimately resolve to valid React Native ColorValue values

OKLCH

oklch() is Fluffle's flagship color helper. It uses the Oklab color space, and is designed to be more perceptually uniform than traditional RGB- or HSL-based color systems.

ts 
Colors.oklch(l: number, c: number, h: number, alpha?: number)
  • l — Lightness, from 0 to 1
  • c — Chroma, which controls color intensity
  • h — Hue angle, typically from 0 to 360
  • alpha — Optional opacity value from 0 to 1 (default: 1)

Why oklch?

  • More perceptually uniform than RGB/HSL
  • Easier to build consistent design systems
  • Better control over lightness-based scaling
  • Improved theme generation and accessibility

HSL

hsl() is useful when you want to work with hue, saturation, and lightness directly, especially for theme variations and state colors.

ts 
Colors.hsl(h: number, s: number, l: number, alpha?: number)
  • h — Hue angle, typically from 0 to 360
  • s — Saturation percentage, from 0 to 100. Pass the numeric value only, without the % symbol.
  • l — Lightness percentage, from 0 to 100. Pass the numeric value only, without the % symbol.
  • alpha — Optional opacity value from 0 to 1 (default: 1)

RGB

rgb() provides a straightforward channel-based API for red, green, and blue color values, with optional alpha support.

ts 
Colors.rgb(r: number, g: number, b: number, alpha?: number)
  • r — Red channel, from 0 to 255
  • g — Green channel, from 0 to 255
  • b — Blue channel, from 0 to 255
  • alpha — Optional opacity value from 0 to 1 (default: 1)

HWB

hwb() expresses a color using hue, whiteness, and blackness. It can be a convenient alternative to HSL when building tonal palettes.

ts 
Colors.hwb(h: number, w: number, b: number, alpha?: number)
  • h — Hue angle, typically from 0 to 360
  • w — Whiteness percentage, from 0 to 100. Pass the numeric value only, without the % symbol.
  • b — Blackness percentage, from 0 to 100. Pass the numeric value only, without the % symbol.
  • alpha — Optional opacity value from 0 to 1 (default: 1)

Notes

  • All color helper values are resolved automatically at runtime
  • No manual conversion is required before passing them to React Native styles
  • All helpers can be used anywhere a React Native color value is accepted
  • Fluffle color helpers use normal JavaScript function syntax, so arguments must be comma-separated, not space-separated:
    ts 
    oklch(0.65, 0.12, 240, 0.5)
hsl(220, 18, 35, 0.8)
rgb(37, 99, 235)
hwb(220, 20, 30)
  • This differs from CSS color function syntax, where functions such as oklch() and hwb() are commonly written with space-separated values
  • For helpers based on CSS percentage values—such as hsl() and hwb()— pass plain numbers instead of percentage strings. For example, use hsl(220, 18, 35), not hsl(220, 18%, 35%).