diff --git a/src/Web/Page.hs b/src/Web/Page.hs
--- a/src/Web/Page.hs
+++ b/src/Web/Page.hs
@@ -57,7 +57,6 @@
     module X,
     Value (..),
     finally,
-    PixelRGB8 (..),
     HashMap.HashMap,
     fromList,
     void,
@@ -70,7 +69,6 @@
   )
 where
 
-import Codec.Picture.Types (PixelRGB8 (..))
 import Control.Applicative as X
 import Control.Exception (finally)
 import Control.Monad
diff --git a/src/Web/Page/Examples.hs b/src/Web/Page/Examples.hs
--- a/src/Web/Page/Examples.hs
+++ b/src/Web/Page/Examples.hs
@@ -132,7 +132,7 @@
         repToggle :: Bool,
         repDropdown :: Int,
         repShape :: Shape,
-        repColor :: PixelRGB8
+        repColor :: Text
       }
   deriving (Show, Eq, Generic)
 
@@ -162,11 +162,8 @@
   tog <- toggle (Just "toggle") False
   dr <- dropdown decimal (pack . show) (Just "dropdown") ((pack . show) <$> [1 .. 5 :: Int]) 3
   drt <- toShape <$> dropdown takeText id (Just "shape") (["Circle", "Square"]) (fromShape SquareShape)
-  col <- colorPicker (Just "color") (PixelRGB8 56 128 200)
+  col <- colorPicker (Just "color") "#454e56"
   pure (RepExamples t ta n ds' c tog dr drt col)
-
--- encodeFile "saves/rep2.json" $ RepExamples "text1" "text2" 1 1.0 True True 2 (PixelRGB8 0 100 0)
--- decodeFileStrict "saves/rep2.json" :: IO (Maybe RepExamples)
 
 listExample :: (Monad m) => Int -> SharedRep m [Int]
 listExample n =
diff --git a/src/Web/Page/Html.hs b/src/Web/Page/Html.hs
--- a/src/Web/Page/Html.hs
+++ b/src/Web/Page/Html.hs
@@ -13,21 +13,15 @@
     genNamePre,
     libCss,
     libJs,
-    fromHex,
-    toHex,
     HtmlT,
     Html,
   )
 where
 
-import Codec.Picture.Types (PixelRGB8 (..))
 import Control.Monad.State
-import Data.Attoparsec.Text
 import Data.Bool
 import Data.Text
-import Data.Text.Format
 import qualified Data.Text.Lazy as Lazy
-import Data.Text.Lazy.Builder (toLazyText)
 import Lucid
 import Prelude
 
@@ -67,24 +61,7 @@
 libJs :: Text -> Html ()
 libJs url = with (script_ mempty) [src_ url]
 
--- | convert from #xxxxxx to 'PixelRGB8'
-fromHex :: Parser PixelRGB8
-fromHex =
-  ( \((r, g), b) ->
-      PixelRGB8 (fromIntegral r) (fromIntegral g) (fromIntegral b)
-  )
-    . (\(f, b) -> (f `divMod` (256 :: Int), b))
-    . (`divMod` 256)
-    <$> (string "#" *> hexadecimal)
 
--- | convert from 'PixelRGB8' to #xxxxxx
-toHex :: PixelRGB8 -> Text
-toHex (PixelRGB8 r g b) =
-  "#"
-    <> justifyRight 2 '0' (Lazy.toStrict $ toLazyText $ hex r)
-    <> justifyRight 2 '0' (Lazy.toStrict $ toLazyText $ hex g)
-    <> justifyRight 2 '0' (Lazy.toStrict $ toLazyText $ hex b)
-
 -- | FIXME: `ToHtml a` is used throughout, mostly because `Show a` gives "\"text\"" for show "text", and hilarity ensues when rendering this to a web page, and I couldn't work out how to properly get around this.
 --
 -- Hence, these orphans.
@@ -105,12 +82,6 @@
   toHtml = toHtml . (pack . show)
 
   toHtmlRaw = toHtmlRaw . (pack . show)
-
-instance ToHtml PixelRGB8 where
-
-  toHtml = toHtml . toHex
-
-  toHtmlRaw = toHtmlRaw . toHex
 
 instance ToHtml () where
 
diff --git a/src/Web/Page/SharedReps.hs b/src/Web/Page/SharedReps.hs
--- a/src/Web/Page/SharedReps.hs
+++ b/src/Web/Page/SharedReps.hs
@@ -35,7 +35,6 @@
 where
 
 import Box.Cont ()
-import Codec.Picture.Types (PixelRGB8 (..))
 import Control.Lens
 import Control.Monad
 import Control.Monad.Trans.State
@@ -162,12 +161,12 @@
     (Input v label mempty (TextArea rows))
     v
 
--- | color input
-colorPicker :: (Monad m) => Maybe Text -> PixelRGB8 -> SharedRep m PixelRGB8
+-- | Non-typed hex color input
+colorPicker :: (Monad m) => Maybe Text -> Text -> SharedRep m Text
 colorPicker label v =
   repInput
-    fromHex
-    toHex
+    takeText
+    id
     (Input v label mempty ColorPicker)
     v
 
diff --git a/src/Web/Page/Types.hs b/src/Web/Page/Types.hs
--- a/src/Web/Page/Types.hs
+++ b/src/Web/Page/Types.hs
@@ -48,10 +48,8 @@
 import Control.Monad.State
 import Data.Aeson
 import Data.Biapplicative
-import Data.Bifunctor (Bifunctor (..))
 import Data.Generics.Labels ()
 import Data.HashMap.Strict as HashMap hiding (foldr)
-import Data.Semigroup ((<>))
 import Data.Text (Text, unpack)
 import qualified Data.Text as Text
 import Data.Text.Lazy (toStrict)
diff --git a/stack.yaml b/stack.yaml
--- a/stack.yaml
+++ b/stack.yaml
@@ -9,3 +9,5 @@
   - box-0.3.0
   - interpolatedstring-perl6-1.0.2
   - text-format-0.3.2
+
+allow-newer: true
diff --git a/test/test.hs b/test/test.hs
--- a/test/test.hs
+++ b/test/test.hs
@@ -130,7 +130,7 @@
         ]
       it "repExamples versus canned" $
         runIdentity (runOnce repExamples mempty) `shouldBe`
-        (fromList [("7","3"),("1","sometext"),("4","0.5"),("2","no initial value & multi-line text\\nrenders is not ok?/"),("5","true"),("8","Square"),("3","3"),("6","false"),("9","#3880c8")],Right (RepExamples {repTextbox = "sometext", repTextarea = "no initial value & multi-line text\\nrenders is not ok?/", repSliderI = 3, repSlider = 0.5, repCheckbox = True, repToggle = False, repDropdown = 3, repShape = SquareShape, repColor = PixelRGB8 56 128 200}))
+        (fromList [("7","3"),("1","sometext"),("4","0.5"),("2","no initial value & multi-line text\\nrenders is not ok?/"),("5","true"),("8","Square"),("3","3"),("6","false"),("9","#454e56")],Right (RepExamples {repTextbox = "sometext", repTextarea = "no initial value & multi-line text\\nrenders is not ok?/", repSliderI = 3, repSlider = 0.5, repCheckbox = True, repToggle = False, repDropdown = 3, repShape = SquareShape, repColor = "#454e56"}))
       it "listExample versus canned" $
         runIdentity (runOnce (listExample 5) mempty) `shouldBe`
         (fromList [("1","0"),("4","3"),("2","1"),("5","4"),("3","2"),("6","5")],Right [0,1,2,3,4,5])
@@ -140,8 +140,7 @@
 
       it "repExamples run through some canned events" $
         runIdentity (runList (maybeRep Nothing True repExamples) testvs) `shouldBe`
-        [Right (fromList [("7","true"),("4","no initial value & multi-line text\\nrenders is not ok?/"),("2","false"),("5","3"),("8","false"),("11","#3880c8"),("3","sometext"),("6","0.5"),("9","3"),("10","Square")],Right Nothing),Right (fromList [("7","true"),("4","no initial value & multi-line text\\nrenders is not ok?/"),("2","true"),("5","3"),("8","false"),("11","#3880c8"),("3","sometext"),("6","0.5"),("9","3"),("10","Square")],Right (Just (RepExamples {repTextbox = "sometext", repTextarea = "no initial value & multi-line text\\nrenders is not ok?/", repSliderI = 3, repSlider = 0.5, repCheckbox = True, repToggle = False, repDropdown = 3, repShape = SquareShape, repColor = PixelRGB8 56 128 200}))),Right (fromList [("7","true"),("4","no initial value & multi-line text\\nrenders is not ok?/"),("2","true"),("5","3"),("8","false"),("11","#3880c8"),("3","x"),("6","0.5"),("9","3"),("10","Square")],Right (Just (RepExamples {repTextbox = "x", repTextarea = "no initial value & multi-line text\\nrenders is not ok?/", repSliderI = 3, repSlider = 0.5, repCheckbox = True, repToggle = False, repDropdown = 3, repShape = SquareShape, repColor = PixelRGB8 56 128 200}))),Right (fromList [("7","true"),("4",""),("2","true"),("5","3"),("8","false"),("11","#3880c8"),("3","x"),("6","0.5"),("9","3"),("10","Square")],Right (Just (RepExamples {repTextbox = "x", repTextarea = "", repSliderI = 3, repSlider = 0.5, repCheckbox = True, repToggle = False, repDropdown = 3, repShape = SquareShape, repColor = PixelRGB8 56 128 200}))),Right (fromList [("7","true"),("4",""),("2","true"),("5","2"),("8","false"),("11","#3880c8"),("3","x"),("6","0.5"),("9","3"),("10","Square")],Right (Just (RepExamples {repTextbox = "x", repTextarea = "", repSliderI = 2, repSlider = 0.5, repCheckbox = True, repToggle = False, repDropdown = 3, repShape = SquareShape, repColor = PixelRGB8 56 128 200}))),Right (fromList [("7","true"),("4",""),("2","true"),("5","2"),("8","false"),("11","#3880c8"),("3","x"),("6","0.6"),("9","3"),("10","Square")],Right (Just (RepExamples {repTextbox = "x", repTextarea = "", repSliderI = 2, repSlider = 0.6, repCheckbox = True, repToggle = False, repDropdown = 3, repShape = SquareShape, repColor = PixelRGB8 56 128 200}))),Right (fromList [("7","false"),("4",""),("2","true"),("5","2"),("8","false"),("11","#3880c8"),("3","x"),("6","0.6"),("9","3"),("10","Square")],Right (Just (RepExamples {repTextbox = "x", repTextarea = "", repSliderI = 2, repSlider = 0.6, repCheckbox = False, repToggle = False, repDropdown = 3, repShape = SquareShape, repColor = PixelRGB8 56 128 200}))),Right (fromList [("7","false"),("4",""),("2","true"),("5","2"),("8","true"),("11","#3880c8"),("3","x"),("6","0.6"),("9","3"),("10","Square")],Right (Just (RepExamples {repTextbox = "x", repTextarea = "", repSliderI = 2, repSlider = 0.6, repCheckbox = False, repToggle = True, repDropdown = 3, repShape = SquareShape, repColor = PixelRGB8 56 128 200}))),Right (fromList [("7","false"),("4",""),("2","true"),("5","2"),("8","true"),("11","#3880c8"),("3","x"),("6","0.6"),("9","5"),("10","Square")],Right (Just (RepExamples {repTextbox = "x", repTextarea = "", repSliderI = 2, repSlider = 0.6, repCheckbox = False, repToggle = True, repDropdown = 5, repShape = SquareShape, repColor = PixelRGB8 56 128 200}))),Right (fromList [("7","false"),("4",""),("2","true"),("5","2"),("8","true"),("11","#3880c8"),("3","x"),("6","0.6"),("9","5"),("10","#00b4cc")],Right (Just (RepExamples {repTextbox = "x", repTextarea = "", repSliderI = 2, repSlider = 0.6, repCheckbox = False, repToggle = True, repDropdown = 5, repShape = CircleShape, repColor = PixelRGB8 56 128 200})))]
-
+        [Right (fromList [("7","true"),("4","no initial value & multi-line text\\nrenders is not ok?/"),("2","false"),("5","3"),("8","false"),("11","#454e56"),("3","sometext"),("6","0.5"),("9","3"),("10","Square")],Right Nothing),Right (fromList [("7","true"),("4","no initial value & multi-line text\\nrenders is not ok?/"),("2","true"),("5","3"),("8","false"),("11","#454e56"),("3","sometext"),("6","0.5"),("9","3"),("10","Square")],Right (Just (RepExamples {repTextbox = "sometext", repTextarea = "no initial value & multi-line text\\nrenders is not ok?/", repSliderI = 3, repSlider = 0.5, repCheckbox = True, repToggle = False, repDropdown = 3, repShape = SquareShape, repColor = "#454e56"}))),Right (fromList [("7","true"),("4","no initial value & multi-line text\\nrenders is not ok?/"),("2","true"),("5","3"),("8","false"),("11","#454e56"),("3","x"),("6","0.5"),("9","3"),("10","Square")],Right (Just (RepExamples {repTextbox = "x", repTextarea = "no initial value & multi-line text\\nrenders is not ok?/", repSliderI = 3, repSlider = 0.5, repCheckbox = True, repToggle = False, repDropdown = 3, repShape = SquareShape, repColor = "#454e56"}))),Right (fromList [("7","true"),("4",""),("2","true"),("5","3"),("8","false"),("11","#454e56"),("3","x"),("6","0.5"),("9","3"),("10","Square")],Right (Just (RepExamples {repTextbox = "x", repTextarea = "", repSliderI = 3, repSlider = 0.5, repCheckbox = True, repToggle = False, repDropdown = 3, repShape = SquareShape, repColor = "#454e56"}))),Right (fromList [("7","true"),("4",""),("2","true"),("5","2"),("8","false"),("11","#454e56"),("3","x"),("6","0.5"),("9","3"),("10","Square")],Right (Just (RepExamples {repTextbox = "x", repTextarea = "", repSliderI = 2, repSlider = 0.5, repCheckbox = True, repToggle = False, repDropdown = 3, repShape = SquareShape, repColor = "#454e56"}))),Right (fromList [("7","true"),("4",""),("2","true"),("5","2"),("8","false"),("11","#454e56"),("3","x"),("6","0.6"),("9","3"),("10","Square")],Right (Just (RepExamples {repTextbox = "x", repTextarea = "", repSliderI = 2, repSlider = 0.6, repCheckbox = True, repToggle = False, repDropdown = 3, repShape = SquareShape, repColor = "#454e56"}))),Right (fromList [("7","false"),("4",""),("2","true"),("5","2"),("8","false"),("11","#454e56"),("3","x"),("6","0.6"),("9","3"),("10","Square")],Right (Just (RepExamples {repTextbox = "x", repTextarea = "", repSliderI = 2, repSlider = 0.6, repCheckbox = False, repToggle = False, repDropdown = 3, repShape = SquareShape, repColor = "#454e56"}))),Right (fromList [("7","false"),("4",""),("2","true"),("5","2"),("8","true"),("11","#454e56"),("3","x"),("6","0.6"),("9","3"),("10","Square")],Right (Just (RepExamples {repTextbox = "x", repTextarea = "", repSliderI = 2, repSlider = 0.6, repCheckbox = False, repToggle = True, repDropdown = 3, repShape = SquareShape, repColor = "#454e56"}))),Right (fromList [("7","false"),("4",""),("2","true"),("5","2"),("8","true"),("11","#454e56"),("3","x"),("6","0.6"),("9","5"),("10","Square")],Right (Just (RepExamples {repTextbox = "x", repTextarea = "", repSliderI = 2, repSlider = 0.6, repCheckbox = False, repToggle = True, repDropdown = 5, repShape = SquareShape, repColor = "#454e56"}))),Right (fromList [("7","false"),("4",""),("2","true"),("5","2"),("8","true"),("11","#454e56"),("3","x"),("6","0.6"),("9","5"),("10","#00b4cc")],Right (Just (RepExamples {repTextbox = "x", repTextarea = "", repSliderI = 2, repSlider = 0.6, repCheckbox = False, repToggle = True, repDropdown = 5, repShape = CircleShape, repColor = "#454e56"})))]
 
 -- The tests
 tests :: IO TestTree
diff --git a/web-rep.cabal b/web-rep.cabal
--- a/web-rep.cabal
+++ b/web-rep.cabal
@@ -1,6 +1,6 @@
 cabal-version: 1.12
 name:           web-rep
-version:        0.3.2
+version:        0.4.0
 synopsis:       representations of a web page
 category: web
 description:    An applicative-based, shared-data representation of a web page. 
@@ -30,7 +30,6 @@
       src
   build-depends:
     base >= 4.12 && <5,
-    JuicyPixels >= 3.3.4 && < 3.4,
     aeson >= 1.4.5 && < 1.5,
     attoparsec >= 0.13.2 && < 0.14,
     bifunctors >= 5.5.5 && < 5.6,