midzdotdev / color-namer

Web app that generates color names for hex and rgb colors 🎨

Home Page:https://colornamer.netlify.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Color namer

"Naming colors has never been this easy!" - Abraham Lincoln

A web app that provides a name for a color. EZPZ.

Example usage GIF

Key Features``

  • Over 30,000 color names ⚡️
  • Accepts both hex and rgb formats 🎨
  • Color picker 🏹

Example

If you enter #fb8a70, you'll receive the name of SALMON NIGIRI along with the hex and rgb color representations, which would be #fb8a70 and rgb(251, 138, 112), respectively.

You might be asking yourself, "What is SALMON NIGIRI"?

My answer: " Who the hell knows? 🤷‍"

Accepted Color formats:

  • hex with hash (e.g. #323 or #332233)
  • hex without hash (e.g. 323 or 332233)
  • rgb (e.g. rgb(103, 33, 158))
  • supported CSS color names (e.g. red)

Dependencies

  • nearest-color - Utility to find nearest matching color
  • tinycolor2 - Color manipulation and conversion
  • color-names - List of 15,000+ color names accessible through their API
  • jscolor-picker - A color picker used when the browser doesn't support the native color picker display with input[type='color']

Inspirations + Contributions

  • David Aerne - Maintains the API for all the color names and has even contributed to the web app itself!
  • Name That Color - I've used this tool a lot and is the original inspiration for this project
  • David A.'s CodePen - I actually used a good deal of his code in this app with a few changes to the functionality and a different look
  • "Sass Color Variables That Don't Suck" - Landon Schropp - This article outlines how I follow naming variables in my code and it requires many different names for colors, which is what motivated me to build this

About

Web app that generates color names for hex and rgb colors 🎨

https://colornamer.netlify.com


Languages

Language:JavaScript 67.4%Language:CSS 25.9%Language:HTML 6.7%