Color Picker

Select colors on Fable and animate them

JJ Flax avatar
Written by JJ Flax
Updated over a week ago

The Color Picker is the space to play with color, define color format, create gradients, and develop color palettes. It's integral to designing color in Fable, so let's review.

  1. Gradient Mode: Gradual blending from one color to another. Click the dropdown to apply Solid, Linear, or Radial color as fill or stroke.

  2. Color Window: Drag the circle to adjust the saturation and brightness–the level of white and dark light mixed with the hue.

  3. Eyedropper: Pull and match colors directly from your project.

    • Select the layer you intend to change the color of

    • Select the Eyedropper tool

    • Click on a color within the canvas

    • Watch the originally selected layer adopt that color

  4. Hue Slider: Slide the circle to change the hue displayed in the Color Window.

  5. Opacity Slider: Adjust the transparency of a swatch with the Opacity slider. The left side will be completely transparent, while the right side will be completely opaque.

  6. Color Format: Click the dropdown for Hex, HSL, or RGB format.

  7. Color Palette: Create and name color palettes to save time working within a brand or theme.

    • Click the three dots on the right to create, rename, or delete a palette

    • Once you have named your palette, select a color

    • With your color selected, click the + sign

    • Repeat color selection and + until your palette is complete

    • Use throughout your project

Gradients

  1. Gradient Mode: Gradual blending from one color to another. Click the dropdown to apply Linear, or Radial color as fill or stroke.

  2. Angle: Change the direction of a linear gradient by adjusting the dial or typing an exact value.

  3. Gradient Slider: Control the colors and transition spacing within your gradient. Each color swatch (circle icon) represents a color step on the gradient

    • Change a swatch's color by selecting it on the slider

    • Adjust ordering or spacing between swatches by dragging the circle icons on the slider

    • Add a new color swatch by clicking the space between circle icons on the slider

    • Remove a color swatch by dragging it off the Gradient Slider

Animated Gradients

On Fable, you can animate gradient swatches and gradient modes. To do so, click they keyframe button next to your color swatch on the Inspector, and Fable will do the rest of the work.

You can animate between the following gradient modes:

  • SolidSolid

  • SolidLinear

  • SolidRadial

  • LinearLinear

  • LinearSolid

  • RadialRadial

  • RadialSolid

Did this answer your question?