Color Editor Dialog

From Synfig Studio :: Documentation
Jump to: navigation, search
(Alpha)
m (→‎Channels outside [0,100]: cairo render info in {{note}})
 
(24 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
==The Color Dialog ==
+
<!-- Page info -->
−
The color dialog has two sections: one for the color itself and other for the alpha channel (the opacity of the color). The color section allows changes to the color channels and shows the hexadecimal representation of the color. This hexadecimal representation doesn't include the alpha channel.
+
{{Title|Color Editor Dialog}}
 +
{{Category|Dialogs}}
 +
{{NewTerminology}}
 +
<!-- Page info end -->
  
−
[[Image:Color1.png]] [[Image:ColorDialog1.png]] [[Image:ColorsDialogYUV1.png]]
+
==The Colors Dialog ==
 +
The {{Literal|Colors Dialog}} has two sections: one for the color itself and another for the {{Literal|Alpha}} channel (the opacity of the color). The color section (only RGB ones) allows changes to the color channels and shows the {{Literal|HTML code}} of the color. This {{Literal|HTML code}} representation doesn't include the {{Literal|Alpha}} channel.
  
 +
[[File:Color1-0.63.06.png|frame|none]]
 +
[[File:ColorDialog1-0.63.06.png]] [[File:ColorDialogYUV1-0.63.06.png]] [[File:ColorTest1.png]]
  
−
[[Image:ColorTest1.png]]
+
You can set the color you are editing using two methods: {{Literal|RGB}} composition (Red, Green and Blue channels) or {{Literal|YUV}} composition (Luma, Hue, Saturation, U and V channels). Select one of the tabs to make the modifications using the method you prefer.
  
−
You can set the current edited color using two methods: the RGB composition (red, green and blue channels) or by the YUV composition (luma, hue, saturation, U and V channels). Select one of the tabs to make the modifications in one or other way.
+
All the {{Literal|RGB}} channels and alpha values can be modified using the triangular sliders or the numeric input. In all cases the value can be between '''0''' and '''100'''. {{Literal|RGB}} values, and alpha values as well, can actually be higher than '''100''' and lower than '''0'''. If you set RGB values higher than '''100''' it produces a shifted color with transparency. Same happens if values are lower than '''0'''. You can create an object with a color with {{Literal|Alpha}} = '''200'''. Then if you apply it over another layer with {{Literal|Alpha}} = 100 and use {{Literal|alpha over}} as the composition method. You will then obtain a composited alpha of '''-100''' (-100 = 100-200). Anyway the alpha value will be truncated to be in the [0,100] interval when the image is rendered because images cannot hold negative alpha or bigger than '''100%''' (''Are you sure?'').
  
−
All the RGB channels and alpha values can be modified using the triangle sliders or the numeric input. In all cases its value can be between 0 and 100. In fact RGB values it can be bigger than 100 and lower than 0. This produce interesting effects if you combine it with an alpha value between 0 and 100. This also happen with the alpha value. If you set it bigger than 100 it produces a shifted color with transparency. Same happens if values are lower than 0. You can create an object with a color with alpha = 200. Then if you apply it over another layer with alpha = 100 and use "alpha over" as the composition method you'll obtain a composited alpha of -100 (-100 = 100-200). Anyway the alpha value will be truncated to be in the [0,100] interval when the image is rendered because images cannot hold negative alpha or bigger than 100% (''Are you sure?'').
+
On the other hand, {{Literal|YUV}} channels can only be set using the triangular sliders. ''It would be a good feature if those channels could also be modified by their numerical values.''
  
−
On the other hand, YUV channels can only be set by the triangle sliders. It would be a good feature if those channels could also be modified by their numerical values.
+
== Channels outside [0,100] ==
  
 +
{{Note|Channels outside [0,100] Cairo Render|Setting RGB or Alpha channel outside [0,100] did'nt work with {{literal|Cairo Rendering}} on the {{l|Setup_Dialog#Render_Tab|WorkArea}} either in {{l|Doc:Preview#Use_Cairo_render|preview}}, but only with {{literal|Synfig Software Rendering}}.
  
−
== Examples of RGB channels outside [0,100] ==
+
Cairo rendering engine is ARGB32 (8 bits per color channel) but Synfig rendering engine is RGBA128 (32 bits per color channel).
 +
Cairo admits color channels as float point values between 0.0 and 1.0 (that finally is mapped to a 0-255 unsigned value), anything outside that is clamped by Cairo API.}}
  
−
Here you can see some examples of what happens when a color channel value is set to be out of its natural scope.
+
=== Examples of RGB channels outside [0,100] ===
  
−
[[Image:Color2.png]] [[Image:ColorDialog2.png]] [[Image:ColorTest2.png]]
+
Here are some examples of what happens when a color channel value is set to values beyond its natural scope.
  
−
[[Image:Color3.png]] [[Image:ColorDialog3.png]] [[Image:ColorTest3.png]]
+
[[File:Color2-0.63.06.png]] [[File:ColorDialog2-0.63.06.png]] [[File:ColorTest2.png]]
  
−
[[Image:Color4.png]] [[Image:ColorDialog4.png]] [[Image:ColorTest4.png]]
+
[[File:Color3-0.63.06.png]] [[File:ColorDialog3-0.63.06.png]] [[File:ColorTest3.png]]
  
−
[[Image:Color5.png]] [[Image:ColorDialog5.png]] [[Image:ColorTest5.png]]
+
[[File:Color4-0.63.06.png]] [[File:ColorDialog4-0.63.06.png]] [[File:ColorTest4.png]]
  
−
[[Image:Color7.png]] [[Image:ColorDialog7.png]] [[Image:ColorTest7.png]]
+
[[File:Color5-0.63.06.png]] [[File:ColorDialog5-0.63.06.png]] [[File:ColorTest5.png]]
  
−
[[Image:Color6.png]] [[Image:ColorDialog6.png]] [[Image:ColorTest6.png]]
+
[[File:Color6-0.63.06.png]] [[File:ColorDialog6-0.63.06.png]] [[File:ColorTest6.png]]
  
−
[[Image:Color8.png]] [[Image:ColorDialog8.png]] [[Image:ColorTest8.png]]
+
[[File:Color7-0.63.06.png]] [[File:ColorDialog7-0.63.06.png]] [[File:ColorTest7.png]]
  
−
[[Image:Color9.png]] [[Image:ColorDialog9.png]] [[Image:ColorTest9.png]]
+
[[File:Color8-0.63.06.png]] [[File:ColorDialog8-0.63.06.png]] [[File:ColorTest8.png]]
  
−
[[Image:Color10.png]] [[Image:ColorDialog10.png]] [[Image:ColorTest10.png]]
+
[[File:Color9-0.63.06.png]] [[File:ColorDialog9-0.63.06.png]] [[File:ColorTest9.png]]
  
−
In all the examples the blend method of the horizontal rectangle was "composite".
+
[[File:Color10-0.63.06.png]] [[File:ColorDialog10-0.63.06.png]] [[File:ColorTest10.png]]
  
−
In the examples you can notice that negative values for a RGB channel ("overdesaturated") combined with alpha set to an intermediate value affects to white like colors more than to black like ones. On the other hand RGB channel values greater than 100 ("oversaturated") affects to black like colors more than to white like colors.
+
  In all the examples the {{l|Blend Method}} of the horizontal rectangle was {{l|Blend Method#Composite|Composite}}.
  
−
== Examples of Alpha channel outside [0,100] ==
+
In the examples you can notice that negative values for an RGB channel ("overdesaturated") combined with alpha set to an intermediate value affects light colors more than dark colors. On the other hand RGB channel values greater than '''100''' ("oversaturated") affects dark colors more than light colors.
  
−
In the following examples you can see that negative alpha values and bigger than 100% alpha values composited with other layers produces very interesting effects. If someone want to explain why those effects are produced, please edit this page! :)
+
=== Examples of Alpha channel outside [0,100] ===
  
−
[[Image:Color11.png]] [[Image:ColorDialog11.png]] [[Image:ColorTest11.png]]
+
In the following examples you can see that negative Alpha values and bigger than '''100%''' Alpha values composited with other layers produces very interesting effects. ''If someone want to explain why those effects are produced, please edit this page! :)''
  
−
[[Image:Color12.png]] [[Image:ColorDialog12.png]] [[Image:ColorTest12.png]]
+
[[File:Color11-0.63.06.png]] [[File:ColorDialog11-0.63.06.png]] [[File:ColorTest11.png]]
  
−
[[Image:Color13.png]] [[Image:ColorDialog13.png]] [[Image:ColorTest13.png]]
+
[[File:Color12-0.63.06.png]] [[File:ColorDialog12-0.63.06.png]] [[File:ColorTest12.png]]
 +
 
 +
[[File:Color13-0.63.06.png]] [[File:ColorDialog13-0.63.06.png]] [[File:ColorTest13.png]]
 +
 
 +
== The sample file ==
 +
 
 +
This is the file that I've used to produce the color effects.
 +
{{l|Media:ColorTest.sifz}}

Latest revision as of 20:56, 19 September 2013

Languages Language: 

English • français • italiano • română • русский



The Colors Dialog

The "Colors Dialog" has two sections: one for the color itself and another for the "Alpha" channel (the opacity of the color). The color section (only RGB ones) allows changes to the color channels and shows the "HTML code" of the color. This "HTML code" representation doesn't include the "Alpha" channel.

Color1-0.63.06.png

ColorDialog1-0.63.06.png ColorDialogYUV1-0.63.06.png ColorTest1.png

You can set the color you are editing using two methods: "RGB" composition (Red, Green and Blue channels) or "YUV" composition (Luma, Hue, Saturation, U and V channels). Select one of the tabs to make the modifications using the method you prefer.

All the "RGB" channels and alpha values can be modified using the triangular sliders or the numeric input. In all cases the value can be between 0 and 100. "RGB" values, and alpha values as well, can actually be higher than 100 and lower than 0. If you set RGB values higher than 100 it produces a shifted color with transparency. Same happens if values are lower than 0. You can create an object with a color with "Alpha" = 200. Then if you apply it over another layer with "Alpha" = 100 and use "alpha over" as the composition method. You will then obtain a composited alpha of -100 (-100 = 100-200). Anyway the alpha value will be truncated to be in the [0,100] interval when the image is rendered because images cannot hold negative alpha or bigger than 100% (Are you sure?).

On the other hand, "YUV" channels can only be set using the triangular sliders. It would be a good feature if those channels could also be modified by their numerical values.

Channels outside [0,100]

Channels outside [0,100] Cairo Render

Setting RGB or Alpha channel outside [0,100] did'nt work with "Cairo Rendering" on the WorkArea either in preview, but only with "Synfig Software Rendering".

Cairo rendering engine is ARGB32 (8 bits per color channel) but Synfig rendering engine is RGBA128 (32 bits per color channel).

Cairo admits color channels as float point values between 0.0 and 1.0 (that finally is mapped to a 0-255 unsigned value), anything outside that is clamped by Cairo API.
note end


Examples of RGB channels outside [0,100]

Here are some examples of what happens when a color channel value is set to values beyond its natural scope.

Color2-0.63.06.png ColorDialog2-0.63.06.png ColorTest2.png

Color3-0.63.06.png ColorDialog3-0.63.06.png ColorTest3.png

Color4-0.63.06.png ColorDialog4-0.63.06.png ColorTest4.png

Color5-0.63.06.png ColorDialog5-0.63.06.png ColorTest5.png

Color6-0.63.06.png ColorDialog6-0.63.06.png ColorTest6.png

Color7-0.63.06.png ColorDialog7-0.63.06.png ColorTest7.png

Color8-0.63.06.png ColorDialog8-0.63.06.png ColorTest8.png

Color9-0.63.06.png ColorDialog9-0.63.06.png ColorTest9.png

Color10-0.63.06.png ColorDialog10-0.63.06.png ColorTest10.png 

 In all the examples the Blend Method of the horizontal rectangle was Composite.

In the examples you can notice that negative values for an RGB channel ("overdesaturated") combined with alpha set to an intermediate value affects light colors more than dark colors. On the other hand RGB channel values greater than 100 ("oversaturated") affects dark colors more than light colors.

Examples of Alpha channel outside [0,100]

In the following examples you can see that negative Alpha values and bigger than 100% Alpha values composited with other layers produces very interesting effects. If someone want to explain why those effects are produced, please edit this page! :)

Color11-0.63.06.png ColorDialog11-0.63.06.png ColorTest11.png

Color12-0.63.06.png ColorDialog12-0.63.06.png ColorTest12.png

Color13-0.63.06.png ColorDialog13-0.63.06.png ColorTest13.png

The sample file

This is the file that I've used to produce the color effects. Media:ColorTest.sifz


Languages Language: 

English • français • italiano • română • русский

Retrieved from "https://wiki.synfig.org/index.php?title=Color_Editor_Dialog&oldid=18726"