[Resource] Color Codes and Palettes

:wave: Hey there!

I love beautiful docs and I love colors - theres nothing quite like a good color scheme to make your docs/website/materials look gorgeous!

Yes, there are many other websites on the internet that do similar things, but I always find Coda docs far easier to use than random websites with ads, or superfluous features. Let’s be honest, everything’s better in a doc.

I made this doc as a repository for colors I find myself often using in docs and elsewhere and thought I’d pass it along to the community.

  • See the doc and copy it for yourself here → Colors Doc

Or keep reading on to see the main pieces of the document:

All Colors
The doc has over 900 colors categorized by Hex Code and RGB Code with included search bar and quick sort to find main colors.

Color Palettes
I’ve created 27 easy to use color palettes with corresponding hex codes (use in a doc or outside your doc!)
Screen Cast 2021-12-13 at 10.54.07 AM

RGB Color Chooser
Want to create your own custom colors? The doc includes an easy to use RGB Color Slider that shows you the corresponding hex code, the color itself, and then how your color would look as text on both white and black backgrounds
Screen Cast 2021-12-13 at 10.55.28 AM

16 Likes

Thanks @Scott_Collier-Weir this is great. I love using a more colorful design that the traditional choices in most applications. This is a big help so I don’t have to hunt the hex codes.

Great work!

1 Like

Cool!

Feature idea: Check for WCAG contrast levels for the text against white and black

3 Likes

Love the UI experimentation you’re doing lately, @Scott_Collier-Weir!

Why did you use the RGB/HEX pack though? It’s doable with not much effort with native formulas and would calculate instantly:

image

2 Likes

The RGB hex code pack was simply a learning opportunity for me. It was the first pack I ever built and the first piece of Javascript I’ve ever written

So I intentionally chose something that felt tangible and approachable in Javascript rather than choosing something that isn’t currently possible in Coda (which is what Packs are for)

The pack also allows you to do HEX → RGB (which while still possible in coda, as seen in my doc, is a little more difficult than the RGB–> Hex you have above)

4 Likes