167 private links
Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes.
Where is the line between blue and green?
Different patterns: monochromatic, complementary, split complementary, analogous, tetradic, freestyle :)
Key takeaways:
- if someone wants high-contrast on some websites, does it mean for every websites?
- go for the accessible version first: high-contrast except for
@media (prefers-contrast: less) - why not fixing color contrast by default?
Some browsers implements customization such as Arc https://resources.arc.net/hc/en-us/articles/19212718608151-Boosts-Customize-Any-Website
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 contrast checker that can also convert colors to new CSS units.
Made by oddsbird.com
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
/ ais 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
HipFonts sells digital assets. They're good for inspiration.
They also have a #logo collection: https://hipfonts.com/category/logos/
Some #color and how to use them: https://hipfonts.com/category/colors/
It generated 2 colors that have an accessible contrast with each other
A current website shared across the web because it allows to test some colors on real website.
A color picker with the oklch format
oklch is based on human perception instead of the RGB for LCH.
- 140 named colors
- RGB (the traditional notation)
- Note we can replace
rgba(255, 0, 0, 0.5)withrgb(255 0 0 / 0.5)
- Note we can replace
- Hex codes (the de-facto used unit)
- HSL (the human-readable format):
- hue: the pigment used (deg)
- saturation: how much pigment (%)
- lightness: how light? (%)
- display p3: only supported in Safari and Chrome but allow more colors than sRGB
- LCH: a more human-friendly representation than HSL. It is only supported in recent versions of Chrome and Safari though.
oklchfixes some bugs of lch.
Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes.