A color palette

It could be nice for the #pses website

Each theme provides an accent, special, and neutral palette with 6 tints and 6 shades for a total of 13 generated colors each. Some themes use preset hues for each color, and others are generated based on color-theory.

A dark mode with an invert option is provided.

A color gamut is a dimension in which we define colors, and the color space defines how we define a color inside the gamut.

For example, sRGB is a color gamut that spans a range of colors, and Hex, RGB and HSL are the spaces available to explore the gamut.

and the sRGB gamut becomes inconvenient:

• The technology allows better colors (at least a wider gamut than allowed by sRGB)
• Dead grey zones between two points in space.
• inconsistent levels of lightness

So two units have landed. One is oklch:

• l controls the lightness, and measured in a range of 0% to 100%
• c is the chroma value, measured in decimals between 0 and 0.37
• h is the same old hue of HSL, in the same range of 0deg to 360deg
• / a is the alpha in the oklch.

The chroma limit value could be infinite, but P3 Iphone display and sRGB are limited to 0.37.

“Chroma refers to the purity of a color. A hue with high chroma has no black, white, or gray added to it. Conversely, adding white, black, or gray reduces its chroma. It’s similar to saturation but not quite the same. Chroma can be thought of as the brightness of a color in comparison to white.” — Cameron Chapman

It generated 2 colors that have an accessible contrast with each other

oklch is based on human perception instead of the RGB for LCH.

1. 140 named colors
2. RGB (the traditional notation)
   • Note we can replace rgba(255, 0, 0, 0.5) with rgb(255 0 0 / 0.5)
3. Hex codes (the de-facto used unit)
4. HSL (the human-readable format):
   • hue: the pigment used (deg)
   • saturation: how much pigment (%)
   • lightness: how light? (%)
5. display p3: only supported in Safari and Chrome but allow more colors than sRGB
6. LCH: a more human-friendly representation than HSL. It is only supported in recent versions of Chrome and Safari though. oklch fixes some bugs of lch.

#BADA55, #101 (lol), #C55 (CSS), #fb1 (FBI), etc...

It uses the l33t code for that.

Useful for flat design

Generate a palette color based on one color, and shows the colors with a proper accessibility ratio (3:1 or 4.5:1).

Can work perfectly with https://www.opensourcecolorsystem.design/ where a meaning to a color is provided!