Add support for picking colors in linear color space (with toggle for special cases like UI)

Source/Editor/GUI/Dialogs/ColorPickerDialog.cs

@@ -41,6 +41,7 @@ namespace FlaxEditor.GUI.Dialogs
         private bool _useDynamicEditing;
         private bool _activeEyedropper;
         private bool _canPassLastChangeEvent = true;
+        private bool _linear;
         private ColorValueBox.ColorPickerEvent _onChanged;
         private ColorValueBox.ColorPickerClosedEvent _onClosed;
 
@@ -56,6 +57,7 @@ namespace FlaxEditor.GUI.Dialogs
         private Button _cCancel;
         private Button _cOK;
         private Button _cEyedropper;
+        private Button _cLinearSRGB;
 
         private List<Color> _savedColors = new List<Color>();
         private List<Button> _savedColorButtons = new List<Button>();
@@ -118,6 +120,7 @@ namespace FlaxEditor.GUI.Dialogs
             _value = Color.Transparent;
             _onChanged = colorChanged;
             _onClosed = pickerClosed;
+            _linear = !Graphics.GammaColorSpace;
 
             // Get saved colors if they exist
             if (Editor.Instance.ProjectCache.TryGetCustomData("ColorPickerSavedColors", out string savedColors))
@@ -227,6 +230,25 @@ namespace FlaxEditor.GUI.Dialogs
             _cEyedropper.Width = _cEyedropper.Height;
             _cEyedropper.X -= _cEyedropper.Width;
 
+            // Linear/sRGB toggle button
+            _cLinearSRGB = new Button(_cOK.X - EyedropperMargin, _cHex.Bottom + PickerMargin)
+            {
+                TooltipText = "Toggles between color preview in Linear and sRGB",
+                BackgroundBrush = new SpriteBrush(Editor.Instance.Icons.SplineAligned64),
+                BackgroundColor = _cEyedropper.BackgroundColor,
+                BackgroundColorHighlighted = _cEyedropper.BackgroundColorHighlighted,
+                BorderColor = _linear ? Color.Transparent : style.Foreground,
+                BorderColorHighlighted = _cEyedropper.BorderColorHighlighted,
+                Size = _cEyedropper.Size,
+                Parent = this,
+                Location = _cEyedropper.BottomLeft + new Float2(0, 4),
+            };
+            _cLinearSRGB.Clicked += () =>
+            {
+                _linear = !_linear;
+                _cLinearSRGB.BorderColor = _linear ? Color.Transparent : style.Foreground;
+            };
+
             // Set initial color
             SelectedColor = initialValue;
         }
@@ -281,7 +303,10 @@ namespace FlaxEditor.GUI.Dialogs
             if (_activeEyedropper)
             {
                 _activeEyedropper = false;
-                SelectedColor = colorPicked;
+                Color color = colorPicked;
+                if (_linear)
+                    color = color.ToLinear();
+                SelectedColor = color;
                 ScreenUtilities.PickColorDone -= OnColorPicked;
             }
         }
@@ -327,7 +352,10 @@ namespace FlaxEditor.GUI.Dialogs
             if (_activeEyedropper)
             {
                 Float2 mousePosition = Platform.MousePosition;
-                SelectedColor = ScreenUtilities.GetColorAt(mousePosition);
+                Color color = ScreenUtilities.GetColorAt(mousePosition);
+                if (_linear)
+                    color = color.ToLinear();
+                SelectedColor = color;
             }
         }
 
@@ -388,7 +416,7 @@ namespace FlaxEditor.GUI.Dialogs
                     }
                 }
             }
-            Render2D.FillRectangle(newRect, _value);
+            Render2D.FillRectangle(newRect, _linear ? _value.ToSRgb() : _value);
         }
 
         /// <inheritdoc />

Source/Editor/GUI/Input/ColorValueBox.cs

@@ -15,6 +15,7 @@ namespace FlaxEditor.GUI.Input
     public class ColorValueBox : Control
     {
         private bool _isMouseDown;
+        private bool _linear;
 
         /// <summary>
         /// Delegate function used for the color picker events handling.
@@ -101,6 +102,7 @@ namespace FlaxEditor.GUI.Input
         public ColorValueBox()
         : base(0, 0, 32, 18)
         {
+            _linear = !Graphics.GammaColorSpace;
         }
 
         /// <summary>
@@ -113,6 +115,7 @@ namespace FlaxEditor.GUI.Input
         : base(x, y, 32, 18)
         {
             _value = value;
+            _linear = !Graphics.GammaColorSpace;
         }
 
         /// <summary>
@@ -129,8 +132,10 @@ namespace FlaxEditor.GUI.Input
         {
             base.Draw();
 
-            bool isTransparent = _value.A < 1;
-
+            var value = _value;
+            if (_linear)
+                value = value.ToSRgb();
+            var isTransparent = value.A < 1;
             var style = Style.Current;
             var fullRect = new Rectangle(0, 0, Width, Height);
             var colorRect = new Rectangle(0, 0, isTransparent ? Width * 0.7f : Width, Height);
@@ -157,10 +162,10 @@ namespace FlaxEditor.GUI.Input
                         }
                     }
                 }
-                Render2D.FillRectangle(alphaRect, _value);
+                Render2D.FillRectangle(alphaRect, value);
             }
 
-            Render2D.FillRectangle(colorRect, _value with { A = 1 });
+            Render2D.FillRectangle(colorRect, value with { A = 1 });
             Render2D.DrawRectangle(fullRect, IsMouseOver || IsNavFocused ? style.BackgroundSelected : Color.Black);
         }