Tritone

Map colors to three tones: shadows, midtones, highlights

Props

colorAstring

Default:#ce1bea

First color (used for shadows/darkest areas)

colorA

stringDefault: #ce1bea

First color (used for shadows/darkest areas)

colorBstring

Default:#2fff00

Second color (used for midtones)

colorB

stringDefault: #2fff00

Second color (used for midtones)

colorCstring

Default:#ffff00

Third color (used for highlights/brightest areas)

colorC

stringDefault: #ffff00

Third color (used for highlights/brightest areas)

blendMidnumber

Default:0.5

Midpoint position between the three colors

blendMid

numberDefault: 0.5

Midpoint position between the three colors

colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"

Default:linear

Color space for color interpolation

colorSpace

Color space for color interpolation

Usage

<Shader>
  <Tritone>
    <Circle />
  </Tritone>
</Shader>

<Shader>
  <Tritone>
    <Circle />
  </Tritone>
</Shader>

<Shader>
  <Tritone>
    <Circle />
  </Tritone>
</Shader>

<Shader>
  <Tritone>
    <Circle />
  </Tritone>
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Tritone', props: {}, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})

Trapezoid

Truchet

Documentation

Tritone

Props

Usage