Mood

Mood gives you a designer-friendly layer over OKLab. Instead of asking users to pick exact colors, you can let them browse by terms like warm, earthy, serene, or luxe.

Reds, oranges, yellows - inviting and cozy

Temperature1.00

Lightness0.55

Generated preview paletteWarm

#aa7659

#b88a71

#976548

Center point

0.613, 0.050, 0.060

L range

0.46 -> 0.76

a / b range

0.01 -> 0.09 / 0.01 -> 0.11

import {
  computeMoodTarget,
  MOOD_PRESETS,
  regionToCenterPoint,
  slidersToOklabRegion,
} from "colorscope/mood";

Functions

slidersToOklabRegion

function slidersToOklabRegion(
  temperature: number,
  lightness: number
): OklabRegion

Map UI slider values into an OKLab region. Temperature spans cool to warm, while lightness spans dark to light.

regionToCenterPoint

function regionToCenterPoint(region: OklabRegion): {
  L: number;
  a: number;
  b: number;
}

Collapse a region into one representative search point for backends that expect a single anchor color.

computeMoodTarget

function computeMoodTarget(
  state: SearchTargetState
): PaletteTarget | NoSelectionTarget

Generate a small preview palette around the current mood settings. This is useful for browse UIs, chips, and server payload previews.

const target = computeMoodTarget({
  mode: "mood",
  moodPreset: "earthy",
  searchName: null,
  colorHex: null,
  paletteColors: [],
  paletteLogic: "all",
  gradientStart: null,
  gradientEnd: null,
  temperature: 0.7,
  lightness: 0.35,
});

Constants

MOOD_PRESETS

const MOOD_PRESETS: MoodPreset[]

Built-in presets include:

warm
cool
earthy
moody
bold
light-airy
natural
neutral
romantic
coastal
industrial
luxe
vintage
serene

Types

MoodPreset

interface MoodPreset {
  id: string;
  label: string;
  description: string;
  lightness: number;
  temperature: number;
  region: OklabRegion;
}

OklabRegion

interface OklabRegion {
  L: [number, number];
  a: [number, number];
  b: [number, number];
  chroma?: [number, number];
}