Provide context to each chunks of color such as "Classy Palette" or "Collective".
Create an accessible color palette based on criteria AA
White text is better seen on orange background, although it has lower contrast. It requires more effort.
Black text seems less readable by the majority but it is better for some users.
There is no clear distinction.
lets you supply two color values in either hex, short hex, RGB percentages, or RGB decimals, and then get as many as ten color shades between the two you supplied.
#idea #project: reimplement it with an attractive UI and more options :)
Current limitations of other color blenders:
- from ColorHexa → only hex unit is supported
- from colordesigner.io → does not provide a palette of colors
- of hexcolorblender → only hex unit is supported
- of colorkit.org → only hex unit is supported
- of Adobe color Contrast Analyzer → does not generate palette colors
Improvements on the one of meyerweb:
- smoother UI
- support more color unit
- prefer the defined HTML color listed on the w3schools HTML Color names web page
- provide a custom amount of color mixes with a default of 7 or 10.
- works offline once the page is loaded
- WCAG 2 compliant?
Other requirements compared to other online
- the tool loads instantly
- it is SEO friendly → it is a static page that can be save for offline usage :)
- contrast checker agains WCAG, BITV, RGAA, ...
TL;DR Nearly 50% of HWB possible values tends to grey shades.
In both HWB & HSL colors, we can describe white and black and a full scale of grays using any hue we want. It doesn’t matter what hue we provide in either table
Lucky for us, browsers don’t generally render gradients using naive HSL math: currently browsers convert everything to sRGB before mixing. Gradients in RGB can still get muddy at times
It arranges some of last year’s album releases by color to create a rainbow of cover artwork.
Black and white design and pictures that are at some point interesting
A way to generate a gradient color depending of a main color. Applied with https://www.opensourcecolorsystem.design/system, it can be awesome :)
Pick your main color and this tool generate the platette that is WCAG compliant.
It generates individual Sass variables or css variables.
Summary:
RGB is known to be limited.
HSL provides a much more explicit way to describe the color:
- a position on a color wheel: hue (0-360, described as turn or degrees)
- how much of this color: saturation
- lightness
Looks better !
HWB: Hue, hiteness and Blackness. It is useful for creating monochrome color palette.
LAB is recommended if you want a color to look the same on-screen as, say, printed on a t-shirt.
It uses three axes: lightness, a-axis (green to red) and b-axis (blue to yellow)
LCH is much more interesting for web development though. it stands for Lightness, Chroma and Hue.
- lightness: a pourcentage that can exceeds 100.
- hue : is working the same as in HSL
- Chroma : respresents the amount of color. It is similar to the saturation. In the browsers, there is often an upper bound.
More about it: https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
A comparison between LCH and HSL : https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4253d9b2-46d7-4b10-9e1a-b5f3ac6cea1c/5-modern-css-color.png
Tip: Holding down SHIFT and clicking the color swatch in the inspector in Chrome and Firefox dev tools will toggle the color value between hex, RGB and HSL!
Thanks for this cool tip !
Check the Level 5 Color specification for more about incoming color possibilities.
microlight.js is a tiny library (2.2k minified) which improves readability of code snippets by highlighting, for any programming language, without attaching additional language packages or styles
#006fc6 (used on the smash magazine website, here as book titles)
If you want the text to be on dark background: #1499FF pass all AAA criteria about contrast.
On the contrary, #005A9E pass all the contrast on white background