Files
modeling-app/docs/kcl-std/functions/std-appearance-hexString.md
Adam Chalmers 1f53dd1357 KCL: [number; 3] to RGB hex string color function (#7184)
Closes https://github.com/KittyCAD/modeling-app/issues/6805. Enables users to programatically construct colors, which will be helpful for 

- Applying color to visualize program execution and help debugging
- Doing weird cool shit
2025-05-23 13:53:58 -05:00

431 KiB

title, subtitle, excerpt, layout
title subtitle excerpt layout
appearance::hexString Function in std::appearance manual
appearance::hexString(@rgb: [number(_); 3]): string

Build a color from its red, green and blue components. These must be between 0 and 255.

Arguments

Name Type Description Required
rgb [number(_); 3] Yes

Returns

string - A sequence of characters

Examples

startSketchOn(-XZ)
  |> circle(center = [0, 0], radius = 10)
  |> extrude(length = 4)
  |> appearance(color = appearance::hexString([50, 160, 160]))

Rendered example of appearance::hexString 0

sideLen = 30
n = 10

// The cubes become more green and less blue with each instance.
fn cube(i, center) {
  g = 255 / n * i
  b = 255 / n * (n - i)
  return startSketchOn(XY)
    |> polygon(radius = sideLen / 2, numSides = 4, center = [center, 0])
    |> extrude(length = sideLen)
    |> appearance(color = appearance::hexString([0, g, b]), metalness = 80, roughness = 20)
}

// Create n cubes, shifting each one over in a line.
map(
  [0..n],
  f = fn(@i) {
    return cube(i, center = sideLen * i * 1.5)
  },
)

Rendered example of appearance::hexString 1

sideLen = 30
n = 6

fn cube(offset, i, red) {
  x = floor(i / n)
  y = rem(i, divisor = n)
  g = 255 / n * x
  b = 255 / n * y
  return startSketchOn(offsetPlane(XZ, offset))
    |> circle(diameter = sideLen, center = [sideLen * x * 1.5, sideLen * y * 1.5])
    |> extrude(length = sideLen)
    |> appearance(color = appearance::hexString([red, g, b]), metalness = 80, roughness = 40)
}

fn grid(offset, red) {
  return map(
    [0 ..< n * n],
    f = fn(@i) {
      return cube(offset, i, red)
    },
  )
}

grid(offset = 0, red = 0)

Rendered example of appearance::hexString 2