SOURCE CODE: Color Gradient Tool

  
  
  
  
  
  
  
  
  
  
  
  







  
  UIZE JavaScript Framework



  

    JAVASCRIPT EXAMPLES
    Color Gradient Tool
    

      
SOURCE
    
  

  

  

    
The Color Gradient Tool provides a UI for visualizing and experimenting with color gradients. By applying different curve functions to different color components, color gradients can range from basic color transitions to sophisticated spectral patterns. Select a color gradient in the "PRESETS" tab. The preview on the left will update. To tweak the parameters for a color gradient preset, use the "PARAMS" tab. Use the "PREVIEW COLOR GRADIENT" button to preview the changes you make. Move the mouse over the gradient preview on the left and a tooltip will display information about the color you're over, and if you click you will get the hex value of that color in a prompt dialog so you can copy it to the clipboard.
  

  

  



White to Black, Pastel Stripes
  colorA: #fff
  colorB: #000
  curveRed: Uize.Curve.easeInOutPow (3)
  curveGreen: Uize.Curve.easeMiddlePow (2)
  curveBlue: Uize.Curve.Rubber.easeOutBounce (9,4,1)

White to Black, Through Teal Grays
  colorA: #fff
  colorB: #000
  curveRed: Uize.Curve.resolve (3)
  curveGreen: Uize.Curve.resolve (2)
  curveBlue: Uize.Curve.resolve (2)

White to Black, Through Pinks and Reds
  colorA: #fff
  colorB: #000
  curveRed: Uize.Curve.resolve (-8)
  curveGreen: Uize.Curve.resolve (5)
  curveBlue: Uize.Curve.resolve (-2)

White to Black, Through Yellows, Oranges, and Reds
  colorA: #fff
  colorB: #000
  curveRed: Uize.Curve.resolve (-10)
  curveGreen: Uize.Curve.resolve (-2)
  curveBlue: Uize.Curve.resolve (3)

White to Black, Through Pinks, Turquoise, and Greens
  colorA: #fff
  colorB: #000
  curveRed: Uize.Curve.easeInOutPow (2)
  curveGreen: Uize.Curve.easeMiddlePow (16)
  curveBlue: Uize.Curve.easeMiddlePow (2)

Pink Sunset, Blue Sky Through Pink Glow to Yellow Horizon
  colorA: #33f
  colorB: #ff6
  curveRed: Uize.Curve.resolve (1.5)
  curveGreen: Uize.Curve.resolve (-9)
  curveBlue: Uize.Curve.resolve (-2)

Hazy Sunset With Pollution
  colorA: #fef
  colorB: #322
  curveRed: Uize.Curve.easeMiddlePow (12)
  curveGreen: Uize.Curve.easeMiddlePow (2)
  curveBlue: Uize.Curve.easeInOutPow (2)

Peach To Green To Blue To Black
  colorA: #f95
  colorB: #000
  curveRed: Uize.Curve.Mod.bend (Uize.Curve.easeInOutPow (2),-1.5)
  curveGreen: Uize.Curve.Mod.bend (Uize.Curve.easeInOutPow (2),1.5)
  curveBlue: Uize.Curve.Mod.bend (Uize.Curve.easeInOutPow (2),6)

Peach To Fuchsia To Blue To Black
  colorA: #fc5
  colorB: #000
  curveRed: Uize.Curve.Mod.bend (Uize.Curve.easeInOutPow (2),1.5)
  curveGreen: Uize.Curve.Mod.bend (Uize.Curve.easeInOutPow (2),-2)
  curveBlue: Uize.Curve.Mod.bend (Uize.Curve.easeInOutPow (2),10)

Pink to Violet, Banded
  colorA: #f09
  colorB: #50f
  curveRed: Uize.Curve.linear
  curveGreen: Uize.Curve.linear
  curveBlue::
    Uize.Curve.Mod.blend (
      Uize.Curve.easeMiddleCircular (3.5),
      Uize.Curve.easeInOutCircular (3.5),
      Uize.Curve.Mod.repeat (
        Uize.Curve.easeInOutCircular (7),
        31,   // repeats (0-Infinity), odd to end at 1
        0,    // stairs degree (0-1)
        true  // alternating flip horizontal
      )
    )

White to Black, Neon Glow
  colorA: #fff
  colorB: #000
  curveRed::
    Uize.Curve.Mod.repeat (
      1,    // curve function (1 == linear)
      5,    // repeats (0-Infinity), odd to end at 1
      0,    // stairs degree (0-1)
      true  // alternating flip horizontal
    )
  curveGreen::
    Uize.Curve.Mod.repeat (
      1,    // curve function (1 == linear)
      7,    // repeats (0-Infinity), odd to end at 1
      0,    // stairs degree (0-1)
      true  // alternating flip horizontal
    )
  curveBlue::
    Uize.Curve.Mod.repeat (
      1,    // curve function (1 == linear)
      21,    // repeats (0-Infinity), odd to end at 1
      0,    // stairs degree (0-1)
      true  // alternating flip horizontal
    )

Cyan to Dark Blue, Expanding Ripples
  colorA: #0ff
  colorB: #003
  curveRed: null
  curveGreen: Uize.Curve.Rubber.easeOutBounce (10,2,.5,-2)
  curveBlue: Uize.Curve.Rubber.easeOutBounce (15,2,.8,-2)

Cyan to Dark Blue, Irregular Ripples
  colorA: #0ff
  colorB: #003
  curveRed: null
  curveGreen: Uize.Curve.Rubber.easeOutBounce (10,5,1.4,-3)
  curveBlue: Uize.Curve.Rubber.easeOutBounce (15,2,.8,2)

Violet Blue Ripples
  colorA: #6af
  colorB: #f09
  curveRed: Uize.Curve.Rubber.easeOutBounce (7,2,1,4)
  curveGreen: Uize.Curve.Rubber.easeOutBounce (15,2,1,-2)
  curveBlue: Uize.Curve.Rubber.easeOutBounce (9,2,1,4)

Candy Cane
  colorA: #fff
  colorB: #600
  curveRed: Uize.Curve.resolve (-10)
  curveGreen::
    Uize.Curve.Mod.blend (
      Uize.Curve.Rubber.easeOutBounce (
        12,
        2,
        1,
        Uize.Curve.easeInOutPow (10)
      ),
      Uize.Curve.Rubber.easeOutBounce (
        100,
        2,
        .99,
        Uize.Curve.easeInOutPow (20)
      ),
      .2
    )
  curveBlue::
    Uize.Curve.Mod.blend (
      Uize.Curve.Rubber.easeOutBounce (
        12,
        2,
        1,
        Uize.Curve.easeInOutPow (10)
      ),
      Uize.Curve.Rubber.easeOutBounce (
        100,
        2,
        .99,
        Uize.Curve.easeInOutPow (20)
      ),
      .2
    )

Light to Dark Teal, Ribbed in Middle
  colorA: #9ff
  colorB: #045
  curveRed::
    Uize.Curve.makeEaseInOut (
      Uize.Curve.Mod.repeat (
        [
          Uize.Curve.easeInOutPow (3),
          Uize.Curve.Rubber.easeInElastic (
            .2,  // period (0-Infinity)
            4    // amplitude (1-Infinity)
          )
        ],
        2,  // repeats (0-Infinity)
        1   // stairs degree (0-1)
      )
    )
  curveGreen::
    Uize.Curve.makeEaseInOut (
      Uize.Curve.Mod.repeat (
        [
          Uize.Curve.easeInOutPow (3),
          Uize.Curve.Rubber.easeInElastic (
            .2,  // period (0-Infinity)
            2    // amplitude (1-Infinity)
          )
        ],
        2,  // repeats (0-Infinity)
        1   // stairs degree (0-1)
      )
    )
  curveBlue::
    Uize.Curve.makeEaseInOut (
      Uize.Curve.Mod.repeat (
        [
          Uize.Curve.easeInOutPow (9),
          Uize.Curve.Rubber.easeInElastic (
            .2,  // period (0-Infinity)
            1    // amplitude (1-Infinity)
          )
        ],
        2,  // repeats (0-Infinity)
        1   // stairs degree (0-1)
      )
    )

Peach to Red With Black Lines
  colorA: #f95
  colorB: #000
  curveRed: Uize.Curve.Rubber.easeInElastic (.01,4)
  curveGreen: Uize.Curve.linear
  curveBlue: Uize.Curve.linear