Revisit bright palette accents, closes #697

[lindsaym-fa]

Because this palette has the unique goal of supporting Font Awesome's current color usage, I suspect this palette will be the toughest to get just right. So, I've started here. 😊

Key changes:

• To be more true to the bright moniker (itself inspired by FA's usage), accent colors occur at tints lighter than 50 (gray being an intentional exception to keep FA's concept of "gravy", where dark grays skew towards navy blue)
• Skews yellow less towards red/orange to make way for Add orange #657
• Fixes peak chroma for gray so that it actually occurs at 40 (the clamped value) instead of 20
• Fixes a mistake from Replace teal with cyan, fixes #659 #671 so that awesome.css uses green for success instead of cyan

---

Before

After

---

Observations

When we get to using tintless colors in #220, I suspect we'll still want --wa-color-danger-fill-loud in awesome.css to use --wa-color-red-70 instead of the true core color, 60. Chroma is at its max (within sRGB gamut) for --wa-color-red-70, but because chroma is relatively low for reds at this lightness,¹ forcing less chroma for 60 and beyond has...well, not great results.²

At the same time, 60 feels a bit too strong to use alongside the other core colors, which sit at 70 or 80. Plus, 70 is a closer match to Font Awesome's oft-used red.³

¹ Chroma chart from Evil Martians' OKLCH color picker

² Very sad reds. 😢

³ As seen on fontawesome.com

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
webawesome	✅ Ready (Inspect)	Visit Preview	Feb 10, 2025 8:14pm

[LeaVerou]

This is overall fantastic work @lindsaym-fa! And yes, I agree that you started from the toughest one. Hardcore! 😬

Chroma is at its max (within sRGB gamut)

If it helps, I don’t think we need to stick within the sRGB gamut, P3 is fine. Even in the worst case, clipping instead of gamut mapping on an sRGB screen, the distance is small enough that it's usually okay.

• Red: Looking at this scale, it seems to me that the red 60 sticks out a bit (which in the sad version it doesn’t, but I agree it looks sad). Though I think the FA palette might be one of those cases where you want everything to skew lighter, so using one tint lighter than the accent seems reasonable.
• Indigo & purple: To me, this really doesn’t look like indigo, it looks very much like purple, and the purple looks closer to a pink. But it could be just me. One way to find out is to see what hue ranges our other scales use. I could compute that pretty easily.

The rest are dope 🚀

[lindsaym-fa]

To me, this really doesn’t look like indigo, it looks very much like purple, and the purple looks closer to a pink.

I'm inclined to agree. Admittedly, indigo is a close match for what FA calls "violet," but purple does match what FA calls "purple." Let me see about skewing these both more towards blue, or re-introducing a closer match to the indigo in FA's palette. FA has a pink, but it's not currently used, so perhaps this purple can slot in as pink instead.

These two colors are used pretty extensively on fontawesome.com, so I'd like to keep them somewhat true to what's in use now. @LeaVerou, if you don't mind, it might be helpful to know the general hue ranges for indigo, purple, and pink in other scales. I'll also reach out to some FA folks to see what they think.

I'll tweak red a bit, too.

[LeaVerou]

These two colors are used pretty extensively on fontawesome.com, so I'd like to keep them somewhat true to what's in use now. @LeaVerou, if you don't mind, it might be helpful to know the general hue ranges for indigo, purple, and pink in other scales. I'll also reach out to some FA folks to see what they think.

We don't have pink yet. Do you mean other color palettes, not Web Awesome’s? If so, that's actually already computed at https://palettes.colorjs.io/ !
IIRC that computes the ranges based on the accent color of each palette and those before/after it.

Looking those ranges:

• indigo is 268 – 285
• pink (including magenta and fuchsia) is 322 – 10 (370)
• purple (including violet) is 288 – 321

So that’s nice, they don't overlap like I feared. And yes, according to those, this palette’s indigo is definitely a purple though the purple is still in the purple range, though very close to pink, so we can just shift our range of pink to start from 318.

I can compute the hue ranges based on our other palettes if that would be helpful.

[lindsaym-fa]

Adjusted indigo and purple in this iteration, reserving FA's purple for pink instead.

@LeaVerou, let me know if this feels better!