diff --git a/README.md b/README.md index 760d22d..d832d7d 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,22 @@ -# Naevner.js — color descriptions from hex codes +# Naevner.js + ## Color descriptions generated from hex color codes Javascript plugin that provides natural language descriptions of hex color codes. - # Why we made this + ## Why we made this We made this to have screenreader support for reading out color names on [remembertostand.com](https://remembertostand.com/) (Turn on screenreader and press C when on the site to hear it in action) - # Credits + ## Credits * The hexToRGB and RGBToHSL functions used as part of this plugin are from https://css-tricks.com/converting-color-spaces-in-javascript/ - # Demo + ## Demo * Interactive demo of Naevner.js: [Nævner (naevner.com)](https://naevner.com/) * Naevner.js in use on a website — interactive demo: [Naevner.js in use on remembertostand.com](https://remembertostand.com/) * Naevner.js in use on a website — video demonstration of screenreader usage: [Naevner.js screenreader demo video](https://youtu.be/8kn6D_BuHYg) - # Getting started + ## Getting started Include the [minified code](https://github.com/samhaeng/naevner/blob/main/naevner-min.js) - # How to use + ## How to use ```javascript naevner(color); // Color input should be a string containing a @@ -23,7 +24,7 @@ // or without a preceding #-sign. ``` - # Examples + ## Examples ```javascript //Examples: naevner("#000000"); //Returns: “black” @@ -32,11 +33,26 @@ naevner("#2F5651"); //Returns: “dark, faded turquoise” naevner("#3F0548"); //Returns: “dark, clear, purpleish magenta” ``` - # Accepted values + ## Accepted values * 3-digit hex with preceding #-sign — e.g. `#f00` * 3-digit hex without preceding #-sign — e.g. `f00` * 6-digit hex with preceding #-sign — e.g. `#ff0000` * 6-digit hex without preceding #-sign — e.g. `ff0000` - # Questions or advice + ## Parameters + ### approximationSuffix + + Ending for approximate colors — e.g. “greenish yellow” or “redish orange". Note that “off-white” and “black” nuances currently always use the term “-tinted” (e.g. “red-tinted black” or “yellow-tinted off-white”) independent of this parameter. + ```javascript + naevner(color, approximationSuffix); + ``` + + Examples: + ```javascript + // naevner("#3F0548"); //Returns: “dark, clear, purple**ish** magenta” + // naevner("#3F0548", "-tinted"); //Returns: “dark, clear, purple**-tinted** magenta” + // naevner("#3F0548", "-like"); //Returns: “dark, clear, purple**-like** magenta” + ``` + + # Questions, ideas and advice If you have questions or advice, feel free to open an issue on this repo. Thank you!