diff --git a/src/components/ColorComponentInput.tsx b/src/components/ColorComponentInput.tsx
index 140a9e2..759e000 100644
--- a/src/components/ColorComponentInput.tsx
+++ b/src/components/ColorComponentInput.tsx
@@ -22,15 +22,9 @@ export function ColorComponentInput({ color, onChange }: ColorComponentInputProp
   const updateHex = (evt: ChangeEvent<HTMLInputElement>) => {
     try {
       const hexValue = trim(evt.target.value, '#');
-      const [r, g, b] = colorFn?.represent_rgb(hexValue) ?? [0, 0, 0];
-      setR(r);
-      setG(g);
-      setB(b);
-      const [h, s, l] = colorFn?.represent_hsl(hexValue) ?? [0, 0, 0];
-      setH(h);
-      setS(s);
-      setL(l);
       setHex(hexValue);
+      updateRGB(hexValue);
+      updateHSL(hexValue);
       onChange(hexValue);
     } catch (e) {
       console.error('[Convert HEX]', e);