Expanding a Color Palette (Saturation and Lightness)

I’ve been attempting to expand the colors in this project’s paltry color palette in order to make thematic status badges. In this version, I adjusted saturation, in addition to lightness to form a natural curve on the graph. I started with the base colors and the following contrast rules.

text:background ≥ 4.5:1
border:white ≥ 3:1
icon:background ≥ 3:1
icon:text ≈ 2:1

(I made a graph for the ruby color, too, but it wouldn’t fit in the screenshot.)

More by Justin McDowell

View profile