A small webapp that generators a full spectrum color that work harmoniously with a brand color.
Hover your cursor over a color swatch to see the HEX color and contrast ratio.
The sun & moon icons toggle the background between black & white. The background color affects the colors swatch contrast ratio.
Each color swatch has a contrast ratio in the lower righthand corner. For readable text look for a 4.5 or higher.
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.
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.
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.