/hts-colors

color converter and palette creator, transposes HTS from RGB. Single-page app in HTML and jQuery

Primary LanguageJavaScript

HTS Color-Saver

This service allows easy conversion between colors in the standard RGB band and the more intuitive HTS system (Hue, Tone, and Saturation). I use the RGB => HSV conversion formulae developed by Albert H. Munsell et all [1]. Users can save a palette of colors and corresponding hex-codes for application elsewhere.

There are a lot of polished color-section tools on the internet, but most are pretty bloated, often run slowly, and have way more features than you need just to pick a simple color palette for your site. This tool is designed to get you where you need to go with a minimum of distraction.

example-of-use

  • color-saver-in-action

Contents

  1. Setup
  2. Usage
  3. Roadmap
  4. Development
  5. Math
  6. License
  7. Notes

Setup

To clone and run this servce, you'll need Git installed on your computer, and a modern browser. From the command line:

# Clone this repo
$ git clone https://github.com/dtklumpp/hts-colors

# Go into the repository
$ cd hts-colors

# Run the app
$ open -a "Google Chrome" index.html

Usage

  1. Create a color using the HTS sliders
  2. Click "convert" to convert into hex values
  3. OR, click "Save Color" to start a palette
  4. Keep adding more colors!
  5. Re-order colors in your palette with the "+" & "-" knobs
  6. Delete a color with the "X"
  7. Press "Hex" to convert everything and start a new palette

Roadmap -- pending features

  • support 3-way RGBA conversion
  • support color-selection in any of the 3 systems
  • make an account (save palettes for later)
  • compare multiple sets of palettes at once
  • copy/paste a whole palette in Hex form as a reference

Math

Conversion Basis:

  • color = (hue * 3 / 100)
  • degree = color - Math.floor(color)
  • ratio = (1 - 2 * Math.abs(degree - 0.5))

Development

To help with a bug or add functionality, do this:

  • Fork this repo
  • Make a branch (git checkout -b new-feature)
  • Make modifications where necessary
  • Add comments corresponding to your changes
  • Commit (git commit -m 'explanation')
  • Push up (git push origin new-feature)
  • Make a Pull Request

License

MIT ©

Notes

This is my own attempt at a bare-bones and practical utility for developers, but inspiration for this project included the "Coolors" trending color palettes site, the Paletton color wheel picker tool, and a lot of research on the history of Computer Graphics