purescript-contrib / purescript-colors

Convert, manipulate, analyze, blend, color scales, color schemes

Colors

A package for dealing with colors in PureScript.

Installation

Install colors with Spago:

spago install colors

Quick start

> toHexString (hsl 200.0 0.4 0.5)
"#4d91b3"

> cssStringHSLA (seagreen # lighten 0.2 # saturate 0.3)
"hsl(146.45, 80.27%, 56.27%)"

> toHexString <$> colors (colorScale HSL hotpink Nil darksalmon) 5
"#ff69b4" : "#fa6d99" : "#f47182" : "#ef7d76" : "#e9967a" : Nil

> toHexString <$> (sortBy (comparing luminance) [black, white, blue, lightgreen])
["#000000","#0000ff","#90ee90","#ffffff"]

Documentation

Otherwise, colors documentation is stored in a few places:

1. Module documentation is published on Pursuit.
2. Written documentation is kept in the docs directory.
3. Usage examples can be found in the test suite.

If you get stuck, there are several ways to get help:

• Open an issue if you have encountered a bug or problem.
• Ask general questions on the PureScript Discourse forum or the PureScript Discord chat.

Contributing

You can contribute to colors in several ways:

1. If you encounter a problem or have a question, please open an issue. We'll do our best to work with you to resolve or answer it.

2. If you would like to contribute code, tests, or documentation, please read the contributor guide. It's a short, helpful introduction to contributing to this library, including development instructions.

3. If you have written a library, tutorial, guide, or other resource based on this package, please share it on the PureScript Discourse! Writing libraries and learning resources are a great way to help this library succeed.

Credit

Based on initial work by paf31 and inspired by (the PureScript version of) Elm.Color, TinyColor and Chroma.js.

purescript-colors's Issues

add HSV

toHSVA :: Color.Color -> {h :: Number, s :: Number, v :: Number, a :: Number}
toHSVA color = case Color.toHSLA color of
  ({h, s, l, a}) ->
    let
      s' = s * (if l < 0.5 then l else 1.0 - l)
    in
      { h
      , s: 2.0 * s' / (l + s')
      , v: l + s'
      , a
      }

hsva :: Number → Number → Number → Number → Color.Color
hsva h s v a = Color.hsla h s' l a
  where
  tmp = (2.0 - s)*v
  s' = s * v / (if tmp < 1.0 then tmp else 2.0 - tmp)
  l = tmp / 2.0

hsv :: Number → Number → Number → Color.Color
hsv h s v = hsva h s v 1.0

adopted from https://gist.github.com/xpansive/1337890

Update repo to `purescript-contrib` standards

• Rename master branch to main
• Sync labels
• Generate contrib files

New functionality

see https://github.com/bgrins/TinyColor

add HSLuv - Human-friendly HSL

Have not gone into it too much but looks like it could be good alternative to HSL for some applications. On it's website there are couple implementations in different languages and they could be adopted. Not sure if I understand correctly but we then we could also add HSLuv to ColorScale type which could be used in sample function.

http://www.boronine.com/2012/03/26/Color-Spaces-for-Human-Beings/
http://www.boronine.com/2012/10/06/My-Progress-On-HUSL/
https://programmingdesignsystems.com/color/perceptually-uniform-color-spaces/

Add fromHexString, toHexString

Re-enable flaredoc for -colors

Use RGB equivalence for the Eq instance

Adjust alpha value

Is there a combinator or another way to adjust the alpha value of a given (HSLA) colour?

Add combinator for working with ColorStops

I have used this two combinators for working with ColorStops here

combineStops :: Number → ColorStops → ColorStops → ColorStops
reverseStops :: ColorStops → ColorStops

--  usage:
myStops = fooStops `combineStops 0.5`  (reverseStops fooStops)

Interactive documentation

This is just a note from the former maintainer: there used to be an interactive documentation for this library. It actually still works after transferring the repo: http://purescript-contrib.github.io/purescript-colors/ (but it is not in sync with the code anymore)

I'm not sure if someone intends to maintain it, I just thought I'd mention it here because the link to that page has been removed(?). The deployed webpage is in the gh-pages branch. The code to generate the documentation is here: https://github.com/purescript-contrib/purescript-colors/tree/main/documentation

Edit: also, thank you very much for resurrecting this library 👍

`toHexString` and alpha channel

Currently the toHexString function does not represent the alpha channel in its return value. I'm sure that made sense at the time, but #rrggbbaa color notation has reasonably widespread support these days. I propose that we update toHexString accordingly to include the alpha channel if specified.

Benefits:

1. Hex strings are more compact than HSLA or RGBA.
2. No loss of information

Consider transferring to contrib organization

Hi @sharkdp!

I'm a member of the PureScript core team and the PureScript Contributors organization (purescript-contrib). We're in the midst of a new PureScript release and I noticed that one or more of our libraries depends on this one.

In general we don't allow libraries from the contrib organization to depend on libraries outside it (or core). This ensures that the core team can make all necessary updates when making a new compiler release.

I noticed while reading through other issues that you aren't actively maintaining this library anymore. Would you be open to transferring it to the purescript-contrib organization, where we will ensure it's updated for each compiler release? You would certainly be able to stay on as the primary maintainer if you wanted to -- but you wouldn't have to if you'd rather not.

Thanks for your time! Let me know what you think!

Add hsva, toHSVA

Add HUSL

http://www.husl-colors.org/

add bezier sample

I was reading about color scales and color palettes and came across this:
https://gka.github.io/palettes
https://www.vis4.net/blog/posts/mastering-multi-hued-color-scales/

Author uses this method, which is not robust in sense that it works with only 5 colors. But we can port this to have bezier for arbitrary number of arbitrary dimensional vectors. (this and this might be useful for implementing it)

From API perspective we would have add another function sampleBezier but as colors and cssColorStops refer to sample directly they would need to be updated so we can pass different sampling function as argument.

LICENSE file missing

Bower file says MIT... is this correct?

add 'cubehelix' colour scheme

I came across 'cubehelix' colour scheme.
This page shows how different parameters effect the scheme. it would be great if we can reconstract that configuration in some object and then define something like cubehelix:: CubehelixConfig -> ColorScale.
Here is python implementation, on original page there are cople more.

Support wider gamuts & device-independent colors

-- | - Colors outside the sRGB gamut which cannot be displayed on a typical
-- | computer screen can not be represented by Color.

This ain't true anymore. DCI-P3 is quite common on phones and increasingly in monitors and laptops (such as my own). CSS4 opened up to color gamuts beyond sRGB https://www.w3.org/TR/css-color-4/#icc-colors. By choosing a device-independent color representation without gamma correction or color space clipping, device-dependent colors could be derived.

I would then suggest doing something like using CIELAB which W3 shows as the underlying color representation and convert to sRGB, P3, et.al. when needed. Alternatively LCH is another reasonable default.

Because LCH is both perceptually uniform and chroma-preserving, and because the axes correspond to easily understood attributes of a color, LCH is a good choice for color manipulation.

This would likely be a very breaking change, but I think is 100% necessary as it frees the library from color spaces. As it is, this is not a general-purpose library if colors are limited to sRGB.

---

If I'm missing something, please inform me.

Add triadic, tetradic color scheme generator

Run tests

Run the unit test once bodil/purescript-test-unit#19 is resolved

Bug when using `cssStringRGBA` with `hsl`?

In Sketch, the following are equivalent:

Hex: 01031D
HSL: 236 93 6
RGB: 1 3 29

However, cssStringRGBA $ hsl 236.0 0.93 0.6 renders rgb(58, 71, 248) instead of rgb(1, 3, 29).

Other combinations appear to work as expected:

module Main where

import Prelude

import Color (cssStringHSLA, cssStringRGBA, hsl, rgb)
import Effect.Console (log)
import TryPureScript (render, withConsole)

main = render =<< withConsole do
  log $ cssStringRGBA $ rgb 1 3 29         -- rgb(1, 3, 29)
  log $ cssStringRGBA $ hsl 236.0 0.93 0.6 -- rgb(58, 71, 248)
  log $ cssStringHSLA $ rgb 1 3 29         -- hsl(235.71, 93.33%, 5.88%)
  log $ cssStringHSLA $ hsl 236.0 0.93 0.6 -- hsl(236.0, 93.0%, 60.0%)

Remove colour schemes from library

I don't think everybody's favourite colour scheme du jour belongs in this library but in a tiny dedicated one depending on this one.
I personally use Tailwind colours these days and whenever I want to import a colour I have to be careful not to pick the Material version.

can't run tests

Can’t run tests as purescript-colors depends on purescript-flaredoc and purescript-flaredoc depends on purescript-colors, so when I run pulp test I get:

[1/9 DuplicateModule] 

  Module Color has been defined multiple times:
  
    /dev/purescript-colors/bower_components/purescript-colors/src/Color.purs line 1, column 1 - line 578, column 20
    /dev/purescript-colors/src/Color.purs line 1, column 1 - line 578, column 20

Improve gradients

• hslGradient should always take the shortest path along the "hue circle".
• Add other types of gradients (rgbGradient, ..)

Add saturate, desaturate

Add color blending

Add more color spaces

• CIE Lab* seems very interesting (implement as Hue-Chroma-Lightness):
  https://vis4.net/blog/posts/avoid-equidistant-hsv-colors/
• HSV?

Add CSS color names

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
https://www.w3.org/TR/css3-color/#svg-color

Should we take short path in interpolateAngle?

I came to this question lately when I saw gradient which was going over hue cycle 5 times here

as we can't have similar scale because of the "short path" thing

Re-enable interactive documentation

This depends on https://github.com/slamdata/purescript-markdown which does not work with PS 0.9 currently.

Re-enable the tests

once bodil/purescript-test-unit#26 is merged.

Properly treat imaginary colors (Lab color space)

Add color gradients

Maybe something like the following

gradient :: Color -> Color -> Int -> List Color
gradient from to steps = ...