Huetility App

Huetility was developed to make it easy for software engineers to make smart, accessible color decisions without having to open multiple tools or do the complex math needed to navigate digital colors.

The application includes a color picker for sRGB color modes: HSL, HSLA, RGB, RGBA, and hexcode. After selecting a color, users are shown a variety of visuals including tints and shades of the color, information to support accessibility including color contrast and vision deficiency emulations, and harmony palettes such as complementary, analogous, and more. The visuals can be clicked to quickly copy values that can be added to CSS rules.

Built with JavaScript, TypeScript, CSS, Vite, React, React Testing Library, Vitest, and Git/GitHub.

Project highlights:

  • Extensive digital color research to understand sRGB models, color perception, and how colors are translated between modes, which backs a library of utility/helper functions

  • Styled for responsiveness and accessibility

  • Easy-to-use tools for exploring colors interact, including those with transparency

 

App

Selecting a color will recalculate all of the information displayed.

More detailed information on individual features are listed below.

 

Color Picker

Select a color by entering values through the inputs or sliders, or by clicking a color on the wheel. On the wheel, shades are along the exterior, tints on the interior and full-saturation hues in the central band.

  • Hexcode: 3, 6, or 8 character hexidecimal notation

  • HSL: Hue as 0 to 360 angle on the color wheel, saturation as 0 (gray) to 100 (full color), and luminance as 0 (black) to 100 (white)

  • HSLA: HSL with an alpha channel of 0 (opaque) to 1 (transparent)

  • RGB: Red, green, and blue values between 0 and 255

  • RGBA: RGB with an alpha channel of 0 (opaque) to 1 (transparent)

 

Color Constrast

Users can choose colors to calculate contrast ratios and see messages for legibility of text.

To meet WCAG accessibility standards, text and interactive elements should have a contrast ratio of at least 4.5:1.

  • 21: maximum contrast (ex: black on white)

  • 4.5 or above: Good for all text sizes, prefer 14pt text and above

  • 3 to 4.5: Ok for large text, at least 18pt regular weight or 14pt bold type

  • 1: No contrast (ex: black on black)

 

Tint and Shade Scales

Shades are created by mixing a color with black; tints are created by mixing a color with white.

Changing the tint/shade quantity produces that number of mixtures on a scale from the selected color to pure white or black. Clicking any of the swatches will copy the value (formatted in the color mode the user designated in the picker) to the clipboard for use in CSS declarations.

 

Color Theory Harmony Palettes

Harmonious palettes are created through geometric relationships on the color wheel. Clicking any of the swatches will copy the value (formatted in the color mode the user designated in the picker) to the clipboard for use in CSS declarations.

  • Complementary: Two colors that are directly opposite each other on the color wheel.

  • Triadic: Three colors that are equally distant from each other on the color wheel, forming an equilateral triangle.

  • Tetradic: Four colors that are equally distant from each other on the color wheel, forming a square.

  • Split Complementary: Color scheme with colors equally close to the complement of the selected color. Here, two colors are 30 degrees to each side of the selected color's complement.

  • Monochromatic: Color scheme with light and/or dark versions of a hue. Here, the selected color is blended with white to make a tint and with black to make a shade.

  • Analogous: Color scheme with colors equally close to the selected color. Here, two colors are 30 degrees to each side of the selected color.

 

Vision Deficiencies

Simulations showing how users with vision deficiencies might perceive the selected color. Contrasts for transparent colors are calculated against the white backgrounds. Each simulated swatch shows the WCAG contast ratio between the perceived color and black or white.

  • Protoanomaly: Defective L-cones, 1.3% of population

  • Protanopia: Missing or non-functioning L-cones, 1.3% of population.

  • Deuteranomaly: Defective M-cones, 5.4% of population

  • Deuteranopia: Missing or non-functioning M-cones, 1.2% of population

  • Tritanomaly: Defective S-cones, .02% of population

  • Tritanopia: Missing or non-functioning S-cones, .03% of population

  • Achromatopsia: Complete color blindness, .00003% of population

  • Monochromacy: Missing or non-functioning M-cones and L-cones, .00001% of population

Built by Amanda Hinton