[Index]

Color Formats


Detailed infomation about the Color Formats suppported by the framwork. Used in ColorPropertyType

Name Format Description Example of valid values Notes Links
HexAlphaColorFormat
  • RRGGBBAA
  • 0xRRGGBBAA
  • 0#RRGGBBAA
  • RR: Red channel. is a hex number of digits between '00' and 'FF'
  • GG: Green channel. is a hex number of digits between '00' and 'FF'
  • BB: Blue channel. is a hex number of digits between '00' and 'FF'
  • AA: Alpha channel. is a hex number of digits between '00' and 'FF'
  • #00000000
  • #FFFFFFFF
  • #aabbccdd
  • #337799ff
  • 0x00000000
  • 0xFFFFFFFF
  • 0xaabbccdd
  • 0x337799ff
  • 00000000
  • FFFFFFFF
  • aabbccdd
  • 337799ff
 		Not an official format, as HexColorFormat just added the AA field.
HexColorFormat
  • RRGGBB
  • 0xRRGGBB
  • 0#RRGGBB
  • RR: Red channel. is a hex number of digits between '00' and 'FF'
  • GG: Green channel. is a hex number of digits between '00' and 'FF'
  • BB: Blue channel. is a hex number of digits between '00' and 'FF'
  • #000000
  • #FFFFFF
  • #aabbcc
  • #337799
  • 0x000000
  • 0xFFFFFF
  • 0xaabbcc
  • 0x337799
  • 000000
  • FFFFFF
  • aabbcc
  • 337799
 		 
CMYKColorFormat
  • cmyk(cyan,magenta,yellow,key(black))
  • cyan : A float - Ranges from 0.0 to 1.0 (both inclusive).
  • magenta : A float - Ranges from 0.0 to 1.0 (both inclusive).
  • yellow : A float - Ranges from 0.0 to 1.0 (both inclusive).
  • key(black) : A float - Ranges from 0.0 to 1.0 (both inclusive).
  • cmyk(0.8063,0.3874,0,0.2510)
  • cmyk(0,0,0,1)
  • cmyk(0,0,0,0.7490)
  • cmyk(0,0.2157,1,0)
  • cmyk(0,0,0,0)
  • Extends TupleColorFormat
    		•
    HSBAColorFormat
    • hsba(hue,saturation,brightness,alpha)
    • Hue : A float - Ranges from 0.0 to 360.0 (both inclusive) in most applications.
      each value corresponds to one color : 0 is red, 45 is a shade of orange and 55 is a shade of yellow.
    • Saturation : A float - the intensity of the color. Ranges from 0.0 to 100.0% (both inclusive)
      0 means no color, that is a shade of grey between black and white; 100 means intense color.
    • Brightness : A float - the brightness of the color. Ranges from 0.0 to 100.0% (both inclusive)
      0 is always black; depending on the saturation, 100 may be white or a more or less saturated color.
    • Alpha : A float - the uniform opacity setting.
      Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque)
      will be clamped to this range. (both inclusive).
    • hsba(355.2,82.7% ,89.01%,1.0)
    • hsba(124.2,78.42% ,78.14%,0.43)
    • hsba(234.8,80.05%,84.7%,0.90)
  • Extends TupleColorFormat
    		•
    HSBColorFormat
    • hsb(hue,saturation,brightness)
    • Hue : A float - Ranges from 0.0 to 360.0 (both inclusive) in most applications.
      each value corresponds to one color : 0 is red, 45 is a shade of orange and 55 is a shade of yellow.
    • Saturation : A float - the intensity of the color. Ranges from 0.0 to 100.0% (both inclusive)
      0 means no color, that is a shade of grey between black and white; 100 means intense color.
    • Brightness : A float - the brightness of the color. Ranges from 0.0 to 100.0% (both inclusive)
      0 is always black; depending on the saturation,
      100 may be white or a more or less saturated color.
    • hsb(355.2,82.7% ,89.01%)
    • hsb(124.2,78.42% ,78.14%)
    • hsb(234.8,80.05%,84.7%)
  • Extends TupleColorFormat
  • HSBA and HSVA are equivalent only differs in name.
    		•
    HSLAColorFormat
    • hsla(hue,saturation,lightness,alpha)
    • Hue (float)A float - Hue is represented as an angle of the color circle (i.e. the rainbow represented in a circle).
      This angle is so typically measured in degrees that the unit is implicit in CSS;
      syntactically, only a is given.
      By definition red=0=360, and the other colors are spread around the circle, so green=120, blue=240, etc.
      As an angle, it implicitly wraps around such that -120=240 and 480=120.
    • Saturation A float - Saturation is represented as percentages. 100% is full saturation, and 0% is a shade of gray.
    • Lightness A float - Lightness is represented as percentages. 0% lightness is black, 100% lightness is white,
      and 50% lightness is "normal".
    • Alpha : A float - the uniform opacity setting. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque)
      will be clamped to this range. (both inclusive).
    • hsla(45.2,88.121%,99.112%,0.082)
    • hsla(0,0%,0%,1)
    • hsla(360,100%,100%,1.0)
    • hsla(200 ,78%, 5%,0.55)
    • hsla(360,22%,33%,1)
    • hsla(99,0%,66%,0.1)
  • Extends TupleColorFormat
    		•
    HSLColorFormat
    • hsl(hue,saturation,lightness)
    • Hue (float)A float - Hue is represented as an angle of the color circle (i.e. the rainbow represented in a circle).
      This angle is so typically measured in degrees that the unit is implicit in CSS;
      syntactically, only a is given.
      By definition red=0=360, and the other colors are spread around the circle, so green=120, blue=240, etc.
      As an angle, it implicitly wraps around such that -120=240 and 480=120.
    • Saturation A float - Saturation is represented as percentages. 100% is full saturation, and 0% is a shade of gray.
    • Lightness A float - Lightness is represented as percentages. 0% lightness is black, 100% lightness is white,
      and 50% lightness is "normal".
    • hsl(45.2,88.121%,99.112%)
    • hsl(0,0%,0%)
    • hsl(360,100%,100%)
    • hsl(200 ,78%, 5%)
    • hsl(360,22%,33%)
    • hsl(99,0%,66%)
  • Extends TupleColorFormat
    		•
    HSVAColorFormat
    • hsva(hue,saturation,value,alpha)
    • Hue : A float - Ranges from 0.0 to 360.0 (both inclusive) in most applications.
      each value corresponds to one color : 0 is red, 45 is a shade of orange and 55 is a shade of yellow.
    • Saturation : A float - the intensity of the color. Ranges from 0.0 to 100.0% (both inclusive)
      0 means no color, that is a shade of grey between black and white; 100 means intense color.
    • Value : A float - the brightness of the color. Ranges from 0.0 to 100.0% (both inclusive)
      0 is always black; depending on the saturation, 100 may be white or a more or less saturated color.
    • Alpha : A float - the uniform opacity setting.
      Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque)
      will be clamped to this range. (both inclusive).
    • hsva(355.2,82.7% ,89.01%,1.0)
    • hsva(124.2,78.42% ,78.14%,0.43)
    • hsva(234.8,80.05%,84.7%,0.90)
  • Extends HSBAColorFormat
  • HSBA and HSVA are equivalent only differs in name.
    		•
    HSVColorFormat
    • hsv(hue,saturation,value)
    • Hue : A float - Ranges from 0.0 to 360.0 (both inclusive) in most applications.
      each value corresponds to one color : 0 is red, 45 is a shade of orange and 55 is a shade of yellow.
    • Saturation : A float - the intensity of the color. Ranges from 0.0 to 100.0% (both inclusive)
      0 means no color, that is a shade of grey between black and white; 100 means intense color.
    • Value : A float - the brightness of the color. Ranges from 0.0 to 100.0% (both inclusive)
      0 is always black; depending on the saturation, 100 may be white or a more or less saturated color.
    • hsv(355.2,82.7% ,89.01%)
    • hsv(124.2,78.42% ,78.14%)
    • hsv(234.8,80.05%,84.7%)
  • Extends HSBAColorFormat
  • HSB and HSV are equivalent only differs in name.
    		•
    RGBAColorFormat
    • rgba(R,G,B,A) (integer/hex)
    • rgba(R%,G%,B%,A) (percentage)
    • Type 1 - rgba(R,G,B,A) -integer-
      • The format of an RGBA value in the functional notation is "rgba'(' followed by a comma-separated list of three numerical values (three integer values), followed by an <alphavalue>, followed by ')'".
      • "R", "G" and "B" is a number(integer) between 0 and 255 (both inclusive) or hex values 0x00 and 0xFF (both inclusive).
      • "A" is number(float), the uniform opacity setting to be applied across an entire object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. (both inclusive)
    • Type 2 - rgba(R%,G%,B%,A) -percentage-
      • The format of an RGBA value in the functional notation is "rgba'(' followed by a comma-separated list of three numerical values (three percentage values), followed by an <alphavalue>, followed by ')'".
      • "R", "G" and "B" is a number(integer) between 0 and 100 post append and '%' sign. (both inclusive)
      • "A" is number(float), the uniform opacity setting to be applied across an entire object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. (both inclusive)
    • rgba(11,22,33,0.4)
    • rgba(255,212,1,1.0)
    • RbGA(212,1, 255,0.3 )
    • Rgba(212,0x1A,0x00,1.0)
    • Rgba(255,255,255,255)
    • RGBA(0xFF,0xfF,0xFF,0.2)
    • rgba( 11, 22 , 33,0.)
    • rgba(11%,22%,33%,0.0)
    • rgba(100%,0%,66%,0.5)
  • Extends TupleColorFormat
    		•
    RGBColorFormat
    • rgba(R,G,B) (integer/hex)
    • rgba(R%,G%,B%) (percentage)
    • Type 1 - rgba(R,G,B,A) -integer-
      • The format of an RGBA value in the functional notation is "rgba'(' followed by a comma-separated list of three numerical values (three integer values), followed by an <alphavalue>, followed by ')'".
      • "R", "G" and "B" is a number(integer) between 0 and 255 (both inclusive) or hex values 0x00 and 0xFF (both inclusive).
    • Type 2 - rgba(R%,G%,B%,A) -percentage-
      • The format of an RGBA value in the functional notation is "rgba'(' followed by a comma-separated list of three numerical values (three percentage values), followed by an <alphavalue>, followed by ')'".
      • "R", "G" and "B" is a number(integer) between 0 and 100 post append and '%' sign. (both inclusive)
    • rgb(11,22,33)
    • rgb(255,212,1)
    • RbG(212,1, 255)
    • Rgb(212,0x1A,0x00)
    • Rgb(255,255,255)
    • RGB(0xFF,0xfF,0xFF)
    • rgb( 11, 22 , 33)
    • rgb(11%,22%,33%)
    • rgb(100%,0%,66%)
  • Extends TupleColorFormat
    		•
    SVGNamedColorFormat
    • name of color
    • Will parse color name from the list from W3.org.
    • RED
    • black
    • Blue
    • chocolate
    • firebrick
    • steelblue
         		 
    YUVColorFormat
    • yuv(luma,chrominance-U,chrominance-V)
    • y : A float - Ranges from 0.0 to 1.0 (both inclusive).
    • u : A float - Ranges from -0.436 to +0.436 (both inclusive).
    • v : A float - Ranges from -0.615 to +0.615 (both inclusive).
    • yuv(0.398,0.173,-0.222)
    • yuv(0,0,0)
    • yuv(0.114,0.436,-0.100)
    • yuv(0.701,0.147,-0.615)
    • yuv(0.251,0,0)
    • yuv(0.502,0,0)
    • yuv(0.587,-0.289,-0.515)
    • yuv(0.753,0,0)
    • yuv(0.413,0.289,0.515)
    • yuv(0.759,-0.374,0.211)
    • yuv(0.780,-0.046,0.193)
    • yuv(0.299,-0.147,0.615)
    • yuv(1,0,0)
    • yuv(0.886,-0.436,0.100)
  • Extends TupleColorFormat
    		•