| Copyright | (C) 2016-2026 David M. Johnson |
|---|---|
| License | BSD3-style (see the file LICENSE) |
| Maintainer | David M. Johnson <code@dmj.io> |
| Stability | experimental |
| Portability | non-portable |
| Safe Haskell | None |
| Language | Haskell2010 |
Miso.CSS.Color
Description
Overview
Miso.CSS.Color provides the Color type and smart constructors for every
CSS color format, plus the full set of
CSS named colors.
Colors are produced by smart constructors (rgb, rgba, hsl, hsla,
oklch, oklcha, hex, var) and consumed by renderColor, which
serialises a Color to a MisoString suitable for use as a
CSS property value. All color constructors are re-exported from Miso.CSS.
Color formats
rgbr g brgb(r,g,b)— RGBrgbar g b argba(r,g,b,a)— RGBAhslh s lhsl(h,s,l)— HSLhslah s l ahsla(h,s,l,a)— HSLAoklchl c hoklch(l% c h)— OKLCHoklchal c h aoklch(l% c h / a)— OKLCHAhexs#s— Hexvarnamevar(--name)— CSS Variables
Quick start
import qualified Miso.CSS as CSS import Miso.CSS.Color myView ::ViewModel Action myView =div_[ CSS.style_[ CSS.backgroundColorcornflowerblue, CSS.color(rgba255 255 255 0.9) , CSS.borderColor(hex"333") ] ] []
Overloaded hex literals
With -XOverloadedLabels, hex color strings can be written as label
literals directly where a Color or MisoString is expected.
The leading # is inserted automatically:
{-# LANGUAGE OverloadedLabels #-}
myColor :: Color
myColor = #ff6347 -- equivalent to hex "ff6347"
myString :: MisoString
myString = #cccccc -- equivalent to "#cccccc"
Named colors
All 148 CSS named colors
are available as top-level values (e.g. red, blue, cornflowerblue).
Each is defined as an rgba value with full opacity (alpha = 1) and
renders to its rgba(…) form via renderColor.
See also
- Miso.CSS — CSS property DSL that consumes
Colorvalues - Miso.CSS.Types — low-level CSS types
Synopsis
- data Color
- rgba :: Int -> Int -> Int -> Double -> Color
- rgb :: Int -> Int -> Int -> Color
- hsl :: Int -> Int -> Int -> Color
- hsla :: Int -> Int -> Int -> Double -> Color
- oklch :: Double -> Double -> Double -> Color
- oklcha :: Double -> Double -> Double -> Double -> Color
- hex :: MisoString -> Color
- var :: MisoString -> Color
- renderColor :: Color -> MisoString
- transparent :: Color
- aliceblue :: Color
- antiquewhite :: Color
- aqua :: Color
- aquamarine :: Color
- azure :: Color
- beige :: Color
- bisque :: Color
- black :: Color
- blanchedalmond :: Color
- blue :: Color
- blueviolet :: Color
- brown :: Color
- burlywood :: Color
- cadetblue :: Color
- chartreuse :: Color
- chocolate :: Color
- coral :: Color
- cornflowerblue :: Color
- cornsilk :: Color
- crimson :: Color
- cyan :: Color
- darkblue :: Color
- darkcyan :: Color
- darkgoldenrod :: Color
- darkgray :: Color
- darkgreen :: Color
- darkgrey :: Color
- darkkhaki :: Color
- darkmagenta :: Color
- darkolivegreen :: Color
- darkorange :: Color
- darkorchid :: Color
- darkred :: Color
- darksalmon :: Color
- darkseagreen :: Color
- darkslateblue :: Color
- darkslategray :: Color
- darkslategrey :: Color
- darkturquoise :: Color
- darkviolet :: Color
- deeppink :: Color
- deepskyblue :: Color
- dimgray :: Color
- dimgrey :: Color
- dodgerblue :: Color
- firebrick :: Color
- floralwhite :: Color
- forestgreen :: Color
- fuchsia :: Color
- gainsboro :: Color
- ghostwhite :: Color
- gold :: Color
- goldenrod :: Color
- gray :: Color
- green :: Color
- greenyellow :: Color
- grey :: Color
- honeydew :: Color
- hotpink :: Color
- indianred :: Color
- indigo :: Color
- ivory :: Color
- khaki :: Color
- lavender :: Color
- lavenderblush :: Color
- lawngreen :: Color
- lemonchiffon :: Color
- lightblue :: Color
- lightcoral :: Color
- lightcyan :: Color
- lightgoldenrodyellow :: Color
- lightgray :: Color
- lightgreen :: Color
- lightgrey :: Color
- lightpink :: Color
- lightsalmon :: Color
- lightseagreen :: Color
- lightskyblue :: Color
- lightslategray :: Color
- lightslategrey :: Color
- lightsteelblue :: Color
- lightyellow :: Color
- lime :: Color
- limegreen :: Color
- linen :: Color
- magenta :: Color
- maroon :: Color
- mediumaquamarine :: Color
- mediumblue :: Color
- mediumorchid :: Color
- mediumpurple :: Color
- mediumseagreen :: Color
- mediumslateblue :: Color
- mediumspringgreen :: Color
- mediumturquoise :: Color
- mediumvioletred :: Color
- midnightblue :: Color
- mintcream :: Color
- mistyrose :: Color
- moccasin :: Color
- navajowhite :: Color
- navy :: Color
- oldlace :: Color
- olive :: Color
- olivedrab :: Color
- orange :: Color
- orangered :: Color
- orchid :: Color
- palegoldenrod :: Color
- palegreen :: Color
- paleturquoise :: Color
- palevioletred :: Color
- papayawhip :: Color
- peachpuff :: Color
- peru :: Color
- pink :: Color
- plum :: Color
- powderblue :: Color
- purple :: Color
- red :: Color
- rosybrown :: Color
- royalblue :: Color
- saddlebrown :: Color
- salmon :: Color
- sandybrown :: Color
- seagreen :: Color
- seashell :: Color
- sienna :: Color
- silver :: Color
- skyblue :: Color
- slateblue :: Color
- slategray :: Color
- slategrey :: Color
- snow :: Color
- springgreen :: Color
- steelblue :: Color
- tan :: Color
- teal :: Color
- thistle :: Color
- tomato :: Color
- turquoise :: Color
- violet :: Color
- wheat :: Color
- white :: Color
- whitesmoke :: Color
- yellow :: Color
- yellowgreen :: Color
Types
Data type for expressing Color
Constructors
| RGBA Int Int Int Double | Red, green, blue and alpha transparency. See here |
| RGB Int Int Int | Red, green, blue. See here |
| HSL Int Int Int | Hue, saturation, light. See here |
| HSLA Int Int Int Double | Hue, saturation, light and alpha transparency. See here |
| Hex MisoString | Hexadecimal representation of a color. See here |
| OKLCH Double Double Double | Lightness, Chroma, Hue. See oklch. |
| OKLCHA Double Double Double Double | Lightness, Chroma, Hue, Alpha. See oklhc. |
Smart constructor
hex :: MisoString -> Color Source #
var :: MisoString -> Color Source #
Smart constructor for a CSS variable.
>>>renderColor (var "foo")"var(--foo)"
Render
renderColor :: Color -> MisoString Source #
Renders a Color as MisoString
>>>renderColor (hex "ccc")"#ccc"
Colors
transparent :: Color Source #
Smart constructor for the transparent color
>>>renderColor transparent"rgba(0,0,0,0.0)"
antiquewhite :: Color Source #
aquamarine :: Color Source #
blanchedalmond :: Color Source #
Smart constructor for the blanchedalmond Color.
>>>renderColor blanchedalmond"rgba(255,235,205,1.0)"
blueviolet :: Color Source #
chartreuse :: Color Source #
cornflowerblue :: Color Source #
Smart constructor for the cornflowerblue Color.
>>>renderColor cornflowerblue"rgba(100,149,237,1.0)"
darkmagenta :: Color Source #
darkorange :: Color Source #
darkorchid :: Color Source #
darksalmon :: Color Source #
darkseagreen :: Color Source #
darkviolet :: Color Source #
deepskyblue :: Color Source #
dodgerblue :: Color Source #
floralwhite :: Color Source #
forestgreen :: Color Source #
ghostwhite :: Color Source #
greenyellow :: Color Source #
lemonchiffon :: Color Source #
lightcoral :: Color Source #
lightgoldenrodyellow :: Color Source #
Smart constructor for the lightgoldenrodyellow Color.
>>>renderColor lightgoldenrodyellow"rgba(250,250,210,1.0)"
lightgreen :: Color Source #
lightsalmon :: Color Source #
lightskyblue :: Color Source #
lightslategray :: Color Source #
Smart constructor for the lightslategray Color.
>>>renderColor lightslategray"rgba(119,136,153,1.0)"
lightslategrey :: Color Source #
Smart constructor for the lightslategrey Color.
>>>renderColor lightslategrey"rgba(119,136,153,1.0)"
lightsteelblue :: Color Source #
Smart constructor for the lightsteelblue Color.
>>>renderColor lightsteelblue"rgba(176,196,222,1.0)"
lightyellow :: Color Source #
mediumaquamarine :: Color Source #
Smart constructor for the mediumaquamarine Color.
>>>renderColor mediumaquamarine"rgba(102,205,170,1.0)"
mediumblue :: Color Source #
mediumorchid :: Color Source #
mediumpurple :: Color Source #
mediumseagreen :: Color Source #
Smart constructor for the mediumseagreen Color.
>>>renderColor mediumseagreen"rgba(60,179,113,1.0)"
mediumslateblue :: Color Source #
Smart constructor for the mediumslateblue Color.
>>>renderColor mediumslateblue"rgba(123,104,238,1.0)"
mediumspringgreen :: Color Source #
Smart constructor for the mediumspringgreen Color.
>>>renderColor mediumspringgreen"rgba(0,250,154,1.0)"
mediumturquoise :: Color Source #
Smart constructor for the mediumturquoise Color.
>>>renderColor mediumturquoise"rgba(72,209,204,1.0)"
mediumvioletred :: Color Source #
Smart constructor for the mediumvioletred Color.
>>>renderColor mediumvioletred"rgba(199,21,133,1.0)"
midnightblue :: Color Source #
navajowhite :: Color Source #
papayawhip :: Color Source #
powderblue :: Color Source #
saddlebrown :: Color Source #
sandybrown :: Color Source #
springgreen :: Color Source #
whitesmoke :: Color Source #
yellowgreen :: Color Source #
Orphan instances
| KnownSymbol hex => IsLabel hex MisoString Source # |
grey :: MisoString grey = #cccccc |
Methods fromLabel :: MisoString # | |