Convert srgb -> lab

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/live/color.ex

@@ -5,6 +5,26 @@ defmodule ComponentsGuideWeb.ColorLive do
   defmodule State do
     defstruct color: {:lab, 50, 100, -128}
 
+    def from_input(
+          "#" <>
+            <<r1::utf8>> <>
+            <<r2::utf8>> <> <<g1::utf8>> <> <<g2::utf8>> <> <<b1::utf8>> <> <<b2::utf8>>
+        ) do
+      # <<cp::utf8>>
+      r = <<r1::utf8>> <> <<r2::utf8>>
+      g = <<g1::utf8>> <> <<g2::utf8>>
+      b = <<b1::utf8>> <> <<b2::utf8>>
+
+      r = String.to_integer(r, 16) / 255
+      g = String.to_integer(g, 16) / 255
+      b = String.to_integer(b, 16) / 255
+
+      color = {:srgb, r, g, b} |> Styling.convert(:lab)
+
+      IO.puts("INPUT #{r} #{g} #{b} OUTPUT #{inspect(color)}")
+      %State{color: color}
+    end
+
     def set_color(state = %__MODULE__{}, color), do: %{state | color: color}
 
     def l(%__MODULE__{color: {:lab, l, _, _}}), do: l
@@ -13,8 +33,6 @@ defmodule ComponentsGuideWeb.ColorLive do
 
     def css(%__MODULE__{color: color}), do: StylingHelpers.to_css(color)
 
-    defp clamp_0_1(n), do: n |> max(0) |> min(1)
-
     defp to_srgb(%__MODULE__{color: color}) do
       {:srgb, r, g, b} = color |> StylingHelpers.convert(:srgb) |> StylingHelpers.clamp()
       {r, g, b}
@@ -23,11 +41,12 @@ defmodule ComponentsGuideWeb.ColorLive do
     def hex(state = %__MODULE__{}) do
       {r, g, b} = state |> to_srgb()
 
-      digits = [r, g, b]
-      |> Enum.map(fn c ->
-        round(c * 255) |> Integer.to_string(16) |> String.pad_leading(2, "0")
-      end)
-      |> Enum.join()
+      digits =
+        [r, g, b]
+        |> Enum.map(fn c ->
+          round(c * 255) |> Integer.to_string(16) |> String.pad_leading(2, "0")
+        end)
+        |> Enum.join()
 
       "##{digits}"
     end
@@ -37,11 +56,12 @@ defmodule ComponentsGuideWeb.ColorLive do
     swatch_size = 100
     {:lab, l, a, b} = assigns.state.color
 
-    gradient = Styling.linear_gradient("150grad", [
-      {:lab, l * 1.5, a * 1.2, b * 0.8},
-      {:lab, l, a, b},
-      {:lab, l * 0.5, a * 0.8, b * 1.2},
-    ])
+    gradient =
+      Styling.linear_gradient("150grad", [
+        {:lab, l * 1.5, a * 1.2, b * 0.8},
+        {:lab, l, a, b},
+        {:lab, l * 0.5, a * 0.8, b * 1.2}
+      ])
 
     ~L"""
     <article class="text-2xl max-w-lg mx-auto text-white">
@@ -70,7 +90,7 @@ defmodule ComponentsGuideWeb.ColorLive do
         <dt class="font-bold">Hex:
         <dd><%= State.hex(@state) %>
         <dt class="font-bold">CSS:
-        <dd><%= State.css(@state) %>
+        <dd><pre class="text-base whitespace-pre-wrap"><code><%= State.css(@state) %></code></pre>
         <dt class="font-bold">Gradient CSS:
         <dd><pre class="text-base whitespace-pre-wrap"><code><%= gradient %></code></pre>
       </dl>
@@ -82,10 +102,27 @@ defmodule ComponentsGuideWeb.ColorLive do
     {:ok, assign(socket, state: %State{})}
   end
 
+  def handle_params(%{"definition" => definition}, _path, socket) do
+    state = State.from_input(definition)
+    {:noreply, socket |> assign(:state, state)}
+  end
+
+  def handle_params(%{}, _path, socket) do
+    state = %State{}
+    {:noreply, socket |> assign(:state, state)}
+  end
+
   def handle_event("lab_changed", %{"l" => l, "a" => a, "b" => b}, socket) do
     l = l |> String.to_integer()
     a = a |> String.to_integer()
     b = b |> String.to_integer()
-    {:noreply, assign(socket, :state, socket.assigns.state |> State.set_color({:lab, l, a, b}))}
+
+    state = socket.assigns.state |> State.set_color({:lab, l, a, b})
+    hex = state |> State.hex()
+
+    {:noreply,
+     socket
+     |> assign(:state, state)
+     |> push_patch(to: Routes.color_path(socket, :show, hex), replace: true)}
   end
 end

apps/components_guide_web/lib/components_guide_web/router.ex

@@ -29,7 +29,8 @@ defmodule ComponentsGuideWeb.Router do
               AccessibilityFirstController,
               only: [:index, :show]
 
-    get "/color", ColorController, :index
+    live "/color", ColorLive, :index
+    live "/color/:definition", ColorLive, :show
 
     get "/swiftui", SwiftUIController, :index
     get "/react+typescript", ReactTypescriptController, :index

apps/components_guide_web/lib/components_guide_web/views/styling_helpers.ex

@@ -13,6 +13,14 @@ defmodule ComponentsGuideWeb.StylingHelpers do
     end
   end
 
+  defp convert_component({:srgb, c}, :linear_srgb) do
+    if c < 0.04045 do
+      c / 12.92
+    else
+      :math.pow((c + 0.055) / 1.055, 2.4)
+    end
+  end
+
   def convert({:linear_srgb, r, g, b}, :srgb) do
     {
       :srgb,
@@ -22,16 +30,43 @@ defmodule ComponentsGuideWeb.StylingHelpers do
     }
   end
 
-  def convert({:xyz, x, y, z}, :srgb) do
+  def convert({:xyz, x, y, z}, :linear_srgb) do
     {
       :linear_srgb,
       x * 3.1338561 - y * 1.6168667 - 0.4906146 * z,
       x * -0.9787684 + y * 1.9161415 + 0.0334540 * z,
       x * 0.0719453 - y * 0.2289914 + 1.4052427 * z
     }
+  end
+
+  def convert({:xyz, _, _, _} = input, :srgb) do
+    input
+    |> convert(:linear_srgb)
     |> convert(:srgb)
   end
 
+  def convert({:srgb, r, g, b}, :linear_srgb) do
+    {
+      :linear_srgb,
+      convert_component({:srgb, r}, :linear_srgb),
+      convert_component({:srgb, g}, :linear_srgb),
+      convert_component({:srgb, b}, :linear_srgb)
+    }
+  end
+
+  def convert({:linear_srgb, r, g, b}, :xyz) do
+    {
+      :xyz,
+      0.4360747 * r + 0.3850649 * g + 0.1430804 * b,
+      0.2225045 * r + 0.7168786 * g + 0.0606169 * b,
+      0.0139322 * r + 0.0971045 * g + 0.7141733 * b
+    }
+  end
+
+  def convert({:srgb, _, _, _} = input, :xyz) do
+    input |> convert(:linear_srgb) |> convert(:xyz)
+  end
+
   @xn 0.96422
   @yn 1.00000
   @zn 0.82521
@@ -62,8 +97,33 @@ defmodule ComponentsGuideWeb.StylingHelpers do
     }
   end
 
+  def convert({:xyz, x, y, z}, :lab) do
+    converter = fn v ->
+      if v > @e do
+        :math.pow(v, 1.0 / 3.0)
+      else
+        (@k * v + 16) / 116
+      end
+    end
+
+    f0 = converter.(x / @xn)
+    f1 = converter.(y / @yn)
+    f2 = converter.(z / @zn)
+
+    {
+      :lab,
+      116 * f1 - 16,
+      500 * (f0 - f1),
+      200 * (f1 - f2)
+    }
+  end
+
   def convert({:lab, _l, _a, _b} = input, :srgb) do
-    convert(input, :xyz) |> convert(:srgb)
+    input |> convert(:xyz) |> convert(:srgb)
+  end
+
+  def convert({:srgb, _, _, _} = input, :lab) do
+    input |> convert(:xyz) |> convert(:lab)
   end
 
   defp clamp_0_1(n) when is_number(n), do: n |> max(0) |> min(1)