< 2020 Capstone Gallery

Hues

A small webapp that generators a full spectrum color that work harmoniously with a brand color.

Pointing up. This is not an image. It's the app. Give it a try.
Hover

More Information

Hover your cursor over a color swatch to see the HEX color and contrast ratio.

Darkmode

Toggle Background

The sun & moon icons toggle the background between black & white. The background color affects the colors swatch contrast ratio.

Contrast

Check Contrast

Each color swatch has a contrast ratio in the lower righthand corner. For readable text look for a 4.5 or higher.

Picking colors
can be hard

Hues is a color generator that will generate 12 different hues that are of equal saturation and brightness to your inputted color. Making it easier to create harmonious color palettes.

Ten attentional shade and tints are generated along with each hue. Perfect for user interfaces and data visualization.

Try Hues Now

Color Wheel graphics
Hues Mobile

Overview

Hues was as much a development project as it is a design project.

Build a working web app Provide general color for branding and UI projects. Generate beautiful colors that are harmonious that are the same brightness level, with the perceived brightness being constant.

Tools

  • HTML
  • JavaScript
  • Three.js
  • Figma
  • Chroma.js

How Hues works

Eeny, meeny, miny, moe, here are 10 colors

Hues color generation is pretty straight forward’s. But it uses different methods to get the hues and greys. For both the colors and greys it first takes in the color the user inputs. Then it converts your hex color into an HSL color.
To get the different color swatches it rotates the hue value for every step in the color spectrum starting at the inputted color.

For the grey, the app will convert your color into an HSL value then desaturation the inputted color to get a rich grey tone.
To get the tints and shades, the generated hues increase the brightness while decreasing the saturation and lightness while increasing the saturation. This keeps a perceived brightness level across the colors.