Heath's Colorsliders

Slide (or pick!) your way to designer colors

About Heath's ColorSliders

A novice, Heath B, originally conceived of this app to help him learn JavaScript design colors, all on his own. We've added to his original design but have kept it at TNT to inspire other novices to try out new stuff!

This updated app, co-authored by Copilot, lets you explore and create colors using five different methods, all working together in real time. You can use:

  • Color Picker: Choose any color visually using the swatch input.
  • Hex Code: Enter or copy a 6-digit hexadecimal code (like #7A81FF) to specify a color exactly.
  • RGB Sliders: Adjust the Red, Green, and Blue values (0–255) to mix your own color.
  • HSB Sliders: Set Hue, Saturation, and Brightness (sometimes called HSV for Value) for a way to describe colors, popular in digital art and design.
  • HSL Sliders: Set Hue (color type), Saturation (intensity), and Lightness (brightness/darkness) for another way to define a color.

All these controls are synchronized: change one, and the others update instantly. For example, if you move the RGB sliders, the hex code, color picker, HSL, and HSB sliders all update to match. This helps you see how different color systems relate and makes it easy to copy color values for any project.

What are these color systems?

  • RGB (Red, Green, Blue): Used in screens and digital images. Mix different amounts of red, green, and blue light to make any color.
  • Hex: A shorthand for RGB, often used in web design. Each pair of symbols represents red, green, or blue in hexadecimal.
  • HSB/HSV (Hue, Saturation, Brightness/Value): Commonly used in design software. Preferred at TNT
  • HSL (Hue, Saturation, Lightness): Similar to HSB, and describes colors more like artists do—by type, intensity, and lightness.

Note: While “Lightness” and “Brightness” sound similar, they measure color differently. Lightness (in HSL) describes how close a color is to pure white or black, with 50% being the pure color and 0% or 100% being black or white. Brightness (in HSB/HSV), on the other hand, measures how much light is in the color, with 0% always being black and 100% being the most vivid version of the color (not necessarily white). This means a color at 100% lightness can look pale or washed out, while 100% brightness is always bold and intense.

It helps to think of 'Hue' in terms of the color wheel where the red family is at 0°.

Try experimenting with each method to see how they affect the color. This app is a great way to learn how color works in computers and design!

...loading...